我正在玩<canvas>
标签,只是遇到了一个问题:
https://jsfiddle.net/awguo/6yLqa5hz/
当我点击画布时,我想得到点的坐标。
我搜索了一段时间,发现了一些函数,但作为一个300x300画布,其右下角的点是(300,150)。不应该是300,300 (因为img是300x300,画布在上面是100% )?
为什么?
我该怎么做才能拿到300x300
发布于 2016-10-05 20:04:37
您必须通过画布元素对窗口的偏移量来调整事件处理程序返回的event.clientX
和event.clientY
坐标。要做到这一点,可以使用canvas.getBoundingClientRect
获取left
& top
画布偏移量。一定要注意resize
& scroll
事件。当这些事件发生时,您必须重新获取画布的当前偏移量。
// 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(); }
下面是如何使用偏移量计算事件处理程序中正确的鼠标坐标:
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
}
发布于 2016-10-05 07:02:50
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX,
y: evt.clientY
};
}
就足够工作了。你的图像是350 is,而不是300 is。
https://stackoverflow.com/questions/39876926
复制