获取所有与矩形相交的元素

Question

我需要获取所有边界矩形与我选择的任意矩形相交的元素。我不知道是否有本地方法可以实现此功能，目前最好的解决方案是在矩形内的代表性点上调用document.elementFromPoint，但这远非完美，因为它可能会错过元素。

对矩形中的每个点进行运行将成为性能噩梦，因此不是选项。即使这是可行的，我认为它也无法捕获具有width: 0; height: 0的元素，尽管这对我来说不是一个巨大的问题。

我有一些想法，可以使用多点方法来最小化误报，但是否有一个真正的解决方案？

- Quinn Strahl

---

矩形能旋转吗？ - Shomz

你可以从这个fiddle中获取一些想法。 - Teemu

@Shomz 我正在检查的矩形？为简单起见，我们假设所有边都与视口的相应边平行。 - Quinn Strahl

你找到了合适的解决方案吗？ - Liu CZ

Answer 1

1. 获取可能触碰到矩形的每个元素的边界矩形。
2. 对于每个元素，检查边界矩形和你的矩形是否相交。

如果你有大量的元素，并且你可以做出假设，例如“一个元素的子元素的边界矩形总是包含在该元素的边界矩形中”，那么有一些优化是可能的。或者当元素按某种方式排序时。但是如果任何HTML元素的位置都是可能的，正如CSS所允许的那样，那么你需要检查它们所有。

- Tim Jansen

---

很遗憾，这样做速度不够快；该算法必须适用于非常大的文档。 - Quinn Strahl

@QuinnStrahl 你能假设一个元素的子元素边界在元素边界内吗？你有一个元素树还是一个具有许多相同级别元素的平面结构？或者它们以某种方式排序了吗？ 恐怕没有本地解决方案，但肯定有优化过程的方法。 - Tim Jansen

问题域是任意的DOM树，因此我不能假设子元素的边界在父元素内部。因此，它也可能是几乎任何大小和结构的树。噢，好吧。 - Quinn Strahl

我明白了。它有多频繁更改？更改次数有限吗？那么您可以对边界矩形进行排序或结构化，并重复使用它们。 - Tim Jansen

它可能永远不会改变，也可能在随机的间隔中永远改变，以及两者之间的一切。 - Quinn Strahl

Answer 2

如果它们是平行的，那么对于每个矩形只需定义四个参数：x、y、宽度和高度。现在比较它们的性能消耗要大大减少，而不是使用单个点，并且您总是会得到准确的结果。

- Shomz

---

这需要遍历文档中的每个元素，对吗？如果没有本地实现，我担心这样做速度不够快。 - Quinn Strahl

是的，它遍历了每个元素。嗯，我不确定您的具体实现方式，但有一个优化想法：如果可以的话，您可以在文档加载时构建一个矩形数组（每个矩形都是一个包含我在答案中提到的4个参数的数组...还有，为什么不用对象？因为数组更快），并且在每次项目位置更改时（如果可能的话）。所以现在，您不再需要遍历许多DOM元素，而是遍历一个数组，在JavaScript中可能是最快的，并且很容易进行测试。 - Shomz

不幸的是，我不能依赖MutationObserver或DOM变异事件，因为这段代码将在旧的、糟糕的浏览器中本地运行。 - Quinn Strahl