摘要:這篇我們將講解圓與矩形的碰撞圓與矩形的碰撞檢測通常在或者中我們會這樣表示一個圓圓心,半徑表示矩形中心點坐標平移并以幾何中心旋轉任意角度展示的矩形即幾何中心點你可能會問,如果矩形被旋轉了怎么辦我們可以在矩形的中心點建立一個新的坐標系統。
這篇我們將講解圓與矩形的碰撞;
圓與矩形的碰撞檢測通常在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{ //無碰撞 }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81823.html
摘要:碰撞檢測,故名思議,兩個元素在運動的過程中是否有接觸。接下來,我們從簡單到復雜的碰撞一一解析其中的算法。假設求出碰撞無碰撞下篇繼續講解當圓與矩形碰撞,等更復雜的碰撞檢測 碰撞檢測,故名思議,兩個元素在運動的過程中是否有接觸。接下來,我們從簡單到復雜的碰撞一一解析其中的算法。編碼使用JavaScript。ps:下列圖形均指實心圖形 點與點的碰撞 這個太簡單了,不多說,就是當坐標一致的時候...
閱讀 2772·2021-10-14 09:42
閱讀 828·2021-10-11 10:57
閱讀 773·2019-08-30 15:54
閱讀 1914·2019-08-30 13:50
閱讀 1686·2019-08-30 11:19
閱讀 932·2019-08-29 12:38
閱讀 1425·2019-08-26 11:51
閱讀 1389·2019-08-26 10:48