通过在它们周围进行自由绘图来选择SVG元素

Question

我正在开展一个项目，我想围绕一些SVG元素绘制一条线，以便选择区域内的对象。

以下是我现在所拥有的截图。我已经使用Paint来添加线条，以便清楚地表明我想要实现的目标。我想在绘制的圆圈中选择两个rect。

Screenshot http://s23.postimage.org/y6t5t9be3/Screen_Shot_2013_02_26_at_15_31_26.png

我看到了许多必须解决的步骤：

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

您认为哪种方法，并且您对如何进行该方法有任何建议吗？

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

Answer 1

我会采取以下步骤：

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

根据您是否测试所有顶点位于凸包内，您可以确定该元素是完全位于徒手画图内还是仅重叠在其中。

不幸的是我并不熟悉d3.js，但只是猜测它提供了获取凸包，aabbs和测试点在多边形内的方法。可能它甚至可以让你在第2步中进行aabb查询以找到重叠的aabb。

祝你好运......