[英]How to detect one element sitting on top of another
我有这种情况:
当元素坐在另一个元素之上时,我需要检测情况。 这是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。 很多请求帮助。
好吧,至少如果你正在处理圈子,这有点简单,因为圈子有一个很好的属性: 对于圆圈以任何方式重叠,它们的半径之和应该大于它们两个中心之间的距离 。
所以它应该只是一个问题:
<circle>
元素中定义,并且 <circle>
元素上) 你可以看看这个功能:
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;
};
理查德的回答是好的,如果有2个圈子,但如果有很多,那么我会建议以下步骤
棘手的步骤是步骤1,可以使用像素绘制算法(我的偏好)近似计算。 对于其他方法,您可以查看以下stackoverflow问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.