Question

我正在编写一个用于在HTML画布上放置小图像的代码。同时在该图像上生成click事件。图像具有高度（50），宽度（50），X-Y坐标（250,150），并且画布也具有高度（480），宽度（720）。
因此，当我点击图像然后获得警报（＆＃34;您点击图像＆＃34;）。但是当我将窗口调整为较小时，也会在错误的位置生成警报，然后在错误的位置生成警报消息。

我想只在点击图片时生成警报信息。如果我调整窗口（小）的大小，那么也应该仅在单击图像时生成警报消息。
检查小提琴 -
[在此输入链接描述] [1]

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

Answer 1

当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");
    }
}

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

1 个答案: