Wie bekomme ich die Koordinaten des Punktes, auf den ich klicke?

Question

ich mit <canvas> Tag spielte und nur auf ein Problem gestoßen:

https://jsfiddle.net/awguo/6yLqa5hz/

ich die Koordinaten eines Punktes zu bekommen, wenn ich auf einer Leinwand klicken.

Ich suchte nach einer Weile und fand einige Funktionen, aber als ein 300x300 Leinwand, der Punkt seiner rechten unteren Punkt ist (300,150). Sollte es nicht 300.300 sein (weil das img 300x300 ist und die Leinwand 100% drauf ist)?

Warum?

Was soll ich tun, um die 300x300 zu bekommen?

Answer 1

Sie müssen die von Ihren Ereignishandlern zurückgegebenen Koordinaten event.clientX und event.clientY durch den Offset des Canvas-Elements im Vergleich zum Fenster anpassen. Um das zu tun, können Sie canvas.getBoundingClientRect verwenden, um die left & Canvas-Offsets zu erhalten. Achten Sie darauf, zu hören für resize & scroll Ereignisse. Wenn diese Ereignisse auftreten, müssen Sie den aktuellen Offset des Canvas erneut abrufen.

// Fetch offsetX & offsetY variables that contain the 
// canvas offset versus the window 
// Re-fetch when the window is resized or scrolled 
function reOffset(){ 
    var BB=canvas.getBoundingClientRect(); 
    offsetX=BB.left; 
    offsetY=BB.top;   
} 
var offsetX,offsetY; 
reOffset(); 
window.onscroll=function(e){ reOffset(); } 
window.onresize=function(e){ reOffset(); } 

Hier ist, wie die Offsets verwenden richtigen Mauskoordinaten in einem Event-Handler zu berechnen:

function handleMouseDown(e){ 

    // tell the browser we're handling this event 
    e.preventDefault(); 
    e.stopPropagation(); 

    // calculate the mouse position 
    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 

    // your stuff 
} 

Answer 2

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
    x: evt.clientX, 
    y: evt.clientY 
    }; 
} 

Ist genug zu arbeiten. Dein Bild ist 350px groß, nicht 300px.