javascript - 通过在它们周围进行手绘来选择 SVG 元素

Question

我正在做一个项目，我想在一些 SVG 元素周围画一条线，以便选择该区域内的对象。

这是我现在拥有的屏幕截图。我使用 Paint 来添加线条，以便完全清楚我想要实现的目标。我想rect在绘制的圆圈内选择两个。

我看到一些必须解决的步骤：

1. 在处创建一个path元素mousedown并记录鼠标移动，直到mouseup
2. 关闭path, 以防用户没有画圆
3. 查找完全或部分在圆圈内的 svg 元素

你看到了哪些方法，你对如何去做有什么建议吗？

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

Answer 1

我会执行以下步骤：

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

根据您是否测试所有顶点都位于凸包内，您可以确定元素是完全位于手绘图内还是仅与它重叠。

不幸的是，我对 d3.js 不太熟悉，但只是猜测它提供了获取凸包、aabbs 和测试点以位于多边形内的方法。可能它甚至为您提供了在步骤 2 中进行 aabb 查询以查找重叠 aabb 的能力。

祝你好运...