一、锚点的理解
以下理解均为本人自己琢磨出来的,如有错误或不懂的地方,请大家指出,我会一一改正.
1、原点概念
在平面坐标系中,一个长方形规则物体,应该含有最基本的rect属性,即(x, y, width, height),则(x, y)为原点,(width, height)为size.
2、锚点概念
锚点属性(anchorX, anchorY),参数范围(0, 1);简单来说,设置锚点即设置对象在父视图中的原点的位置所在,一般对象默认锚点为(0, 0),即对象的左下角为对象的原点.
二、举例分析
在cocos2d中,每个节点都是一个二维的形状或物体。相应的,他也有自己的(x, y, width, height)。一般情况下,默认节点左下角为物体的坐标原点,但是,有时候,这样子处理有些物体并不方便。
简单的做一个例子,这里假设没有锚点的概念或假设锚点为(0, 0):
1.一个图片,位于界面右下角,给他做一个放大缩小的动画;
//创建图片
var sprite = new CustomSprite(res.HelloWorld_png);
//设置坐标
sprite.attr({
x: 0,
y: 0,
anchorX: 0,
anchorY: 0
});
//添加
this.addChild(sprite);
//设置动画,也可以直接设置:: sprite.setScale(1.5, 1.5);
var scale = cc.scaleBy(1.5, 1.5);
var reverse = scale.reverse();
var sequence = cc.sequence(scale, reverse);
//运行动画
sprite.runAction(sequence);
2.一个图片,位于界面左上角,也给他做一个放大缩小的动画;
//屏幕大小
var size = cc.winSize;
//创建图片
var sprite1 = new CustomSprite(res.HelloWorld_png);
//设置坐标
sprite1.attr({
x: size.width - sprite1.width,
y: size.height - sprite1.height,
anchorX: 0,
anchorY: 0
});
//添加
this.addChild(sprite1);
//设置动画,也可以直接设置:: sprite1.setScale(1.5, 1.5);
var scale = cc.scaleBy(1.5, 1.5);
var reverse = scale.reverse();
var sequence = cc.sequence(scale, reverse);
//运行动画
sprite1.runAction(sequence);
你会发现,放大以后图片2有一部分超出界面,并没有展示出来,而图片1则完全展示出来了,我们知道是因为他们的图片原点位于左下角的原因,那么我们如果想要图片2可以和图片1一样完全展示出来的话,我们会发现非常麻烦。
这时候我们可以引入锚点的概念,将图片2的锚点设置为(1, 1),即设置图片2的原点位置设置为右上角.代码如下
//屏幕大小
var size = cc.winSize;
//创建图片
var sprite1 = new CustomSprite(res.HelloWorld_png);
//设置坐标
sprite1.attr({
x: size.width,//坐标原点变成右上角
y: size.height,
anchorX: 1,//设置x方向的锚点为1
anchorY: 1//设置y方向的锚点为1
});
//添加
this.addChild(sprite1);
//设置动画,也可以直接设置:: sprite1.setScale(1.5, 1.5);
var scale = cc.scaleBy(1.5, 1.5);
var reverse = scale.reverse();
var sequence = cc.sequence(scale, reverse);
//运行动画
sprite1.runAction(sequence);
再次观察你会发现都能正常显示。这就是锚点的作用了。
先写这么多以后有新内容继续补充
有点乱,大家可以忽略
锚点的来由,我的理解,一个节点,在2d中,一般来说是一个有形状的东西,一般表现为(x, y, width, height),这时候有一个问题,这个节点,在对外表现的时候,需要给出自己的位置,即节点在二维坐标中的横纵坐标(x, y), 那么一个物体,他不是一个点,他是有范围的东西,我怎么来像一维的点一样来表现出来他的具体位置呢,那我们来约定俗成一个规矩,我们规定物体的左下角为他的坐标位置(x, y),从左到右为width,从下到上为height.这就是一般的物体在二维中的位置表示。然后有人不甘寂寞,说我不要用左下角,我要用右上角,有人说我要用中心点,这时候问题就出来了,我们不能准确的设置物体的坐标,所以锚点的概念就出来了,我们规定一个二维物体,他有锚点属性(anchorX, anchorY),anchorX和anchorY的范围从0到1,从左下角到右上角按比例递增,规定左下角的锚点为(0, 0), 中心点的锚点为(0.5, 0.5),右上角的锚点为(1, 1).