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

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

creator 分享圖片 on() bubuko 向量 xtend inter div type

技術分享圖片

坐標系統:

 
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 () {

    }, 
});

  

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