點在多邊形錯誤檢測

源於此：How to tackle diagonally stacked, rounded image background element hovers?點在多邊形錯誤檢測

我做圖像映射區域並進行改造我的情況，但是，現在有一個在多邊形點問題命中檢測。

似乎只有右下象限總是正確的，但是，只有在環外觀察時 - 檢測內部可能仍然不正確。環外的其他象限偶爾會報告一個應該是錯誤的正面命中。

小提琴：http://jsfiddle.net/psycketom/9J4dx/1/

紅色線由這是一個從數據映射生成的多邊形繪製。

藍線表示我們當前正在檢查的多邊形。

多邊形功能點來自：https://github.com/substack/point-in-polygon

var pointInPolygon = function(point, vs) 
{ 
    // ray-casting algorithm based on 
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html 

    var x = point[0], y = point[1]; 

    var inside = false; 
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) { 
     var xi = vs[i][0], yi = vs[i][1]; 
     var xj = vs[j][0], yj = vs[j][1]; 

     var intersect = ((yi > y) != (yj > y)) 
      && (x < (xj - xi) * (y - yi)/(yj - yi) + xi); 
     if (intersect) inside = !inside; 
    } 

    return inside; 
};

我似乎無法理解這裏的問題。

來源

2013-12-18 jolt

你mapToPolygon功能不從字符串轉換解析點數量。因此，pointInPolygon函數結束比較座標的字符串，而不是實際的座標。在小提琴的第31行使用parseInt可以解決問題。

來源

2013-12-18 18:06:19 MischaNix

......有時候我真的討厭弱類型的語言。謝謝你的收穫！ – jolt

創建一個離屏畫布並使用上下文的.isPointInPath（x，y）函數。因爲你有最小的最後一個，最小的將是最高的水平/最大的z-索引。你可以在你的例子中循環遍歷所有的多邊形。

當你得到一個命中（isPointInPath返回true）停止。

喜歡的東西...

var offcanvas = document.createElement("canvas"); 
... 
var x = e.pageX - $ages.offset().left; 
var y = e.pageY - $ages.offset().top; 
revlayers.each(function() { 
    var $elm = $(this); 
    var poly = $elm.data("polygon"); 
    var ctx = offcanvas.getContext("2d"); 
    if(poly.length > 0) { 
     ctx.beginPath(); 
     ctx.moveTo(poly[0][0], poly[0][1]); 
     for(var i=1; i<poly.length; i++) { 
      ctx.lineTo(poly[i][0], poly[i][1]); 
     } 
     if(ctx.isPointInPath(x, y)) { 
      hit.text($elm.attr("href")); 
      return false; // end the .each() loop 
     } 
    } 
})

來源

2013-12-18 18:05:17

另一個問題有「兼容回IE7」的說明，這不會使它成爲現實。 – jolt

點在多邊形錯誤檢測

回答

相關問題