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/你可以将鼠标移到圆圈上，它应该说＆＃34; Over＆＃34;当你处于靠近圆圈周长的门槛之内时。目前似乎没有用。而且我无法确定数学需要检查的内容。

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

，例如Euclidean Geometry，

然后半长轴和半短轴将由旋转角度确定。如果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。

希望有所帮助！

检测鼠标靠近圆边

1 个答案: