美文网首页
005--cc.Node坐标空间

005--cc.Node坐标空间

作者: HeavenOrSky | 来源:发表于2019-04-11 18:06 被阅读0次

    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)
            
    

    相关文章

      网友评论

          本文标题:005--cc.Node坐标空间

          本文链接:https://www.haomeiwen.com/subject/ifaziqtx.html