如何检测一个元素坐在另一个元素之上

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. 比较2个区域
4. 如果2个区域相同，则没有重叠，否则至少2个圆圈重叠。
   

棘手的步骤是步骤1，可以使用像素绘制算法（我的偏好）近似计算。对于其他方法，您可以浏览以下stackoverflow question