在HTML5画布上定位数学问题

Question

我的代码中设置了一个正方形和相机位置的画布，可让我滚动并放大。

但是当我试图检测鼠标何时位于该位置的正方形时，我的逻辑似乎有些偏差。

正方形位于0,0，正方形中的白点代表它的位置。

如果刻度或相机位置不变，鼠标的检测工作正常，但一旦任何一个被改变，我的功能将元素上的鼠标位置转换为世界位置会导致问题。

我的功能如下：

function check(evt,el){
    var x = evt.offsetX;
    var y = evt.offsetY;
    output.innerHTML = 'Scale: '+scale;
    output.innerHTML += '<br/>Screen Space x: '+x+', y: '+y;

        x += camera.x;
        x -= element.width/2

        y += camera.y;
        y -= element.height/2;

    output.innerHTML += '<br/>Camera Position: '+camera.x+', y: '+camera.y;
    output.innerHTML += '<br/>World Space x: '+x+', y: '+y;
        var radius = 20 * scale;
        for(var i = 0; i < obj.length;i++){
            if(x > obj[i].x-radius 
            && x < obj[i].x+radius 
            && y > obj[i].y-radius 
            && y < obj[i].y+radius){
                output.innerHTML += '<br/>In';
                return false;
            }
        }
    output.innerHTML += '<br/>out';
}

我还设法在jsFiddle中重现了这个问题 http://jsfiddle.net/4n7LLasz/ 。

重现问题：

使用鼠标滚轮放大或缩小，单击并将方块拖动到偏离中心的位置。然后将鼠标移到红色方块上，当鼠标悬停在方块上时应该显示in，否则它会显示out。

但是目前这项检查的准确性是不正确的，我无法弄清楚我的check函数的数学出错了（第17行）。

您也可以在此处查看问题，请注意图片底部的输入/输出：

我希望有人可以帮助发现我的错误，这样我终于可以开始工作！

谢谢！

Answer 1

您检查进出的条件是小马车。它与原始方形平移和半径大小不匹配。因此更改radius = 10 * scale因为您的方块大小为20 * 20，因此半径为10，如果条件为前两行检查，则更改为此x > obj[i].x-10 && x < obj[i].x+radius+50这将解决问题。

让我解释一下，

1. 首先移动鼠标，直到状态更改为out至in。
2. 您会发现它过早in有些情况，有些情况下仍然在红色方块内，并显示out。
3. 只需跟踪in和out即可。
4. 您会发现由if logic
创建的隐藏 SQUARE
5. 只需测量该方块的尺寸，您会发现它太大而且左侧是原始的红色正方形。

所以我所做的是进行一些更改，使其与原始方块匹配。

我将半径= 20 *比例改为10 *比例，因为与真实比例相比，这个看不见的正方形太大了两倍。

最后一次更改是您第一次创建 RED Square 时所做的翻译。 x > obj[i].x-10这会将假想的平方转换为小右边，并将{50}添加到obj[i].x+radius+50以保持原来的方形大小，我通过将-10改为而不是缩放来改变。