Cocos Creator 坐標系 （convertToWorldSpaceAR、convertToNodeSpaceAR）

版本：2.3.4

參考
cocos教程：坐標系和變換

 

cocos的坐標系和其他引擎不一樣。

 

Egret中坐標系

舞台的原點在左上角

組件的原點也在左上角

角度順時針旋轉為正數，逆時針旋轉為負數

 

 

Laya中坐標系

和Egret一致

 

 

Cocos坐標系

和Laya、Egret的y軸朝下的，cocos的y軸是朝上的。

角度順時針是負數，逆時針是正數。

而且cocos新建組件錨點0.5居中

 

 坐標轉換

 

 

 

原點在左下角，坐標(0，0)

canvas坐標(540,320)

白色方塊高寬200x200，坐標(100,100)

紅色方塊高寬50x50，坐標(50,50)

 

convertToNodeSpaceAR    將一個點轉換到節點 (局部) 空間坐標系

convertToWorldSpaceAR   將節點坐標系下的一個點轉換到世界空間坐標系

 

const {ccclass, property} = cc._decorator;

@ccclass
export default class Helloworld extends cc.Component {

    @property(cc.Node)
    white:cc.Node=  null;

    @property(cc.Node)
    red:cc.Node = null;

    onLoad(){

        //將紅色方塊局部位置轉成世界位置
        var worldPos = this.red.parent.convertToWorldSpaceAR(new cc.Vec2(this.red.x, this.red.y));
        console.log(worldPos);  //(690,470)

        //將世界位置轉成紅色方塊相同的局部位置
        var localPos = this.red.parent.convertToNodeSpaceAR(new cc.Vec2(690, 470));
        console.log(localPos);  //(50,50)
    }
}

 

紅色方塊的世界坐標，就是距離左下角原點的坐標(690，470)