0

我有一个 HTML5 画布。我已经绘制了 100 多个动态多边形。这些多边形是路径的集合(beginPath、moveto、lineTo、...、closePath)。

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

我已经绘制了多边形,一切都很好。我现在希望将鼠标悬停在多边形上时显示一些属性。

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

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

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

谢谢

4

2 回答 2

0

我会提前承认我的偏见,因为我写了它,但是您可以使用alphapun.ch使用实际元素来绘制多边形,而不是(或除了)画布。这样您就可以正确检测事件。

于 2012-05-09T01:10:23.533 回答
0

通常的技术是两遍:

对于数组中的每个多边形:

  • 将“边界矩形”与每个多边形信息一起保存,并测试鼠标光标是否在该矩形内
  • 如果第一个测试是肯定的,则应用“多边形内的点”算法,该算法成本更高。

这是该算法的一个示例:

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;
}
于 2012-05-09T01:11:31.993 回答