Cocos中锚点与位置的关系

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

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

也就是说,把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 plaincopy
  1. CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];  
  2. sprite.position=ccp(0,0);  
  3. sprite.anchorPoint=ccp(0,0);  
  4. [self addChild:sprite];  

具体效果如下:


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

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

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

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


例子 二:

 

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

具体效果如下:


 

根据上面的公式: 假设精灵的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 plaincopy
  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];  


根据上面的公式: 假设精灵的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)上



-----------------------------------------------------------------

总结一下, 我们把计算式子转换一下,

actualPosition.x  - position.x =  width*0.5  - anchor_point.x*width; 
acturalPosition.y - position.y =  height*0.5 - anchor_point.y*height;
actualPosition是实际屏幕坐标系的坐标, position是我们代码设置的坐标.
而 width*0.5 和 height*0.5其实就是图片的中心点.
这样看两边,其实就等于说是position 相对于 actualPosition的平移, 就是锚点相对于图片中心的平移.
我们把actualPosition标记为原点(0,0), 那 position 就是相对于原点的平移量, 变换可得:
position.x =  anchor_point.x*width -  width*0.5; 
position.y =  anchor_point.y*height - height*0.5;

也就是说锚点, 本质就是一个图片中心点平移比例值而已. 
它是一个平移比率值, 究竟平移多少, 和图片具体的 size 相关.


展开阅读全文

没有更多推荐了,返回首页