如何檢測一個元素坐在另一個元素之上

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問題