錨點(diǎn)的定義

錨點(diǎn)是指節(jié)點(diǎn)在進(jìn)行形狀變換、位置變動(dòng)時(shí)依據(jù)的基準(zhǔn)點(diǎn)?？梢韵胂鬄獒斣趬ι嫌糜诠潭垙埖男D釘，或者公告欄上用于固定紙張用的圍棋狀的小磁粒。當(dāng)對(duì)某個(gè)節(jié)點(diǎn)調(diào)用setPosition時(shí)，cocos2d-x即會(huì)將其錨點(diǎn)移動(dòng)到相應(yīng)位置；當(dāng)對(duì)節(jié)點(diǎn)進(jìn)行rotate操作時(shí)，節(jié)點(diǎn)也是以錨點(diǎn)所在位置為軸心進(jìn)行旋轉(zhuǎn)的。具體的定義看CCNode.h中的setAnchorPoint說明：
* anchorPoint is the point around which all transformations and positioning manipulations take place.
* It's like a pin in the node where it is "attached" to its parent.

錨點(diǎn)的特征

在cocos2d-x中，錨點(diǎn)是向量化后的點(diǎn)，比如某個(gè)480x320的節(jié)點(diǎn)，錨點(diǎn)(0,0)在其左下角，錨點(diǎn)(1,1)在其右上角即(480,320)的位置，錨點(diǎn)(0.5,0.5)位于其中點(diǎn)處。注意，錨點(diǎn)可以大于(1,1)或者小于(0,0)，這在后面將會(huì)給出演示。
* The anchorPoint is normalized, like a percentage. (0,0) means the bottom-left corner and (1,1) means the top-right corner.
* But you can use values higher than (1,1) and lower than (0,0) too.

錨點(diǎn)的默認(rèn)值

CCNode：- anchorPoint: (x=0,y=0) -m_bIgnoreAnchorPointForPosition(false)
CCScene/CCLayer/CCSprite：-setAnchorPoint( ccp(0.5f, 0.5f) ) -ignoreAnchorPointForPosition(true) (在相應(yīng)的構(gòu)造函數(shù)中可以看到)

注意：上面提到，設(shè)置節(jié)點(diǎn)位置時(shí)其實(shí)是將其錨點(diǎn)移動(dòng)到指定位置，這有個(gè)前提，就是CCNode的m_bIgnoreAnchorPointForPosition成員必須為false，它是告訴標(biāo)志節(jié)點(diǎn)移動(dòng)時(shí)是否忽略錨點(diǎn)的標(biāo)志。在cocos2d-x中，CCNode/CCSprite將其默認(rèn)為false，而CCScene/CCLayer則默認(rèn)為true，因此，若要使CCScene或者CCLayer根據(jù)錨點(diǎn)來移動(dòng)，則要首先調(diào)用CCNode::ignoreAnchorPointForPosition(false)

錨點(diǎn)實(shí)例一：精靈的錨點(diǎn)

以下分別演示對(duì)精靈進(jìn)行變換操作(transformation/position)時(shí)，錨點(diǎn)起到的作用

設(shè)置位置

// on "init" you need to initialize your instance
bool HelloWorld::init()
{//// 1. super init firstif ( !CCLayer::init() ){return false;}CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();CCSprite* sprite1 = CCSprite::create("CloseNormal.png");sprite1->setAnchorPoint( ccp(0,0) );sprite1->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite1);CCSprite* sprite2 = CCSprite::create("CloseNormal.png");sprite2->setAnchorPoint( ccp(1,0) );sprite2->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite2);CCSprite* sprite3 = CCSprite::create("CloseNormal.png");sprite3->setAnchorPoint( ccp(1,1) );sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite3);CCSprite* sprite4 = CCSprite::create("CloseNormal.png");sprite4->setAnchorPoint( ccp(0,1) );sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite4);CCSprite* sprite5 = CCSprite::create("CloseNormal.png");sprite5->setAnchorPoint( ccp(0.5,0.5) );sprite5->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite5);return true;
}

運(yùn)行結(jié)果：

設(shè)置伸縮

