javascript - 如何检测一个元素位于另一个元素之上

Question

我有这种情况：

当元素位于另一个元素之上时，我需要检测情况。这是 SVG 元素：

<circle r="210.56" fill="#1ABCDB" id="01" priority="4" cx="658" cy="386"></circle>
<circle r="210.56" fill="#1ADC4A" id="02" priority="4" cx="858" cy="386"></circle>

我必须知道如何做到这一点，也许有人可以给我一些提示。我使用 jQuery。非常感谢您的帮助。

Answer 1

好吧，至少如果你正在处理圆，这有点简单，因为圆有一个很好的属性：对于以任何方式重叠的圆，它们的半径之和应该大于它们两个中心之间的距离。

所以这应该只是一个问题：

1. 找出两个中心点之间的距离（很容易得到中心，因为它们是在<circle>元素中定义的，并且
2. 添加两个半径值（同样，在<circle>元素上），然后
3. 只是比较。如果半径总和大于距离，那么你就有了一个重叠。

http://jsfiddle.net/sZ9N9/

Answer 2

你可以看看这个函数：

http://jsfiddle.net/a9bnh/

function upperElements(el) {
    var top = el.offsetTop,
        left = el.offsetLeft,
        width = el.offsetWidth,
        height = el.offsetHeight,
        elemTL = document.elementFromPoint(left, top),
        elemTR = document.elementFromPoint(left + width - 1, top),
        elemBL = document.elementFromPoint(left, top + height - 1),
        elemBR = document.elementFromPoint(left + width - 1, top + height - 1),
        elemCENTER = document.elementFromPoint(parseInt(left + (width / 2)), parseInt(top + (height / 2))),
        elemsUpper = [];
    if (elemTL != el) elemsUpper.push(elemTL);
    if (elemTR != el && $.inArray(elemTR, elemsUpper) === -1) elemsUpper.push(elemTR);
    if (elemBL != el && $.inArray(elemBL, elemsUpper) === -1) elemsUpper.push(elemBL);
    if (elemBR != el && $.inArray(elemBR, elemsUpper) === -1) elemsUpper.push(elemBR);
    if (elemCENTER != el && $.inArray(elemCENTER, elemsUpper) === -1) elemsUpper.push(elemCENTER);
    return elemsUpper;
};

Answer 3

如果有 2 个圆圈，理查德的回答很好，但如果有很多，那么我会建议以下步骤

1. 计算重叠圆圈覆盖的面积
   
2. 独立计算所有圆的面积总和（因为这是 SVG 并且圆的半径是已知的，这很容易做到）
3. 比较两个区域
4. 如果 2 个区域相同，则没有重叠，否则至少有 2 个圆重叠。
   

棘手的步骤是第 1 步，可以使用像素绘画算法（我的偏好）进行近似计算。对于其他方法，您可以通过以下stackoverflow问题