Rect Intersection判断两个矩形是否相交
更新时间：2023年06月09日 11:34:56 作者：netcy
这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Preface
最近在开发一个2D组态图形组件的过程中，里面的数学模块，涉及到两个矩形是否相交的判断。
这个问题很多年前就写过，算是个小的算法吧。
网络上搜索一下，有很多思路，有一些思路要基于多种组合的判断，显得比较复杂。 比如两个矩形相交的情形，可能有下面的多种类型：
而每种类型又有多种子类型。
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，它给出的正是这种思路，如下图：
Conclusion
- 有时候反过来思考问题，是一种很好的思路
- ChatGPT 牛逼。
以上就是Rect Intersection判断两个矩形是否相交的详细内容，更多关于Rect Intersection的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了React手写一个手风琴组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了react学习笔记之state以及setState的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了浅谈React的最大亮点之虚拟DOM,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧2022-09-09
本篇文章主要介绍了详解在React里使用"Vuex"，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
state和props类似，都是一种存储属性的方式，但是不同点在于state只属于当前组件，其他组件无法访问，这篇文章主要介绍了React 18中的state概念与使用、注意问题，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-05-05
这篇文章主要为大家介绍了React SSG实现Demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-07-07
这篇文章主要为大家详细介绍了React-redux实现小案例（todolist）的过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了React反向代理及样式独立详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
最新评论