cocos2d anchor point 錨點解析(轉)

iteye_21202發表於2013-06-06

anchor point 究竟是怎麼回事？ 之所以造成不容易理解的是因為我們平時看待一個圖片是 以圖片的中心點 這一個維度來決定圖片的位置的。而在cocos2d中決定一個 圖片的位置是由兩個維度 一個是 position 也就是圖片的中心點 另外一個是anchor point。只要我們搞清楚他們的關係，自然就迎刃而解。

他們的關係是這樣的:<wbr></wbr>

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也是程式設定的。


具體看下面的例子一：

<wbr></wbr>

[html]<wbr><a href="http://blog.csdn.net/cjopengler/article/details/7045638#" title="view plain" style="text-decoration:none; color:rgb(62,115,160)">view plain</a><a href="http://blog.csdn.net/cjopengler/article/details/7045638#" title="copy" style="text-decoration:none; color:rgb(62,115,160)">copy</a> <div style="position:absolute; left:383px; top:680px; width:18px; height:18px; z-index:99"> </div> </wbr>
  1. CCSprite<wbr>*</wbr>sprite<wbr>=<wbr>[CCSprite<wbr>spritewithFile:@"blackSquare.png"];<wbr><wbr></wbr></wbr></wbr></wbr></wbr>
  2. sprite.position=ccp(0,0);<wbr><wbr></wbr></wbr>
  3. sprite.anchorPoint=ccp(0,0);<wbr><wbr></wbr></wbr>
  4. [self<wbr>addChild:sprite];<wbr><wbr></wbr></wbr></wbr>

具體效果如下：


根據上面的公式： 假設精靈的width = height = 10.

actualPosition.x = 0 + 10*(0.5 - 0) = 5; actualPosition.y <wbr>= 0 + 10*(0.5 - 0) = 5;<wbr></wbr></wbr>

(5, 5) 這個結果正是現在圖片的在螢幕上的實際位置。


例子 二：

<wbr></wbr>

[html]<wbr><a href="http://blog.csdn.net/cjopengler/article/details/7045638#" title="view plain" style="text-decoration:none; color:rgb(62,115,160)">view plain</a><a href="http://blog.csdn.net/cjopengler/article/details/7045638#" title="copy" style="text-decoration:none; color:rgb(62,115,160)">copy</a> <div style="position:absolute; left:383px; top:1163px; width:18px; height:18px; z-index:99"> </div> </wbr>
  1. CCSprite<wbr>*</wbr>sprite<wbr>=<wbr>[CCSprite<wbr>spritewithFile:@"blackSquare.png"];<wbr><wbr></wbr></wbr></wbr></wbr></wbr>
  2. sprite.position=ccp(0,0);<wbr><wbr></wbr></wbr>
  3. sprite.anchorPoint=ccp(-1,-1);<wbr><wbr></wbr></wbr>
  4. [self<wbr>addChild:sprite];<wbr><wbr></wbr></wbr></wbr>

具體效果如下：


<wbr></wbr>

根據上面的公式： 假設精靈的width = height = 10.

actualPosition.x = 0 + 10*(0.5 - (-1)) = 15; actualPosition.y <wbr>= 0 + 10*(0.5 - (-1)) = 15;<wbr></wbr></wbr>

(15, 15) 這個結果正是現在圖片的在螢幕上的實際位置。


例子三

<wbr></wbr>

[html]<wbr><a href="http://blog.csdn.net/cjopengler/article/details/7045638#" title="view plain" style="text-decoration:none; color:rgb(62,115,160)">view plain</a><a href="http://blog.csdn.net/cjopengler/article/details/7045638#" title="copy" style="text-decoration:none; color:rgb(62,115,160)">copy</a> <div style="position:absolute; left:383px; top:1692px; width:18px; height:18px; z-index:99"> </div> </wbr>
  1. CCSprite<wbr>*</wbr>sprite<wbr>=<wbr>[CCSprite<wbr>spritewithFile:@"blackSquare.png"];<wbr><wbr></wbr></wbr></wbr></wbr></wbr>
  2. sprite.anchorPoint=ccp(1,1);<wbr><wbr></wbr></wbr>
  3. sprite.position=ccp(sprite.contentSize.width<wbr>,<wbr>sprite.contentSize.height);<wbr><wbr></wbr></wbr></wbr></wbr>
  4. [self<wbr>addChild:sprite];<wbr><wbr></wbr></wbr></wbr>


根據上面的公式： 假設精靈的width = height = 10.

actualPosition.x = 10 + 10*(0.5 - (1)) = 5; actualPosition.y <wbr>= 10 + 10*(0.5 - (1)) = 5;<wbr></wbr></wbr>

(5, 5) 這個結果正是現在圖片的在螢幕上的實際位置。


轉載自：http://blog.sina.com.cn/s/blog_4ab2f5c8010146xg.html

相關文章