首页 > 代码库 > 元素相交检测
元素相交检测
最近做一个项目,其中涉及到了一个相交检测的功能,现在分享出来共勉
首先先谈一谈满足什么样的条件,才能算两个元素是相交,下面是一个示意图:
Ax1是元素A的起点在x轴上的投影,Ax2是元素A的终点在x轴上的投影,Ay1是元素A的起点在y轴上的投影,Ay2是元素A的终点在y轴上的投影
Bx1是元素B的起点在x轴上的投影,Bx2是元素B的终点在x轴上的投影,By1是元素B的起点在y轴上的投影,By2是元素B的终点在y轴上的投影
当元素A和元素B在y轴和x轴的投影同时相交时,元素A和元素B才相交
元素A和元素B在x轴的投影相交的条件是:Ax1 <= Bx1 && Ax2 >= Bx1 || Ax1 <= Bx1 && Ax2 >= Bx2
元素A和元素B在y轴上的投影相交的条件是:Ay1 <= By1 && Ay2 >= By1 || Ay1 <= By1 && Bx2 >= By2
具体代码如下:
function compare(elemA,elemB,gap){ var Booleans,elemAPos,elemBPos, elemAShadow_x,elemAShadow_y, elemBShadow_x,elemBShadow_y, intersect_x,intersect_y; //元素的位置 elemAPos = elemA.offset(); elemBPos = elemB.offset(); //elemA的投影 elemAShadow_x = [elemAPos.left, elemAPos.left + elemA.width()]; elemAShadow_y = [elemAPos.top, elemAPos.top + elemA.height()]; //elemB的投影 elemBShadow_x = [elemBPos.left - gap, elemBPos.left + elemB.width() + gap]; elemBShadow_y = [elemBPos.top - gap, elemBPos.top + elemB.height() + gap]; //检测是否X轴上相交 intersect_x = (elemAShadow_x[0] >= elemBShadow_x[0] && elemAShadow_x[0] <= elemBShadow_x[1]) || (elemAShadow_x[1] >= elemBShadow_x[0] && elemAShadow_x[1] <= elemBShadow_x[1]); //检测是否Y轴上相交 intersect_y = (elemAShadow_y[0] >= elemBShadow_y[0] && elemAShadow_y[0] <= elemBShadow_y[1]) || (elemAShadow_y[1] >= elemBShadow_y[0] && elemAShadow_y[1] <= elemBShadow_y[1]); Booleans = intersect_x && intersect_y; return Booleans }
关于参数gap的解释:因为在这个项目中要求的功能是,要求两个元素之间的间距为10px,当两个元素之间的间距小于等于10就视为相交。
这上说函数中使用了jquery这个库
元素相交检测
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。