判断两个矩形是否相交(Rect Intersection)

闪电闪电闪电
266 阅读2分钟

0x00 Preface

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

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

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

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

0x01 Body

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

                                                          this.r = x + w; // r表示矩形的右边
                                                                this.b = y + h; // b 表示矩形的下边
                                                                    }
                                                                    }
                                                                    " title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>

class Rect {
    constructor(x,y,w,h) {
          this.x = x;
                this.y = y;
                      this.w = w;
                            this.h = h;

                                    <span class="hljs-keyword">this</span>.r = x + w; <span class="hljs-comment">// r表示矩形的右边</span>
                                          <span class="hljs-keyword">this</span>.b = y + h; <span class="hljs-comment">// b 表示矩形的下边</span>
                                              }
                                              }
                                              </pre><p>不相交的情况可以归纳为这几种情况：</p><ul><li>A在B的左边 （A.r &lt; B.x）</li><li>A在B的右边 ( B.r &lt; A.x)</li><li>A在B的上边 （A.b &lt; B.y ）</li><li>A在B的下边 （B.b &lt; A.y ）</li></ul><p>所以不相交的代码如下：</p><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="A.r < B.x || B.r < A.x || A.b < B.y || B.b <A.y
                  " title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
      </div><pre class="hljs language-reasonml"><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>r &lt; <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>x<span class="hljs-operator"> || </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>r &lt; <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>x<span class="hljs-operator"> || </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>b &lt; <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>y<span class="hljs-operator"> || </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>b &lt;<span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>y
      </pre><p>对于这种情况取反，就是相交的情况：</p><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="!(A.r < B.x || B.r < A.x || A.b < B.y || B.b <A.y)
                  " title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
      </div><pre class="hljs language-reasonml">!(<span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>r &lt; <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>x<span class="hljs-operator"> || </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>r &lt; <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>x<span class="hljs-operator"> || </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>b &lt; <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>y<span class="hljs-operator"> || </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>b &lt;<span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>y)
      </pre><p>取反之后 或变与：</p><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="A.r >= B.x &amp;&amp; B.r >= A.x &amp;&amp; A.b >= B.y &amp;&amp; B.b >= A.y
                  " title="" data-bs-original-title="复制" aria-label="复制"></button>
</div>
      </div><pre class="hljs language-reasonml"><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>r &gt;= <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>x<span class="hljs-operator"> &amp;&amp; </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>r &gt;= <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>x<span class="hljs-operator"> &amp;&amp; </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>b &gt;= <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>y<span class="hljs-operator"> &amp;&amp; </span><span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">B</span>.</span></span>b &gt;= <span class="hljs-module-access"><span class="hljs-module"><span class="hljs-identifier">A</span>.</span></span>y
      </pre><p>尝试着问下ChatGPT，它给出的正是这种思路，如下图：</p><p></p><h2 id="item-0-3">0x02 Conclusion</h2><ul><li>有时候反过来思考问题，是一种很好的思路</li><li>ChatGPT 牛逼。</li></ul><h2 id="item-0-4">0x03 The Last</h2><p>最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。</p>
avatar
文章
阅读
粉丝