通过手绘选择SVG元素

Question

我正在开发一个项目，希望能够在一些SVG元素周围绘制线条，以选择区域内的对象。这是目前的截图，我用Paint添加了线条，以便清楚地表达我的意图。我想选择绘制圆圈内的两个rect。

我看到有几个步骤需要解决：

1. 在 mousedown 时创建一个 path 元素，并记录鼠标移动，直到 mouseup
2. 如果用户没有画圆，则关闭 path
3. 查找完全或部分位于圆内的 svg 元素

您看到了哪些方法？您有什么建议如何处理？

我正在使用 D3.js。这个 幻灯片（由 D3 的创建者 Mike Bostock 制作）可能会很有趣。

- swenedo

Answer 1

我会按照以下步骤进行：

1. 获取手绘图形的aabb（或最小/最大框）
2. 查找所有aabb与自由形状重叠的元素，并将其保存在列表中。
3. 获取手绘图形的凸包，
4. 测试列表中每个或一些元素的顶点是否位于凸包内。

根据您测试所有顶点是否位于凸包内或部分顶点是否位于凸包内，您可以确定该元素是完全位于自由手绘图形内还是仅重叠于该图形。

不幸的是，我不太熟悉d3.js，但猜测它提供了获得凸包、aabbs和测试点是否位于多边形内的方法。可能它甚至提供了能够进行aabbs查询以查找第二步中重叠的aabbs的能力。

祝你好运...

- philipp

---

是的，这样应该可以。您可能会发现这里的答案有用：https://dev59.com/VGLVa4cB1Zd3GeqPvl6k - Erik Dahlström

+1，因为让我了解了凸包的概念。然后就开始了两个小时的非工作相关维基百科浏览... - El Ronnoco

谢谢@philipp。我对aabb的概念不熟悉，所以我会去了解一下。听起来是一个不错的方法。 - swenedo