二维平面内的碰撞检测【二】

这篇我们将讲解圆与矩形的碰撞；

圆与矩形的碰撞检测

通常在svg或者canvas中我们会这样表示一个圆: 圆心(cx,cy)，半径r;

表示矩形：中心点坐标（0,0） width="250" height="250" x=-width/2 y=-height/2 平移（rectX,rectY）并以几何中心旋转任意角度

展示的矩形即几何中心点（rectX,rectY）width="250" height="250"；

你可能会问，如果矩形被旋转了怎么办？
我们可以在矩形的中心点建立一个新的坐标系统。以宽平行方向为x轴方向，以高平行方向为Y轴方向

得到在新的坐标系统中圆的坐标：(cx-rectX,cy-rectY)

在新坐标系统中计算圆中心点的投影即圆中心点的坐标。那么我们发现，

图中L=r/Math.sqrt(r);

我们可以看到当两边投影 x 方向 小于等于width+L && y方向小于等于heigth/2 或者 x方向小于等于width/2 && y方向上小于等于 height+L的时候即碰撞

//(cx,cy) 矩形 width height 中心点(rectX,rectY)
var L=r/Math.sqrt(r);
if((Math.abs(cx-rectX)<= width/2+L && Math.abs(cy-rectY)<= height/2)||(Math.abs(cx-rectX)<= width/2 && Math.abs(cy-rectY)<= height/2+L)){
//碰撞
}else{
//无碰撞
}