cc.Node.坐標空間

坐標空間

1.cc.Vec2

cc.vec2二維向量坐標,表結(jié)構(gòu)(x:120,y:120);

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

方法:

cc.pSub向量相減

cc.pAdd向量相加

cc.pLength向量長度

    onLoad: function () {
    //創(chuàng)建vec2對象
    var wpos = new cc.Vec2(100,100);
    console.log(wpos);
    //創(chuàng)建vec2對象
    wpos = cc.v2(200,500);
    console.log(wpos);
    //創(chuàng)建一個點 屬于坐標
    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)來創(chuàng)建大小對象.

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

常用方法:

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

intersects:兩個矩形是否相交

坐標系

1世界(屏幕)坐標系:

也稱為屏幕坐標系,他的原點是屏幕的左下角,

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

2.節(jié)點坐標系也叫相對坐標

相對于節(jié)點的一個坐標,

3.有兩種相對節(jié)點 原點等查找方式

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

第二種:以錨點為原點(后綴帶AR)。

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

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

4.節(jié)點坐標和屏幕坐標的相互轉(zhuǎn)換  

節(jié)點坐標轉(zhuǎn)屏幕坐標  convertToWorldSpace() convertToWorldSpaceAR()

//將節(jié)點坐標轉(zhuǎn)為屏幕坐標
//節(jié)點的原點比如說是0,0
//這樣就能算出節(jié)點等原點所在屏幕坐標
//不帶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

世界坐標轉(zhuǎn)節(jié)點坐標  以節(jié)點為原點(0,0)  convertToNodeSpace()

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

世界坐標轉(zhuǎn)節(jié)點坐標  以節(jié)點的錨點作為原點 convertToNodeSpaceAR()

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

總結(jié)下: 通常情況下,使用帶AR的,因為creator里面

坐標默認是以錨點來設(shè)置的。

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

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

藍色的是子節(jié)點

輸出的是-25,-25,50,50 x,y坐標是相對于父節(jié)點坐標系的

注意:這個父節(jié)點坐標系原點是以錨點為參考的。

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

getBoundingBoxToWorld 返回節(jié)點在世界坐標系下的對齊軸向的包圍盒

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

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

根據(jù)事件坐標來獲取到他這是(以AR錨點為原點)是480,320

但是他的x,y是這個減去高或?qū)?2,因為他的原點也是錨點.

那么就是455,295

7.觸摸事件對象世界坐標與節(jié)點坐標轉(zhuǎn)換 convertToNodeSpaceAR()

        this.node.on(cc.Node.EventType.TOUCH_START,
            function(t){
                var wpos = t.getLocation();
                //把這個點擊轉(zhuǎn)換為節(jié)點坐標系
                wpos = this.node.convertToNodeSpaceAR(wpos);
                console.log(wpos);
            },this);

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

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

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

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

8 我們現(xiàn)在要把一個子節(jié)點的位置移動到相對與父親的位置.

坐標使用的是世界坐標,600,500,現(xiàn)在就要獲取這個

點相對于父節(jié)點的位置，也就是以父節(jié)點原點來設(shè)置這個位置.

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