惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
Vercel News
Vercel News
博客园_首页
Y
Y Combinator Blog
美团技术团队
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
阮一峰的网络日志
阮一峰的网络日志
aimingoo的专栏
aimingoo的专栏
H
Hackread – Cybersecurity News, Data Breaches, AI and More
MyScale Blog
MyScale Blog
GbyAI
GbyAI
人人都是产品经理
人人都是产品经理
T
Tailwind CSS Blog
MongoDB | Blog
MongoDB | Blog
D
DataBreaches.Net
博客园 - Franky
Engineering at Meta
Engineering at Meta
量子位
The GitHub Blog
The GitHub Blog
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
酷 壳 – CoolShell
酷 壳 – CoolShell
N
Netflix TechBlog - Medium

博客园 - ITman彪叔

赋能UE运行态编辑平台: 网络图片下载的插件改造与复盘 召回率暴涨!“层级化分片”与“降噪”拯救 RAG 系统 基于FastMCP打通业务系统与AI:构建智能协作新范式 在 Dify 中通过 MCP 集成本地 FastMCP 服务避坑指南 从分形到森林——使用 Three.js 创建逼真的 3D 树木 Threejs 视频融合 UE5 小部件 组合框(键)ComboBox (Key) Tesseract OCR 页面分割模式解析 Java MQTT 主流开发方案对比 Java Modbus主流开发方案对比 Java OPC UA 开发方案全对比:开源、商业、集成与官方标准 Nodejs打包 Webpack 中 __dirname 的正确配置与行为解析 强制 pnpm 使用 IPv4 而不是 IPv6 的终极解决方案指南 uniapp 微信小程序 调试 UE Websocket 通信 UE Geometry_Script 程序化建模 UE MultiLineTraceByChannel函数返回只有一个对象的问题 UE Spline 样条网格体组件添加碰撞 Three光源Target位置改变光照方向不变的问题及解决方法 UE5 射线检测排除隐藏的Actor UE5打包SDK未正确安装的问题 电力布局三维编辑器功能设计 UE4 WebUI使用指南2-通信
判断两个矩形是否相交(Rect Intersection)
ITman彪叔 · 2023-06-08 · via 博客园 - ITman彪叔

0x00 Preface

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

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

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

image.png

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

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,它给出的正是这种思路,如下图:

image.png

0x02 Conclusion

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

0x03 The Last

最后,关注公号“ITMan彪叔” 可以添加作者微信进行交流,及时收到更多有价值的文章。