JS - 找出隐藏的DOM元素的可见百分比

Question

编辑以下HTML和CSS只是一个示例,真正的用例涉及复杂的DOM,并且应该足够通用以在不同的网页上工作.唯一有效的假设是所有元素都是矩形的.

---

鉴于以下内容:

HTML

<div class="a" id="a">
A
</div>
<div class="b">
B
</div>
<div class="c">
  C
  <div class="d">
  D
  </div>
</div>

CSS

.a,.b,.c,.d{
  border: solid 1px black;
  opacity: 0.5;
  font-family: arial;
  position: absolute;
  font-size: 20px;
}

.a{
  width:300px;
  height:250px;
  top:30px;
  left:20px;
  background:green;
}

.b{
  width:300px;
  height:145px;
  top:10px;
  left:20px;
  background:blue;
}
.c{
  width:150px;
  height:300px;
  top:30px;
  left:60px;
  background:red;
}
.d{
  margin:10px;
  background:yellow;
  width:100px;
  height:200px
}

产生以下结果:

---

我试图检测未被其他元素遮挡的"A"DIV的百分比,IE:给定示例中的25%.

我写了下面的JS(小提琴),它扫描"A"DIV的矩形区域并收集模糊元素.

let el = document.getElementById("a");
let rect = el.getBoundingClientRect();
let right = rect.x + rect.width;
let bottom = rect.y + rect.height;
let elements = [];
for (let i = rect.x; i < right; i += 10) {
  for (let j = rect.y; j < bottom; j += 10) {
    let sampled = document.elementFromPoint(i, j);
    if (sampled && sampled !== el && elements.indexOf(sampled) === -1) {
      elements.push(sampled);
    }
  }
}

现在我正在努力寻找最有效的计算方法.我尝试了另一种逐像素扫描矩形的方法,并计算了不属于主DIV的所有像素,但这种方法对于公认的解决方案来说似乎很慢.

任何帮助,将不胜感激.

更新
在做了一些研究后,我开始认为我需要扫描线算法,仍然不能确定如何修改代码以适应我的问题.

更新2
使用时pointer-events: none;,该document.elementFromPoint方法将无法正常工作,因此我正在寻找更好的解决方案.

Answer 1

我想我会尝试不同的方法。

假设：

1. 假设所有元素都是矩形
2. 假设所有元素都z-index高于A

我会：

1. 获取上下文元素矩形（即，作为以下元素的第一个父元素的 DOM 元素：Aelement 以及所有可能模糊的元素A）
2. 列出所有可能掩盖 A 的子项（因此，除了 之外的所有子项A）
3. 获取它们每个的边界矩形
4. z-index对高于元素的元素进行排序A：上、右、下、左坐标
5. 一旦你有了顶部，右侧，底部，左侧 - 模糊元素的最坐标，你可以从A矩形坐标中减去这些坐标并计算面积

对于许多潜在的模糊元素，您可以通过删除排序步骤来进一步优化，而是在迭代模糊元素时跟踪顶部/右侧/底部/左侧的最坐标，并更新它们（如果当前迭代的元素在任一方向上更多）。