浏览器检测圆角、旋转元素鼠标悬停的算法及点计算技术问询

核心检测逻辑 #

现代浏览器不会采用SAT（分离轴定理）算法，而是基于元素的矢量几何路径实现鼠标悬停命中检测。浏览器在渲染元素时，会将元素的最终形状（包含圆角、旋转、缩放等变换）转换成标准的矢量路径，然后直接判断鼠标所在的像素点是否落在该路径的闭合区域内。

针对不同元素的碰撞计算细节 #

带圆角的矩形元素 #

1. 首先判断鼠标点是否位于元素的**轴对齐边界矩形（bounding box）**内，若不在则直接判定未悬停；
2. 若点在边界矩形内，再检查四个圆角区域：每个圆角对应一个四分之一圆，计算鼠标点到该圆角圆心的距离，若距离小于等于border-radius的值，且点处于该圆角对应的90度扇形范围内，则判定在圆角区域内；
3. 若点不在任何圆角区域，且位于原始矩形（去掉圆角的矩形）内部，则判定悬停。

旋转后的元素 #

1. 将鼠标的屏幕坐标，通过逆变换矩阵转换到元素的本地坐标系——反向应用元素的旋转、位移、缩放等变换，把鼠标点映射到元素未做变换前的坐标空间；
2. 在元素的本地坐标系中，复用上述圆角或普通矩形的检测逻辑，判断点是否在元素的原始形状内部即可。

SAT算法的适用性 #

浏览器不采用SAT算法，原因在于：

• SAT主要针对凸多边形的碰撞检测，无法直接处理圆角这类曲线形状；
• 元素的变换（如旋转、缩放）会增加SAT的计算复杂度，而矢量路径的命中检测可以直接结合变换矩阵完成，效率更高。

元素边角角度的定义 #

• 未做变换的矩形元素，边角角度是基于本地坐标系的90度直角；
• 若元素应用了旋转变换，边角的绝对角度等于本地坐标系的角度加上元素的旋转角度；
• 带圆角的元素，其“边角”实际是圆弧与直线的过渡区域，这里的角度通常指圆弧对应的圆心角（默认是90度，对应四分之一圆）；
• 自定义路径元素的边角角度，由路径中线段与线段、线段与圆弧的连接方式决定，比如路径的lineJoin属性会影响边角的视觉形态，但角度本质是路径段在连接点的切线夹角。

内容的提问来源于stack exchange，提问作者rabbit545