覆盖

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; 
}