关于javascript:判断两个矩形是否相交Rect-Intersection

0x00 Preface

最近在开发一个 2D 组态图形组件的过程中，外面的数学模块，波及到两个矩形是否相交的判断。

这个问题很多年前就写过，算是个小的算法吧。

网络上搜寻一下，有很多思路，有一些思路要基于多种组合的判断，显得比较复杂。比方两个矩形相交的情景，可能有上面的多种类型：

而每种类型又有多种子类型。

0x01 Body

其实能够反向来思考这个问题，就比较简单，两个矩形 A 和 B，不相交的状况有哪些，而后通过 bool 取反，就是相交的状况。
假如矩形的的定义如下：

class Rect {constructor(x,y,w,h) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      
      this.r = x + w; // r 示意矩形的左边
      this.b = y + h; // b 示意矩形的下边
    }
}

不相交的状况能够演绎为这几种状况：

• A 在 B 的右边（A.r < B.x）
• A 在 B 的左边 (B.r < A.x)
• A 在 B 的上边（A.b < B.y）
• A 在 B 的下边（B.b < A.y）

所以不相交的代码如下：

A.r < B.x || B.r < A.x || A.b < B.y || B.b <A.y

对于这种状况取反，就是相交的状况：

!(A.r < B.x || B.r < A.x || A.b < B.y || B.b <A.y)

取反之后 或变与：

A.r >= B.x && B.r >= A.x && A.b >= B.y && B.b >= A.y

尝试着问下 ChatGPT，它给出的正是这种思路，如下图：

0x02 Conclusion

• 有时候反过来思考问题，是一种很好的思路
• ChatGPT 牛逼。

0x03 The Last

最初，关注公号“ITMan 彪叔”能够增加作者微信进行交换，及时收到更多有价值的文章。