元素相交检测

Posted 2020-08-21 QxQstar

最近做一个项目，其中涉及到了一个相交检测的功能，现在分享出来共勉

首先先谈一谈满足什么样的条件，才能算两个元素是相交，下面是一个示意图：

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这个库