cc.Node.座標空間

座標空間

1.cc.Vec2

cc.vec2二維向量座標,表結構(x:120,y:120);

cc.v2(x,y)創建一個二維向量

方法:

cc.pSub向量相減

cc.pAdd向量相加

cc.pLength向量長度

    onLoad: function () {
    //創建vec2對象
    var wpos = new cc.Vec2(100,100);
    console.log(wpos);
    //創建vec2對象
    wpos = cc.v2(200,500);
    console.log(wpos);
    //創建一個點 屬於座標
    wpos = cc.p(300,300);
    console.log(wpos);
    //向量用法 比如一個起點和終點 怎麼算出向量?
    var src = cc.p(10,10);
    var dts = cc.p(100,100);
    //這個向量就是目的地減去起點
    var dir = cc.pSub(dts,src);
    console.log(dir);
    //求這個向量等長度 當前座標到原點距離
    var len = cc.pLength(dir)
    console.log(len);
    
    },

2.cc.Size/cc.Rect

cc.Size包含寬度和高度信息等對象,{width:100,height:100}

new cc.Size(w,h)和cc.size(w,h)來創建大小對象.

cc.Recv(矩形)new cc.Rect(x,y,w,h)和cc.rect(x,y,w,h)創建對象

常用方法:

contains(Point):判斷一個點是否在矩形內

intersects:兩個矩形是否相交

座標系

1世界(屏幕)座標系:

也稱爲屏幕座標系,他的原點是屏幕的左下角,

水平向右是x, 豎直向上是y。

2.節點座標系也叫相對座標

相對於節點的一個座標,

3.有兩種相對節點 原點等查找方式

第一種:使用默認左下角爲原點。

第二種:以錨點爲原點(後綴帶AR)。

creator 默認是使用帶AR的,因爲他座標都是以錨點作爲原點,

來進行設置, 所以通常使用這種API都要帶AR

4.節點座標和屏幕座標的相互轉換  

節點座標轉屏幕座標  convertToWorldSpace() convertToWorldSpaceAR()

//將節點座標轉爲屏幕座標
//節點的原點比如說是0,0
//這樣就能算出節點等原點所在屏幕座標
//不帶AR是以做下角爲原點.
var wpos = this.node.convertToWorldSpace(cc.p(0,0));
console.log(wpos);//輸出430,270

//如果是以錨點作爲錨點方法後面帶AR
//這裏就是以座標等錨點爲原點了
wpos = this.node.convertToWorldSpaceAR(cc.p(0,0));
console.log(wpos);//輸出480,320

世界座標轉節點座標  以節點爲原點(0,0)  convertToNodeSpace()

//精靈的錨點 作爲世界座標
var pos = cc.p(480,320);
var node_pos = this.node.convertToNodeSpace(pos);
//輸出的就是50，50 因爲是以節點的(0,0)作爲原點等
console.log(node_pos);

世界座標轉節點座標  以節點的錨點作爲原點 convertToNodeSpaceAR()

//精靈的錨點 作爲世界座標 
var pos = cc.p(480,320);、
//以節點的錨點作爲原點
var node_pos = this.node.convertToNodeSpaceAR(pos);
//輸出的就是0,0 因爲是以節點的錨點作爲原點等
console.log(node_pos);

總結下: 通常情況下,使用帶AR的,因爲creator裏面

座標默認是以錨點來設置的。

5.獲取在父節點座標系下的節點包圍盒 getBoundingBox()

        //獲取節點的包圍盒,相對於父節點的座標系的
        var box = this.node.getBoundingBox();
        //-25,-25,50,50  
        console.log(box)

藍色的是子節點

輸出的是-25,-25,50,50 x,y座標是相對於父節點座標系的

注意:這個父節點座標系原點是以錨點爲參考的。

6.獲取在世界座標系下的節點包圍盒 getBoundingBoxToWorld()

getBoundingBoxToWorld 返回節點在世界座標系下的對齊軸向的包圍盒

        box = this.node.getBoundingBoxToWorld();
        console.log(box);

輸出的是 455,295,50,50 因爲他的高寬是50,50

根據事件座標來獲取到他這是(以AR錨點爲原點)是480,320

但是他的x,y是這個減去高或寬/2,因爲他的原點也是錨點.

那麼就是455,295

7.觸摸事件對象世界座標與節點座標轉換 convertToNodeSpaceAR()

        this.node.on(cc.Node.EventType.TOUCH_START,
            function(t){
                var wpos = t.getLocation();
                //把這個點擊轉換爲節點座標系
                wpos = this.node.convertToNodeSpaceAR(wpos);
                console.log(wpos);
            },this);

這樣就能獲取到這個子節點相對於父親節點(錨點)的觸摸座標啦、

還有一種更簡便的寫法 convertTouchToNodeSpaceAR(t)

這個t就是cc.Touch 他不用你在去getLocation() 他內部做了這個操作

              //這裏傳入的參數是cc.Touch 
                wposs = this.node.convertTouchToNodeSpaceAR(t)
                console.log(wposs);

8 我們現在要把一個子節點的位置移動到相對與父親的位置.

座標使用的是世界座標,600,500,現在就要獲取這個

點相對於父節點的位置，也就是以父節點原點來設置這個位置.

var node_pos = this.node.parent.convertToNodeSpaceAR(cc.p(600,500));
                this.node.setPosition(node_pos);