在SVG路径中，找到距离当前鼠标点最近的点的有效方法是什么？

Question

在SVG路径中，找到距离当前鼠标点最近的点的有效方法是什么？

4

当用户将鼠标光标移动到svg路径的笔画附近时，我想在最靠近当前鼠标点的笔画上显示一个圆圈。唯一能想到的解决方案是手动解析SVG数据并查找所有路径线段以找到最接近当前鼠标点的点。这种实现方法相当复杂，可能会过慢。我可以在当前路径的顶部绘制透明笔画，宽度更大，并使用SVG命中测试功能检测该点是否靠近笔画，但是否有任何方法确定笔画对应的“中心”点？

- Aleksey

你能分享一些代码和示例吗？展示一下你尝试过的东西。 - Sumeet Kumar Yadav

我没有任何代码可以分享，因为我不知道如何实现这个想法。目前我唯一可靠的解决方案是手动解析路径数据并逐个检查所有段，但我希望避免实现这个方法。我正在寻找替代方案，也许利用一些我不知道的DOM API或一些技巧可能会有所帮助。 - Alex

你的路径是哪种类型？它全是直线还是有曲线？ - Luka

我正在寻找一般解决方案 - 任何由“path”元素支持的内容。 - Alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luka · Accepted Answer

有趣但涉及的问题无法在此解决。你可能需要自己进行一些计算。你可能会发现方法getPointAtLength 很有用。如果你习惯于使用像D3这样的库，那么你也可以在其中找到一些帮助函数。我认为解决此问题的非常好的方法是对路径进行分段并使用 Voronoi图剖分。你可以在这里找到代码和演示：https://bl.ocks.org/mbostock/8027835。