Question

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

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

Answer 1

如果将它们存储为哈希表，那将是一个

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和https://github.com/mikechambers/ExamplesByMesh/tree/master/JavaScript/QuadTree

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

2 个答案: