关于判断两个矩形是否相交

Yiiven

发布于 2022-12-15 07:09:56

2.5K00

代码可运行

文章被收录于专栏：怡文菌怡文菌

运行总次数：0

代码可运行

探究

最近在做WEB前端项目时，需要识别一个元素是否有某些部位出现在可视区域内，当有某个部位出现在可视区域时，就执行该元素绑定的动画，如果完全不在可视区域内则移除其动画，当再次出现时重复执行动画。

众所周知，元素是以一个矩形的盒模型的形式呈现在网页中，而且浏览器的可视区域也是一个矩形，那么这个需求就变成了某个元素的盒模型（矩形B）是否有某个部分出现在浏览器可视区域（矩形A）中，如果有则执行动画。

将需求提炼一下，问题为：判断矩形APa1(Xa1,Ya1), Pa2(Xa2,Ya2)与矩形BPb1(Xb1,Yb1), Pb2(Xb2,Yb2)是否相交。

图1

最初的思路如下：

首先求出点Pa1与Pb1距离原点(0,0)更远的点（即x轴方向与y轴方向坐标值较大的点），将其标记为M（图1的中粉色点）；
然后求出Pa2与Pb2距离原点更近的点（即x轴方向与y轴方向坐标值较小的点），将其标记为N（图1中的橙色点）；
判断：如果点M的x轴坐标值和y轴坐标值均比点N的x轴坐标和y轴坐标小（即，M点和N点可以构成一个新的矩形），则两个矩形相交，否则不相交。

方法出来了，总要经过验证才知道是否正确，那么接下来就对以下几种情况进行验证：

几种相交的情况：

图2

图3

图4

图5

再举两个不相交的情况：

图6

图7

如上所示，除了图1、图2通过上述方法得出正确答案外，其他情况均无法得出正确答案，由此可见上述方法是错误的。

那么如何才能得到正确的方法呢？仔细观察上面列出的几种情况后，想到了一个新的思路：如果两个矩形相交，那么矩形A的中心点Pa3(Xa3,Ya3)与矩形B的中心点Pb3(Xb3,Yb3)在x轴方向上的距离和y轴方向的距离一定满足以下条件：

在x轴方向：Pa3和Pb3的距离一定小于或等于矩形A的宽度+矩形B的宽度的一半；
在y轴方向：Pa3和Pb3的距离一定小于或等于矩形A的高度+矩形B的高度的一半；

只要满足以上两个条件，那么就可以判定为两个矩形相交。

矩形A
宽：Wa = Xa2 - Xa1
高：Ha = Ya2 - Ya1
中心坐标：[Xa3, Ya3] = [(Xa2 + Xa1) / 2, (Ya2 + Ya1) / 2]


矩形B
宽：Wb = Xb2 - Xb1
高：Hb = Yb2 - Yb1
中心坐标：[Xb3, Yb3] = [(Xb2 + Xb1) / 2, (Yb2 + Yb1) / 2]

上述两个条件即可表示为
1) |Xb3 - Xa3| <=  Wa/2 + Wb/2
2) |Yb3 - Ya3| <=  Ha/2 + Hb/2

再代入宽、高、中心点坐标计算公式并简化，即为：
1) |Xb2 + Xb1 - Xa2 - Xa1| <=  Xa2 - Xa1 + Xb2 - Xb1
2) |Yb2 + Yb1 - Ya2 - Ya1| <=  Ya2 - Ya1 + Yb2 - Yb1

扩展

如果想要得到相交区域的新矩形，那么需要取得相交区域的左上角顶点与右下角坐标，有方法如下：

设相交区域的新矩形为c[(Xc1,Yc1), (Xc2,Yc2)]

Xc1 = max(Xa1,Xb1)
Yc1 = max(Ya1,Yb1)

Xc2 = min(Xa2,Xb2)
Yc2 = min(Xa2,Xb2)

也可以通过判断上述获取新矩形的方法来判定两个矩形是否相交，方法如下：若同时满足以下两个条件，则可以判定两个矩形相交。 1) Xc1 <= Xc2 2) Yc1 <= Yc2 即： max(Xa1,Xb1) <= min(Xa2,Xb2) max(Ya1,Yb1) <= min(Ya2,Yb2)

编码

根据以上结论，有如下javascript代码提供参考：

/*
 * rect obj {x1:num, y1:num, x2:num, y2:num} 定义矩形的两个顶点的坐标集合
 */
var isIntersection = function(rectA, rectB){
    let lftp = [Math.max(rectA.x1, rectB.x1), Math.max(rectA.y1, rectB.y1)],
        rgbt = [Math.min(rectA.x2, rectB.x2), Math.min(rectA.y2, rectB.y2)];
    if(lftp[0] <= rgbt[0] && lftp[1] <= rgbt[1]){
        return true;
    }
    return false;
}

var rectA = {x1: 6, y1: 6, x2: 14, y2: 12},
    rectB = {x1: 10, y1: 10, x2: 20, y2: 16},
    rectC = {x1: 8, y1: 8, x2: 12, y2: 10},
    rectD = {x1: 4, y1: 8, x2: 16, y2: 10},
    rectE = {x1: 8, y1: 8, x2: 12, y2: 16},
    rectF = {x1: 10, y1: 14, x2: 16, y2: 18},
    rectG = {x1: 16, y1: 10, x2: 20, y2: 18};

console.log(isIntersection(rectA, rectB));  // true
console.log(isIntersection(rectA, rectC));  // true
console.log(isIntersection(rectA, rectD));  // true
console.log(isIntersection(rectA, rectE));  // true
console.log(isIntersection(rectA, rectF));  // false
console.log(isIntersection(rectA, rectG));  // false