1. 程式人生 > >Cocos Creator 系統學習筆記(四)--座標系統

Cocos Creator 系統學習筆記(四)--座標系統

座標系統:

 
cc.Class({
    extends: cc.Component,

    properties: {
       
    }, 
    //座標系統
    //cc.Vec2是一個建構函式,可以使用new來建立
    /* 
     * 1: cc.Vec2 二維向量座標, 表結構{x: 120,  y: 120};    cc.v2(x, y) 建立一個二維向量 cc.p() 建立一個二外向量
    2: cc.pSub: 向量相減
    3: cc.pAdd: 向量相加;
    4: cc.pLength: 向量長度;

     */
   onLoad:function(){
       // 1
        var w_pos=new cc.Vec2(100,100);
        console.log(w_pos);
        //2
        w_pos=cc.v2(200,200);
        //3
        w_pos=cc.p(300,300);
        //求向量方向
        var src=cc.p(0,0);
        var dst=cc.p(100,100);
        var dir=cc.pSub(dst,src);
        
        var len=cc.pLength(dir);//求向量長度
        //cc.Size/cc.Rect
        /**1: cc.Size: 包含寬度和高度資訊的物件 {width: 100, height: 100};
        2: new cc.Size(w, h), cc.size(w, h)建立一個 大小物件;
        3: cc.Rect: 矩形物件 new cc.Rect(x, y, w, h); cc.rect(x, y, w, h); {x, y, width, height}
        4: contains(Point): 點是否在矩形內;
        5: intersects : 兩個矩形是否相交;
        */
        var s = new cc.Size(100, 100);
        console.log(s);//s 表物件 
        s = cc.size(200, 200); 

        var r = new cc.Rect(0, 0, 100,100); 
        r = cc.rect(0, 0, 200, 200);
        console.log(r);

        var ret = r.contains(cc.p(300, 300));//是否包含點(300,300)
        console.log(ret);

        var rhs = cc.rect(100, 100, 100, 100);//兩矩形是否相交
        ret = r.intersects(rhs);
        console.log(ret); 
        //creator座標系
        /**1: 世界(螢幕)座標系;
        2: 相對(節點)座標系,兩種相對節點原點的方式(1) 左下角為原點, (2) 錨點為原點(引用的api:AR)
        3: 節點座標和螢幕座標的相互轉換; 我們到底使用哪個?通常情況下帶AR;
        4: 獲取在父親節點座標系下(AR為原點)的節點包圍盒;
        5: 獲取在世界座標系下的節點包圍盒;
        6: 觸控事件物件世界座標與節點座標的轉換; 
        */
       // 節點座標的(0,0)轉到螢幕座標 cc.p(0, 0)
       var w_pos = this.node.convertToWorldSpace(cc.p(0, 0)); // 左下角為原點的   cc.p(430, 270)
       console.log(w_pos);
       w_pos = this.node.convertToWorldSpaceAR(cc.p(0, 0)); // 錨點為原點 cc.p(480, 320)
       console.log(w_pos);
       
        //世界座標轉成節點座標
       var w_pos = cc.p(480, 320);
        //以 this.node為參考節點
       var node_pos = this.node.convertToNodeSpace(w_pos);
       console.log(node_pos); // cc.p(50, 50)

       node_pos = this.node.convertToNodeSpaceAR(w_pos);
       console.log(node_pos); // cc.p(0, 0)
       //4
       // 獲取節點的包圍盒, 相對於父節點座標系下的包圍盒
       var box = this.node.getBoundingBox();
       console.log(box+"box:=============");

       // 世界座標系下的包圍盒
       var w_box = this.node.getBoundingBoxToWorld();
       console.log(w_box);

       this.node.on(cc.Node.EventType.TOUCH_START, function(t) {
           var w_pos = t.getLocation();
           var pos = this.node.convertToNodeSpaceAR(w_pos);
           console.log(pos);

           pos = this.node.convertTouchToNodeSpaceAR(t);
           console.log("====", pos);
       }, this);

            //將物件放置在世界 座標(900,600)
       // 把世界座標轉到相對於它的父親節點的座標
       var node_pos = this.node.parent.convertToNodeSpaceAR(cc.p(900, 600));
       this.node.setPosition(node_pos); // 相對於this.node.parent這個為參照物,AR為原點的座標系 
       // 獲取當前節點的世界座標;
       this.node.convertToWorldSpaceAR(cc.p(0, 0));
   },

    start:function () {

    }, 
});