HTML5多边形鼠标悬停

Question

我有一个HTML5画布。我绘制了100多个动态多边形。这些多边形是路径的集合（beginPath，moveto，lineTo，...，closePath）。

每个多边形都存储在一个数组中。我在每个元素中存储了cocordinates和一些属性信息。

我绘制了多边形，一切都很好。当我将鼠标悬停在多边形上时，我现在想要鼠标悬停以显示一些属性。

现在我知道我不能将事件附加到任何多边形对象，因为它们不是真正的对象。

检查我悬停在哪个多边形上最流行/最快捷的方法是什么。

注意：我想使用纯HTML5，没有动力学或任何其他库。

由于

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