Cocos2d-x从入门到精通第11课《锚点概念的理解》

锚点的简介

视频教程地址：http://edu.csdn.net/course/detail/1342/20988?auto_start=1

锚点是定位和变换操作的一个重点，也是我们学习cocos2d-x的一个难点。

锚点我们可以看成将一张纸用一个图钉定在墙上，而图钉订在纸上的位置就是这张纸的锚点。要注意的是，锚点默认的位置在Layer中（以后章节我们会进行讲解）是左下角(0,0)，而其他的节点对象都是中点(0.5,0.5)。

设置锚点的方法为：

setAnchorPoint(Vec2(0.5,5));

锚点就是所有旋转，移动，缩放的参考点。锚点用节点本身的比例来表示，范围是0-1，(0,0)点代表坐下点，(1,1)代表右上点。

通过代码来描述锚点

下面我们通过两个例子来理解一下锚点的概念和使用。

首先我们通过对sprite(火云开发课堂的logo)进行旋转，在不同的锚点设置下的效果显示来认识一下锚点的不同带来的不同效果。

在进行旋转之前我们先来看一下，未旋转之前sprite(火云开发课堂的logo)的显示效果，如下图：

然后我们把sprite的锚点设置为(0.5,0.5)，进行旋转60度，代码和显示效果图如下：

我们可以看到，sprite(火云开发课堂的logo)以中间为锚点按顺时针方向旋转了60°，接下来，我们把锚点设置为(0,0)，进行60°的旋转，代码和效果图如下：

我们可以看到由于锚点的不同旋转的效果很不一样，当锚点为(0,0)的时候，旋转是以sprite(火云开发课堂的logo)的左下角为参考点进行的旋转，而锚点为(0.5,0.5)的为锚点进行旋转的时候，就以sprite(火云开发课堂的logo)的中点为参考点进行旋转。

下面我们再从sprite锚点对其position的影响来理解一下锚点。

首先我们把锚点设置为(0.5,0.5)，代码如效果图如下：

我们可以看出在锚点为(0.5,0.5)的情况下我们把坐标设置为(500,400)之后的显示位置大概在屏幕的中间。

现在我们把sprite的锚点设置为(0,0)我们来看一下显示的效果，如图：

我们可以看到当把锚点设置为(0,0)的时候，在sprite(火云开发课堂的logo)的位置并没有发生改变的情况下，该sprite(火云开发课堂的logo)的显示位置向上和向右移动了一些距离，该距离就是图片宽高的一半，这是为什么呢，因为锚点的从（0.5,0.5)变成了（0,0)，也就是说我们位置的参考点从sprite(火云开发课堂的logo)的中间，移动到了sprite(火云开发课堂的logo)的左下角，所以就造成了sprite(火云开发课堂的logo)的位置进行了上移和右移，现在我们可以把sprite当成一个定在黑板上的照片，我们要把该照片订在黑板的正中间，如果是我们钉的位置是在照片的中间和订的位置是照片的左下角，那么在我们定好之后观察就会发现，效果是不同的，和我们上面的例子的显示也是大同小异的。

通过上面的例子，同学们是否对锚点有了跟深刻的理解。由于锚点在cocos2d-x中占有重要的位置，希望好好理解和认识锚点，认真完成我们本节课后作业可以让你更好的理解锚点哦。

原文地址：https://www.jb51.cc/cocos2dx/341471.html