使所有元素接触一个矩形

Get all Elements touching a rectangle

本文关键字：一个元素接触更新时间：2023-09-26

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

在矩形中的每个点上运行它将是一场性能噩梦，因此不是一种选择。即使这是可行的，我也不认为它会捕获width: 0; height: 0的元素，尽管这对我来说不是一个很大的问题。

我有关于如何使用多点方法最大限度地减少假阴性的想法，但有真正的解决方案吗？

如果你有大量的元素，并且你可以假设"元素的子元素的边界矩形总是包含在元素的边界中"，那么有一些优化是可能的。或者当元素以某种方式排序时。但是，如果在CSS允许的情况下，任何HTML元素的任何位置都是可能的，那么您需要检查所有位置。

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