Question

我正在开发一个画布项目，其中包含一些画布上某些位图图像的拖放功能。在调整画布大小后，我无法选择图像。

当画布处于默认尺寸时，我得到的效果非常好。

我将所有图形绘制到画布上，然后将该图像绘制到另一个画布并显示它。

所以我希望能够在画布上“选择”一个图像。

显然，我是通过比较鼠标坐标和对象的坐标来做到这一点的。

   mouseX = mouse.x - window.offsetLeft; //I'm accounting for the offset

然后我将鼠标坐标乘以（theVisibleCanvas.width / originalCanvas.width）以考虑画布的缩放。

这一切都适用于窗口最大化时（默认尺寸）但是一旦我调整窗口大小，坐标开始越来越远。

任何人都可以指出与画布大小调整相关的翻译鼠标坐标所涉及的任何步骤吗？

Answer 1

你提供的那条线与画布几乎没有关系，因为它使用了窗口的偏移而不是画布的偏移。

要将鼠标的坐标调整为画布，您可以使用以下内容：

function getXY(canvas, event){

    var rect = canvas.getBoundingClientRect(), /// get absolute rect. of canvas
        x = event.clientX - rect.left,         /// adjust for x
        y = event.clientY - rect.top;          /// adjust for y

    return {x:x, y:y};                         /// return object
}

现在你可以这样称呼：

var pos = getXY(myCanvasElement, theEvent);
console.log(pos.x, pos.y);   /// use the pos object for something

当然，myCanvasElement是对实际画布元素的引用，并且是回调提供的theEvent。

画布 - 在窗口调整大小时转换鼠标坐标

1 个答案: