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

【问题标题】：How to calculate X Y coordinates of image when window resize?调整窗口大小时如何计算图像的 X Y 坐标？
【发布时间】：2015-06-19 06:33:43
【问题描述】：

我正在编写将小图像放在 HTML 画布上的代码。还在该图像上生成点击事件。图片有高度(50)、宽度(50)、X-Y坐标(250, 150)，画布也有高度(480)、宽度(720)。
所以当我点击图片然后收到警报（“你点击了图片”）。但是当我将窗口大小调整为小时也会在错误的位置生成警报，然后还会在错误的位置生成警报消息。

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

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

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

【讨论】：