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

Question

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

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

截图http://s23.postimage.org/y6t5t9be3/Screen_Shot_2013_02_26_at_15_31_26.png

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

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

你看到哪种方法,你对如何去做有什么建议吗？

我使用D3.js.这张幻灯片(作者D3的创建者Mike Bostock)可能会很有趣.

Answer 1

我会执行以下步骤：

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

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

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

祝你好运...