[英]How to detect one element sitting on top of another
I have this situation: 我有这种情况:
I need to detect situation when element sitting on top of another. 当元素坐在另一个元素之上时,我需要检测情况。 This is SVG elements:
这是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>
I have to clue how to do this, maybe someone can give me some hint. 我必须弄清楚如何做到这一点,也许有人可以给我一些提示。 I use jQuery.
我使用jQuery。 Much thx for help.
很多请求帮助。
Well, at least if you're dealing with circles, it's a bit simple, because circles have a nice property: for circles to overlap in any way, the sum of their radii should be greater than the distance between their two centers . 好吧,至少如果你正在处理圈子,这有点简单,因为圈子有一个很好的属性: 对于圆圈以任何方式重叠,它们的半径之和应该大于它们两个中心之间的距离 。
So it should just be a matter of: 所以它应该只是一个问题:
<circle>
element, and <circle>
元素中定义,并且 <circle>
element), then <circle>
元素上) You could look at this function: 你可以看看这个功能:
http://jsfiddle.net/a9bnh/ 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;
};
Richard's answer is good if there are 2 circles but if there are many then I would suggest the following steps 理查德的回答是好的,如果有2个圈子,但如果有很多,那么我会建议以下步骤
The tricky step is step 1 which can be approximiately calculated using pixel painting algorithm(my preference). 棘手的步骤是步骤1,可以使用像素绘制算法(我的偏好)近似计算。 For other methods, you can go through the following stackoverflow question
对于其他方法,您可以查看以下stackoverflow问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.