Javascript 在HTML5画布上定位数学问题

我有一个正方形的画布，在我的代码中设置了一个摄像头位置，允许我滚动和放大

但我的逻辑似乎有点不正确，当我试图检测鼠标何时在该位置的正方形上方时

正方形的位置为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';
}

功能检查（evt、el）{
var x=evt.offsetX；
变量y=evt.offsetY；
output.innerHTML='Scale:'+Scale；
output.innerHTML+='
屏幕空间x:'+x+'，y:'+y；
x+=摄像机x；
x-=元素宽度/2
y+=摄像机y；
y-=元素高度/2；
output.innerHTML+='
摄像机位置：'+Camera.x+'，y:'+Camera.y；
output.innerHTML+='
世界空间x:'+x+'，y:'+y；
var半径=20*刻度；
对于（变量i=0；iobj[i].x-半径
&&xobj[i].y半径
&&y

我还设法在jsFiddle中重现了这个问题

重现问题：

使用鼠标滚轮放大或缩小，单击并将正方形拖动到偏离中心的位置。然后将鼠标移到红方块上，当鼠标移到方块上时，它应该说

in

，否则它会说

out

但目前该检查的准确性不正确，我无法找出我的

check

函数（第17行）的数学错误在哪里

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

我希望有人能帮我发现我的错误，这样我才能最终使这项工作成功

---

谢谢

您要检查的进出状况是小问题。它与原始的方形平移和半径大小不匹配。所以更改

radius=10*比例

，因为您的正方形大小是20*20，所以半径将是10，在检查if条件的前两行中，更改为这个

x>obj[i]。x-10&&x

这将解决问题

让我解释一下

首先移动鼠标，直到状态变为

out

到

in

在某些情况下，你会发现现在还为时过早，在某些情况下，你仍然在红场内，它显示出

out

只需将

输入

和

输出

您将找到由

if逻辑创建的不可见的正方形

只要测量一下那个正方形的尺寸，你们就会发现它太大了，比原来的红方块偏左 所以我所做的是做一些修改，使它与原始方块匹配

我将radius=20*比例改为10*比例，因为那个不可见的正方形太大了，大约是真实正方形的两倍

---

最后一个变化是关于您第一次创建红场时所做的翻译

x>obj[i].x-10

这将想象中的正方形向右平移，并将50添加到

obj[i].x+radius+50

以保持正方形的原始大小，我用-10代替了比例来改变正方形。

在mac上的Chrome 48中对我来说似乎工作正常…使用轨迹板来改变比例，给周围的正方形下药，在适当的时候仍然会说“输入”和“输出”。你是在用javascript制作游戏吗？@JaredSmith nope-在最新的Chrome上不为我工作。怀疑浏览器是否会对javascript数学相关问题产生影响。或者操作系统。是的，我显然不够彻底，我现在得到了错误。@JaredSmith很公平。谢谢你的解释：）