Cocos2d-x :什么是锚点？（简单点说：锚点就是图片的原点）

柔情只为你懂 2022-08-02 16:30 96阅读 0赞

anchor point 究竟是怎么回事？ 之所以造成不容易理解的是因为我们平时看待一个图片是 以图片的中心点 这一个维度来决定图片的位置的。而在cocos2d中决定一个 图片的位置是由两个维度 一个是 position  另外一个是anchor point。只要我们搞清楚他们的关系，自然就迎刃而解。

默认情况下，anchor point在图片的中心位置(0.5, 0.5),取值在0到1之间的好处就是，锚点不会和具体物体的大小耦合，也即不用关注物件大小，而应取其对应比率，如果把锚点改成（0，0），则进行放置位置时，以图片左下角作为起始点。

也就是说，把position设置成(x,y)时，画到屏幕上需要知道：到底图片上的哪个点放在屏幕的（x,y）上，而anchor point就是这个放置的点，anchor point是可以超过图片边界的，比如下例中的（-1,-1）,表示从超出图片左下角一个宽和一个高的地方放置到屏幕的（0,0）位置（向右上偏移10个点才开始到图片的左下角，可以认为向右上偏移了10个点的空白区域）

他们的关系是这样的（假设***actualPosition.x，actualPosition.y是真实图片位置的中点***）:

***actualPosition.x = position.x + width\*(0.5 - anchor\_point.x); acturalPosition.y = position.y + height\*(0.5 - anchor\_point.y)***

actualPosition 是sprite实际上在屏幕显示的位置， poistion是 程序设置的， achor\_point也是程序设置的。

具体看下面的例子一：

**\[html\]**  [view plain][] [copy][view plain]

1.  CCSprite \*sprite = \[CCSprite spritewithFile:@"blackSquare.png"\];  
2.  sprite.position=ccp(0,0);  
3.  sprite.anchorPoint=ccp(0,0);  
4.  \[self addChild:sprite\];

具体效果如下：

![cocos2d anchor point 锚点解析(转)][cocos2d_wbr_anchor_wbr_point_wbr]

根据上面的公式： 假设精灵的width = height = 10.

***actualPosition.x = 0 + 10\*(0.5 - 0) = 5; actualPosition.y  = 0 + 10\*(0.5 - 0) = 5; ***

(5, 5) 这个结果正是现在图片中心的在屏幕上的实际位置。

如果以左下角(Opengl坐标系的原点)为参照，就是把图片的原点锚在了屏幕坐标的原点上

例子 二：

**\[html\]**  [view plain][] [copy][view plain]

1.  CCSprite \*sprite = \[CCSprite spritewithFile:@"blackSquare.png"\];  
2.  sprite.position=ccp(0,0);  
3.  sprite.anchorPoint=ccp(-1,-1);  
4.  \[self addChild:sprite\];

具体效果如下：

![cocos2d anchor point 锚点解析(转)][cocos2d_wbr_anchor_wbr_point_wbr 1]

根据上面的公式： 假设精灵的width = height = 10.

坐标方向是opengl的方向（原点在左下角，x向左，y向上为正）

***actualPosition.x = 0 + 10\*(0.5 - (-1)) = 15; actualPosition.y  = 0 + 10\*(0.5 - (-1)) = 15; ***

(15, 15) 这个结果正是现在图片中心的在屏幕上的实际位置。

如果以左下角(Opengl坐标系的原点)为参照，就是把图片的（-10，-10）这个点锚在了屏幕的原点（即图片的原点锚在了屏幕坐标的（10,10）上）

例子三

**\[html\]**  [view plain][] [copy][view plain]

1.  CCSprite \*sprite = \[CCSprite spritewithFile:@"blackSquare.png"\];  
2.  sprite.anchorPoint=ccp(1,1);  
3.  sprite.position=ccp(sprite.contentSize.width , sprite.contentSize.height);  
4.  \[self addChild:sprite\];

![cocos2d anchor point 锚点解析(转)][cocos2d_wbr_anchor_wbr_point_wbr]

根据上面的公式： 假设精灵的width = height = 10.

***actualPosition.x = 10 + 10\*(0.5 - (1)) = 5; actualPosition.y  = 10 + 10\*(0.5 - (1)) = 5; ***

(5, 5) 这个结果正是现在图片中心的在屏幕上的实际位置。

就是把图片的（10,10）这个点锚在了屏幕坐标的（10,10）上

//-------------------------------------------------------

上面是一篇讲述的比较详细的文章，自己也总结了一下:锚点其实就是图片的原点。如何去理解这一点？假设锚点是（0.5,0.5），也就是图片的中心处，我们将这个点看成图片原点，图片是以这个点位起点的，然后跟position去结合。

如：锚点（0.5 ，0.5）

sprite.position=ccp(0, sprite.contentSize.height/2);

我们将图片的原点（锚点）放到ccp(0, sprite.contentSize.height/2)这个位置，也就是图片在屏幕上的位置。

源引：http://blog.csdn.net/timwolee/article/details/9370917

[view plain]: http://blog.csdn.net/cjopengler/article/details/7045638#
[cocos2d_wbr_anchor_wbr_point_wbr]: /images/20220731/79e288b830ba4439a9eaac34f8e1cd1e.png
[cocos2d_wbr_anchor_wbr_point_wbr 1]: /images/20220731/79533c6667d047f1a57223fd56204237.png