cocos2d-js 锚点

一、锚点的理解

以下理解均为本人自己琢磨出来的，如有错误或不懂的地方，请大家指出,我会一一改正.

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).