HTML5多边形鼠标悬停
我有一个HTML5画布。我已经画了100多个动态多边形。这些多边形是路径的集合(beginPath、moveto、lineTo、…、closePath) 每个多边形都存储在一个数组中。我在每个元素中存储坐标和一些属性信息 我画了多边形,一切都很好。现在我想让鼠标悬停在多边形上时显示一些属性 现在我知道我不能将事件附加到任何多边形对象,因为它们不是真正的对象 检查我悬停在哪个多边形上最流行/最快的方法是什么 注意:我想使用纯HTML5,没有动能或任何其他LIBHTML5多边形鼠标悬停,html,mouse,polygons,Html,Mouse,Polygons,我有一个HTML5画布。我已经画了100多个动态多边形。这些多边形是路径的集合(beginPath、moveto、lineTo、…、closePath) 每个多边形都存储在一个数组中。我在每个元素中存储坐标和一些属性信息 我画了多边形,一切都很好。现在我想让鼠标悬停在多边形上时显示一些属性 现在我知道我不能将事件附加到任何多边形对象,因为它们不是真正的对象 检查我悬停在哪个多边形上最流行/最快的方法是什么 注意:我想使用纯HTML5,没有动能或任何其他LIB 谢谢我承认我的偏见,因为这是我写的,
谢谢我承认我的偏见,因为这是我写的,但是你可以使用实际元素来绘制多边形,而不是(或者除了)画布。这样您就可以正确地检测事件。通常的方法是两次通过: 对于阵列中的每个多边形:
- 将“边界矩形”与每个多边形信息一起保存,并测试鼠标光标是否位于该矩形内
- 如果第一次测试为阳性,则应用“多边形内的点”算法,该算法成本更高
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;
}
函数isPointInPoly(poly,pt){
对于(var c=false,i=-1,l=poly.length,j=l-1;++i