当用户将鼠标光标移动到 svg 路径的笔划附近时,我想在最接近当前鼠标点的点的笔划上显示一个圆圈。我想到的唯一解决方案是手动解析 SVG 数据并找到最近的点,检查路径的所有段。这项工作的实施非常复杂,而且可能太慢。我可以在当前笔划的顶部绘制宽度较大的透明笔划,并使用 SVG 命中测试功能来检测该点是否接近笔划,但有什么方法可以确定笔划的相应“中心”点?
有趣,但这里要解决的问题太复杂了。您可能需要自己进行一些计算。您可能会发现方法getPointAtLength很有用。如果您习惯使用 D3 等库,您也可以在那里找到一些帮助功能。我认为解决这个问题的好方法是分割路径并使用 Voronoi 曲面细分。您可以在这里找到代码和演示:
https://bl.ocks.org/mbostock/8027835