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)
网友评论