覆蓋

Question

的HTML5多邊形鼠標

我有一個HTML5畫布。我畫了100多個動態多邊形。這些多邊形是路徑（beginPath，moveto，lineTo，...，closePath）的集合。

每個多邊形都存儲在一個數組中。我在每個元素中存儲cocordinates和一些屬性信息。

我畫了多邊形，一切都很好。當我將鼠標懸停在多邊形上時，現在想要將鼠標懸停在顯示某些屬性上。

現在我知道我不能將任何事件附加到任何多邊形對象，因爲它們不是真正的對象。

什麼是最流行/最快速的方式來檢查我徘徊在哪個多邊形。

注：我想使用純HTML5，沒有kinetic或任何其他庫。

感謝

Answer 1

我會承認我的偏見前期，因爲我寫的，但你可以使用alphapun.ch繪製的，而不是（或除了）在畫布上用實際元素的多邊形。這樣你可以正確地檢測事件。

Answer 2

通常的技術是兩通：

爲您的陣列中的每個多邊形：

• 保存「邊界矩形」與每個多邊形信息沿，和測試，如果鼠標光標是矩形內
• 如果第一次測試是肯定的，則應用「點內多邊形」算法，這種算法成本更高。

這裏是算法的一個例子：

function isPointInPoly(poly, pt){ 
    for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) 
    ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) 
    && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y)/(poly[j].y - poly[i].y) + poly[i].x) 
    && (c = !c); 
    return c; 
}