bool HelloWorld::init()
{//// 1. super init firstif ( !CCLayer::init() ){return false;}CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();// 錨點(diǎn)(1,1)CCSprite* sprite1 = CCSprite::create("CloseNormal.png");sprite1->setAnchorPoint( ccp(1,1) );sprite1->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite1);// 錨點(diǎn)、位置與sprite1相同，X軸以錨點(diǎn)為基點(diǎn)伸縮5.0倍CCSprite* sprite2 = CCSprite::create("CloseNormal.png");sprite2->setAnchorPoint( ccp(1,1) );sprite2->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite2);sprite2->setScaleX(5.0f);// 錨點(diǎn)(0,0)CCSprite* sprite3 = CCSprite::create("CloseNormal.png");sprite3->setAnchorPoint( ccp(0,0) );sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite3);// 錨點(diǎn)、位置與sprite3相同，X軸以錨點(diǎn)為基點(diǎn)伸縮5.0倍CCSprite* sprite4 = CCSprite::create("CloseNormal.png");sprite4->setAnchorPoint( ccp(0,0) );sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite4);sprite4->setScaleX(5.0f);return true;
}

運(yùn)行結(jié)果

設(shè)置旋轉(zhuǎn)

bool HelloWorld::init()
{//// 1. super init firstif ( !CCLayer::init() ){return false;}CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();// 錨點(diǎn)(0,0)CCSprite* sprite3 = CCSprite::create("CloseNormal.png");sprite3->setAnchorPoint( ccp(0,0) );sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite3);// 錨點(diǎn)、位置與sprite3相同，X軸以錨點(diǎn)為軸順時(shí)針旋轉(zhuǎn)90°CCSprite* sprite4 = CCSprite::create("CloseNormal.png");sprite4->setAnchorPoint( ccp(0,0) );sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite4);sprite4->setRotation(90);	// 順時(shí)針旋轉(zhuǎn)90°return true;
}

運(yùn)行結(jié)果

設(shè)置彎曲

bool HelloWorld::init()
{//// 1. super init firstif ( !CCLayer::init() ){return false;}CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();// 錨點(diǎn)(0,0)CCSprite* sprite3 = CCSprite::create("CloseNormal.png");sprite3->setAnchorPoint( ccp(0,0) );sprite3->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite3);// 錨點(diǎn)、位置與sprite3相同，以錨點(diǎn)為固定點(diǎn)，X軸向右彎曲45°CCSprite* sprite4 = CCSprite::create("CloseNormal.png");sprite4->setAnchorPoint( ccp(0,0) );sprite4->setPosition(ccp(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2));this->addChild(sprite4);sprite4->setSkewX(45);return true;
}

運(yùn)行結(jié)果

錨點(diǎn)實(shí)例二：層的錨點(diǎn)

cocos2d-x中對(duì)CCLayer對(duì)象setPosition時(shí)，若希望以錨點(diǎn)為基點(diǎn)，則需要開啟bIgnoreAnchorPointForPosition標(biāo)志，否則setPosition時(shí)不考慮錨點(diǎn)因素。

設(shè)置位置

bool HelloWorld::init()
{//// 1. super init firstif ( !CCLayer::init() ){return false;}CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();// 創(chuàng)建一個(gè)綠色層CCLayerColor* layer1 = CCLayerColor::create(ccc4(0,255,0,255), 100, 50);layer1->setAnchorPoint( ccp(0.5,0.5) );	// 設(shè)置錨點(diǎn)為中點(diǎn)// layer->ignoreAnchorPointForPosition(false);layer1->setPosition(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2);	// 移動(dòng)到窗口中點(diǎn)this->addChild(layer1);// 創(chuàng)建一個(gè)黃色層CCLayerColor* layer2 = CCLayerColor::create(ccc4(255,255,0,255), 100, 50);layer2->setAnchorPoint( ccp(0.5,0.5) );	// 設(shè)置錨點(diǎn)為中點(diǎn)layer2->ignoreAnchorPointForPosition(false);layer2->setPosition(origin.x+visibleSize.width/2, origin.y+visibleSize.height/2);	// 移動(dòng)到窗口中點(diǎn)this->addChild(layer2);return true;
}

運(yùn)行結(jié)果

參考資料

1. cocos2d-x AnchorPoint錨點(diǎn)

2. CSS3中的transform變形詳解