SVG路径命中测试



我在检测SVG路径元素上的鼠标悬停事件时遇到问题。路径元素的strokeWidth似乎越小,我检测鼠标悬停的成功率就越低。

此外,我正在使用jquery svg插件来绘制。

下面是在path元素上使用jquery mouseover事件进行检测的过程。鼠标指针

下面是通过将mousemove侦听器附加到svg,然后使用document.getElementFromPoint来进行检测的过程。getElementFromPoint Fiddle

这两种方法似乎都不可靠,尤其是当鼠标移动得很快时。有没有可能使这两种方法中的任何一种更敏感,以更好地检测鼠标?或者也许是更好的方法?

浏览器的工作方式不是连续获得mouseover事件,而是每次操作系统更新光标位置时都会获得一个事件。如果鼠标移动得很快,你会得到一个相隔几个像素的事件。鼠标不会在文档上滑动,而是跳跃。下面是一个显示每个事件发生位置的jsfiddle。您无法为光标的两个连续位置之间的所有元素获取mouseover事件。

您可以做一些不同的事情:记住mousemove事件的上一个位置,计算该点与当前鼠标位置之间的线,并计算该线与文档中所有其他形状之间的所有交点。但这将是资源密集型的,因为没有API可供使用,你必须自己计算交集。有一个图书馆可以帮助你。

相关内容

  • 没有找到相关文章

最新更新