Cocos Creator 系統學習筆記(四)--座標系統
阿新 • • 發佈:2018-11-15
座標系統:
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 () { }, });