检测鼠标在圆周边缘附近

Question

我有一个函数，它得到鼠标在世界空间中的位置，然后检查鼠标是否超过或接近圆圈的线。

增加的复杂性我看不出得到的代码，以检测鼠标在圆的边界附近，我不知道我是在哪里出错。

这是我的密码：

function check(evt){
    var x = (evt.offsetX - element.width/2)  + camera.x; // world space
    var y = (evt.offsetY - element.height/2) + camera.y; // world space

    var threshold = 20/scale; //margin to edge of circle

    for(var i = 0; i < obj.length;i++){
       // var mainAngle is related to the transform
       var x1 = Math.pow((x - obj[i].originX), 2) / Math.pow((obj[i].radius + threshold) * 1,2);
       var y1 = Math.pow((y - obj[i].originY),2) / Math.pow((obj[i].radius + threshold) * mainAngle,2);
       var x0 = Math.pow((x - obj[i].originX),2) / Math.pow((obj[i].radius - threshold) * 1, 2);
       var y0 = Math.pow((y - obj[i].originY),2) / Math.pow((obj[i].radius - threshold) * mainAngle, 2);               

        if(x1 + y1 <= 1 && x0 + y0 >= 1){
            output.innerHTML += '<br/>Over';
            return false;
        }
    }
    output.innerHTML += '<br/>out';
}

为了更好地理解它，我这里有一个小提琴：http://jsfiddle.net/nczbmbxm/你可以把鼠标移动到圆圈上，当你在接近圆周的极限时，它应该说“完毕”。目前，它似乎不起作用。我想不出这个数学需要检查什么。

Answer 1

第34行有一个带有orignX的错误

   var x1 = Math.pow((x - obj[i].orignX), 2) / Math.pow((obj[i].radius + threshold) * 1,2);

应该是

   var x1 = Math.pow((x - obj[i].originX), 2) / Math.pow((obj[i].radius + threshold) * 1,2);

现在你可以走了！

编辑:关于图像的缩放和圆的进一步旋转，我会为x轴和y轴的旋转设置变量，例如

var xAngle;
var yAngle;

然后，作为椭圆可以写成表格。

x^2 / a^2 + y^2 / b^2 = 1

比如在欧几里德几何，

然后，半长和半短轴将由旋转角度决定。如果radius是圆的实际半径。然后

var semiMajor = radius * cos( xAngle );
var semiMinor = radius;

或

var semiMajor = radius;
var semiMinor = radius * cos( yAngle );

如果你想要一个x和y角度的话，你还需要做更多的转换。

因此，如果(xMouseC, yMouseC)是相对于圆心的鼠标坐标，则只需检查该点是否满足一定公差范围内的椭圆方程，即插入。

a = semiMajor;
b = semiMinor;
x = xMouseC;
y = yMouseC;

看看它是否足够接近1。

希望这能帮上忙！