005--cc.Node坐标空间

2019-04-11  本文已影响0人  HeavenOrSky

cc.Vec2

1: cc.Vec2 二维向量坐标, 表结构{x: 120, y: 120}; cc.v2(x, y) 创建一个二维向量 cc.p() 创建一个二外向量
2: cc.pSub: 向量相减
3: cc.pAdd: 向量相加;
4: cc.pLength: 向量长度;

向量的声明和赋值

onLoad ()
   {
        var v1 = new cc.Vec2();
        var v2 = new cc.Vec2(0,0);
        var v3 = v2;
        var v4 = new cc.Vec2(100, 100);
        v1.set(v4);
        console.log(v1.toString());
        console.log(v2.toString());
        console.log(v3.toString());
        console.log(v4.toString());
   }

属性

   onLoad ()
   {
        //x = 1,y=1
        console.log(cc.Vec2.ONE);
        //x = 1,y=0
        console.log(cc.Vec2.RIGHT);
        //x = 0,y=1
        console.log(cc.Vec2.UP);
        //x = 0,y=0
        console.log(cc.Vec2.ZERO);
   }

方法

        //缩放向量
        console.log(cc.Vec2.RIGHT.mul(5));
        var v1 = cc.Vec2.RIGHT;
        var v2 = cc.Vec2.UP;
        //v1.angle(v2)  得到的是弧度
        //将弧度转化成角度
        console.log(v1.angle(v2)/ (Math.PI*2) * 360);

减法

    onLoad ()
    {
        var v1 = cc.v2(10,20);
        var v2 = cc.v2(10,30);
        //向量减法
        //如果v1是起点  v2是终点  v2-v1  可以表示v1到v2的方向向量
        var v3 = v2.sub(v1);
        console.log(v3.toString());
        //求两点之间的距离
        var distance = v3.mag();
        console.log(distance);
    }

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 : 两个矩形是否相交;

    onLoad ()
    {

        //使用cc.v2或者cc.vec2替代  cc.size  ,cc.p
        var s1 = cc.size(100,100);
        //s1是object类型的
        console.log(s1.toString());
        var s2 = cc.size(200,200);
        console.log(s2.toString());

        var rect1 = cc.rect(0,0,20,10);
        var point = cc.v2(5,5);
        //判断一个点是否在矩形内
        var ret = rect1.contains(point)
        console.log(ret);
        var rect2 = cc.rect(5,5,20,10);
        //判断矩形是否有重叠
        console.log(rect1.intersects(rect2));
        var rect3 = new cc.Rect();
        //计算rect1和rect2的重叠部分
        rect1.intersection(rect3,rect2);
        //重叠部分是(5.00, 5.00, 15.00, 5.00)
        //从点(5,5)开始  宽15 高5的一个矩形
        console.log(rect3.toString());
    }

creator坐标系

1: 世界(屏幕)坐标系; 左下角
2: 相对(节点)坐标系,两种相对节点原点的方式
(1) 左下角为原点
(2) 锚点为原点(API带有AR的居多)
相对节点相关代码

        //在Canvas下创建一个精灵大小设置为100,100 位置置为0,0
        //Canvas 大小为960 640
        //将自身结点的左下方为坐标原点计算 距离屏幕原点的位置
        var v1 = this.node.convertToWorldSpace(cc.Vec2.ZERO)
        //以自身锚点为原点计算距离屏幕左下方原点的位置
        var v2 = this.node.convertToWorldSpaceAR(cc.Vec2.ZERO)
        console.log(v1.toString());//(430.00, 270.00)
        console.log(v2.toString());//(480.00, 320.00)

3: 节点坐标和屏幕坐标的相互转换; 我们到底使用哪个?
答案是:通常情况下带AR;
4: 获取在父亲节点坐标系下(AR为原点)的节点包围盒;
5: 获取在世界坐标系下的节点包围盒;

        //设置该节点的位置是100,100 大小100,100

        //获取结点的包围盒  相对于父节点的  节点锚点到父节点的锚点的
        var rect =this.node.getBoundingBox();
        console.log(rect.toString());//(50.00, 50.00, 100.00, 100.00)

        //获取结点的包围盒  相对于屏幕坐标的原点的  锚点到屏幕坐标原点的
        rect = this.node.getBoundingBoxToWorld();
        console.log(rect.toString());//(530.00, 370.00, 100.00, 100.00)

6: 触摸事件对象世界坐标与节点坐标的转换;

        this.node.on(cc.Node.EventType.TOUCH_START,(t)=>{
            //在屏幕坐标系下的位置信息
            var w_pos = t.getLocation();
            console.log("w_pos:"+ w_pos.toString());
            
            //在节点坐标系下的位置信息
            var pos = this.node.convertToNodeSpaceAR(w_pos);
            console.log(pos.toString());

            //参数是一个cc.Touch类型的
            //返回的是相对于节点锚点的位置信息
            var touchPos = this.node.convertTouchToNodeSpaceAR(t);
            console.log("touchPos:"+touchPos.toString());
        },this)
        
上一篇 下一篇

猜你喜欢

热点阅读