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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了create-react-app项目配置全解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了webpack4 + react 搭建多页面应用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了React Native 资源包拆分实战分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
React可以通过使用React事件系统来监听鼠标事件,您可以在React组件中通过使用特定的事件处理函数来注册和处理鼠标事件,本文小编讲给大家详细介绍一下如何在React中监听鼠标事件,需要的朋友可以参考下2023-09-09
React useMemo和useCallback的使用场景
这篇文章主要介绍了React useMemo和useCallback的使用场景，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
React Native 是目前流行的跨平台移动应用开发框架之一。本文介绍react native环境安装流程及遇到问题解决方法，感兴趣的朋友一起看看吧2021-05-05
React Native 集成 ArcGIS 地图的详细过程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,本文给大家介绍React Native 集成 ArcGIS 地图的详细过程,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了React diff算法的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本文主要介绍了react18中react-redux状态管理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
最新评论