• cc.Node—坐标系统


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

    cc.Size/cc.Rect
    1: cc.Size: 包含宽度和高度信息的对象 { 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 : 两个矩形是否相交;

    creator坐标系
    1: 世界(屏幕)坐标系;
    2: 相对(节点)坐标系,两种相对节点原点的方式(1) 左下角为原点, (2) 锚点为原点(AR);
    3: 节点坐标和屏幕坐标的相互转换; 我们到底使用哪个?通常情况下带AR;
    4: 获取在父亲节点坐标系下(AR为原点)的节点包围盒;
    5: 获取在世界坐标系下的节点包围盒;
    6: 触摸事件对象世界坐标与节点坐标的转换;

            // 获取节点的包围盒, 相对于父亲节点坐标系下的包围盒
            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);
    
    
            // 我要把当前这个sub移动到世界坐标为 900, 600;
            // 把世界坐标转到相对于它的父亲节点的坐标
            var node_pos = this.node.parent.convertToNodeSpaceAR(cc.p(500, 600));
            this.node.setPosition(node_pos); // 相对于this.node.parent这个为参照物,AR为原点的坐标系
            // 获取当前节点的世界坐标;
            this.node.convertToWorldSpaceAR(cc.p(0, 0));

    常用坐标函数

            var pos = new cc.Vec2(100, 100);
            console.log('Vec2 x:%f,y:%f', pos.x, pos.y);
    
            pos = cc.v2(200.45, 200.94);
            console.log('v2 x:%f,y:%f', pos.x, pos.y);
    
            pos = cc.p(300, 300);
            console.log('p x:%f,y:%f', pos.x, pos.y);
    
            var src = cc.p(50, 11);
            var dst = cc.p(100, 100);
            var dir = cc.pSub(dst, src);
    
            var len = cc.pLength(dir);
            console.log('dir.pLength:%f,dir.x:%f,dir.y:%f', len, dir.x,dir.y);
    
            var s = new cc.Size(100, 100);
            console.log('Size x:%f,y:%f,w:%f,h:%f', s.x, s.y, s.width, s.height);
    
            s = cc.size(200, 200);
            console.log('Size x:%f,y:%f,w:%f,h:%f', s.x, s.y, s.width, s.height);
            var r = new cc.Rect(0, 0, 100,100);
            console.log(r);
    
            r = cc.rect(0, 0, 200, 200);
            console.log(r);
            var ret = r.contains(cc.p(300, 300));
            console.log(ret);
            var rhs = cc.rect(100, 100, 100, 100);
            ret = r.intersects(rhs);
            console.log(ret);
    
            // 节点坐标转到屏幕坐标 cc.p(0, 0)
            var pos = this.node.convertToWorldSpace(cc.p(0, 0)); // 左下角为原点的   cc.p(430, 270)
            console.log('x:%f,y:%f',pos.x, pos.y);
            pos = this.node.convertToWorldSpaceAR(cc.p(0, 0)); // 锚点为原点 cc.p(480, 320)
            console.log('x:%f,y:%f', pos.x, pos.y);
            // end 
    
            var pos = cc.p(480, 320);
    
            var node_pos = this.node.convertToNodeSpace(pos);
            console.log('x:%f,y:%f', node_pos.x, node_pos.y); // cc.p(50, 50)
    
            node_pos = this.node.convertToNodeSpaceAR(pos);
            console.log('x:%f,y:%f', node_pos.x, node_pos.y);// cc.p(0, 0)
  • 相关阅读:
    网页效果图设计之色彩索引
    支持树型的GridView控件
    (转)CSS布局参考 IE的If条件注释使用备忘
    firefox与IE对javascript和CSS的区别
    转 CSS半透明滤镜在FIREFOX和IE下面的能够通用的写法
    無法為 SSL/TLS 安全通道建立信任關係,忽略憑証檢查的方式
    临时
    EventUtil
    js测试对象包含特性
    重学概率论的一点点理解(持续更新)
  • 原文地址:https://www.cnblogs.com/he-bo/p/9724767.html
Copyright © 2020-2023  润新知