javascript - 缩放 Canvas 后如何保持准确的矩形悬停检测？

Question

我正在编写一个应用程序，它使用 fillRect 函数在 HTML Canvas 上绘制矩形。我目前跟踪鼠标的移动并检测鼠标指针何时悬停在矩形上以突出显示它:

这就是我目前检测碰撞的方式，效果很好。

//boxes2 is my array of rectangles
var l = boxes2.length;

    for (var i = l - 1; i >= 0; i--) {

        if (mouseX >= boxes2[i].x  && mouseX <= (boxes2[i].x  + boxes2[i].w ) &&
            mouseY >= boxes2[i].y  && mouseY <= (boxes2[i].y  + boxes2[i].h )) {

            selectedBoxNum = i;

        }

    }

我的问题是这种悬停检测在放大/缩小后不再有效，因为矩形的实际边界与其在我的矩形数组中的值不同步。

var currentZoomValue = 1;
function myOnMouseWheel(event) {

    event.preventDefault();

    // Normalize wheel to +1 or -1.
    var wheel = event.wheelDelta / 120;

    if (wheel == 1) {
        zoom = 1.1;
    }
    else {
        zoom = .9;
    }

    currentZoomValue = currentZoomValue * zoom
    canvas.style.transform = "scale(" + currentZoomValue + ")";

}

我尝试过的:

在放大/缩小时缩放数组中的值，以便矩形边界保持同步

这对我不起作用，因为缩放功能正在拉伸(stretch)我的 Canvas 以使矩形看起来更大。如果我实际上也将它们变大，它们将放大一倍并超过我的 Canvas 背景的缩放。

根据我当前的缩放级别补偿我的悬停检测

我试过类似的东西:

if (mouseX >= boxes2[i].x  && mouseX <= (boxes2[i].x  + (boxes2[i].w * currentZoomValue) ) && 
mouseY >= boxes2[i].y  && mouseY <= (boxes2[i].y  + (boxes2[i].h * currentZoomValue) )) {

        selectedBoxNum = i;

    }

我在这方面的尝试没有奏效，因为虽然矩形的高度和宽度确实以一种易于预测的方式缩放，但 x、y 坐标却没有。放大时，矩形将从中心向外辐射，因此一些矩形会根据其位置获得 x 值，而其他矩形会失去 x 值。我还考虑过保留第二个矩形数组，我可以将其仅用于悬停检测，但出于这个原因决定不这样做。

一个好的解决方案是实际缩放矩形的大小以产生缩放的错觉，但矩形在背景图像上的位置很重要，并且此技术不会影响背景。

Answer 1

因为有no standard way of knowing page zoom level ，我建议使用 绝对定位的 div 捕捉点击事件。

您可以使用 getBoundingClientRect() 获取 Canvas 元素的偏移量方法。

然后，代码看起来像这样:

boxes2.forEach(function(box, i) {

    cx.fillRect(box.x, box.y, box.w, box.h);

    /* We create an empty div */
    var div = document.createElement("div");
    /* We get the position of the canvas */
    var rect = canvas.getBoundingClientRect();

    div.style.position = "absolute";
    div.style.left = (rect.left + box.x) + "px"; //Don't forget the pixels!!!
    div.style.top = (rect.top + box.y) + "px";
    div.style.width = box.w + "px";
    div.style.height = box.h + "px";

    /* For demonstration purposes we display a border */
    div.style.border = "1px dashed black"

    div.onclick = function() {/* Your event handler */}

    document.body.appendChild(div);

});

---

这是一个 live demonstration .至少在我的浏览器中，即使我放大和缩小页面，区域也保持一致。