檢測鼠標在圓邊附近

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/您可以將鼠標移到圓圈上，當您位於圓圈周圍附近時，它應該顯示“ Over”。 目前，它似乎不起作用。 我無法解決需要對此進行數學檢查的問題。

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 。

希望有幫助！