资讯专栏INFORMATION COLUMN

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

wqj97 / 3112人阅读

摘要:这篇我们将讲解圆与矩形的碰撞圆与矩形的碰撞检测通常在或者中我们会这样表示一个圆圆心,半径表示矩形中心点坐标平移并以几何中心旋转任意角度展示的矩形即几何中心点你可能会问,如果矩形被旋转了怎么办我们可以在矩形的中心点建立一个新的坐标系统。

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

圆与矩形的碰撞检测

通常在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{
//无碰撞
}




文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81823.html

相关文章

  • 平面内的碰撞检测【一】

    摘要:碰撞检测,故名思议,两个元素在运动的过程中是否有接触。接下来,我们从简单到复杂的碰撞一一解析其中的算法。假设求出碰撞无碰撞下篇继续讲解当圆与矩形碰撞,等更复杂的碰撞检测 碰撞检测,故名思议,两个元素在运动的过程中是否有接触。接下来,我们从简单到复杂的碰撞一一解析其中的算法。编码使用JavaScript。ps:下列图形均指实心图形 点与点的碰撞 这个太简单了,不多说,就是当坐标一致的时候...

    SimpleTriangle 评论0 收藏0

发表评论

0条评论

wqj97

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<