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

How to calculate X Y coordinates of image when window resize?

本文关键字：图像 坐标 计算 窗口 小时 何计算 调整      更新时间：2023-09-26

我正在编写一个代码，用于将小图像放在HTML画布上。同时在该图像上生成点击事件。图像有高度（50），宽度（50），X-Y坐标（250,150），画布也有高度（480），宽度（720）。
因此，当我单击图像时，会收到警报（"您单击了图像"）。但是当我将窗口大小调整为小时，也会在错误的地方生成警报，然后在错误的地方生成警报消息。

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

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

当画布元素和画布位图具有不同的大小时，需要使用因子来缩放鼠标位置以适合位图中的相对位置。这可以通过将位图大小除以元素大小来完成。

改良小提琴 

$("#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");
    }
}
相关文章：