如何存储 AABB 以快速找到路口？

Question

我正在创建一个 Web 应用程序，它将显示 1000 个微小的 svg 图形。每个 svg 都可以由轴对齐边界框 (AABB) 表示，以便于选择。我想允许用户通过创建一个 selection 框（也是一个 Aabb）来拖动 select 多个 svg。我应该如何存储所有 svg AABB，以便我可以快速找到哪些 svg AABB 与用户相交 selection aabb?

如果我将所有 svg AABB 存储在一个列表中，那么我将不得不遍历整个列表，检查每个列表是否与 selection aabb 相交。这似乎很慢。必须有更好的方法在空间上存储 svg AABB，这样我只需要测试几个 aabb 交叉点就可以找到我需要的所有交叉点。

Answer 1

如果将它们存储为散列 table 会怎么样，一个例子是

const elements = {
             ID_1: elementWithId_1,
             ID_2: elementWithId_2,
             ID_3: elementWithId_3,
             // and so on ....
           }

elements 对象中的每个元素都代表您的 SVG 项目，因此当您与元素相交时，您可以这样选择，

if(elementA.intersects(elementB)) {
  const elementIntersected = elements[elementA.id];
   // now you Can handle your intersected element 
}

希望对您有所帮助

Answer 2

根据其他人的建议进行了一些搜索后，我找到了我需要的东西：https://github.com/d3/d3-quadtree and https://github.com/mikechambers/ExamplesByMesh/tree/master/JavaScript/QuadTree

如何存储 AABB 以快速找到路口？

How to store AABB's to quickly find intersections?

javascript

svg

intersection

spatial