javascript - 窗口大小调整时如何计算图像的X Y坐标？

Question

我正在编写一段代码，用于将小图像放在 HTML Canvas 上。还生成该图像上的单击事件。图像有高度(50)，宽度(50)，X-Y坐标(250, 150)， Canvas 也有高度(480)，宽度(720)。
因此，当我单击图像时，会收到警报(“您单击了图像”)。但是，当我将窗口大小调整到较小时，也会在错误的位置生成警报，然后也会在错误的位置生成警报消息。

我想仅在单击图像时生成警报消息。如果我调整窗口大小(小)，那么仅在单击图像时也应该生成警报消息。
检查 fiddle -
[在此处输入链接描述][1]

  [1]: https://jsfiddle.net/u84p9qn1/

Answer 1

当 Canvas 元素和 Canvas 位图大小不同时，您需要使用一个因子来缩放鼠标位置以适应位图中的相对位置。这可以通过将位图大小除以元素大小来完成。

<强> Modified fiddle

$("#myCanvas").click(function (event) {

    // get size of element and divide bitmap size on it
    var rect = this.getBoundingClientRect();
    var scaleX = this.width  / rect.width;
    var scaleY = this.height / rect.height;

    // scale position: (first adjust, then scale)
    var mouseX = Math.round((event.clientX - rect.left) * scaleX);
    var mouseY = Math.round((event.clientY - rect.top ) * scaleY);

    var x = 250;
    var y = 150;
    var w = 50;
    var h = 50;

    if (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h) {
        alert("You clicked on image");
    }
}