锚点的点就是相对于当前层或者Node上面的位置,position的设置点就是在屏幕上的点,合起来就是图片上的某个点(锚点)所在图片上的位置那个点作为图片的一个标志点,而这个标志点与设置在屏幕上某个点position重合。 锚点是定位和变换操作的一个重点。
锚点我们可以看成用一根图钉将一张纸或者相片钉在墙上的那个点。
节点的位置是由我们设置的position和anchor point一起决定的。 值得一提的是,anchor point的默认位置 Layer的是左下,而其他的node是中点。
节点的原点是父节点的左下角。
1 、(1)anchor point的默认位置是 node(例如Sprite)的中心点
Sprite *sp = Sprite::create("HelloWorld.png");
this -> addChild(sp);//默认图片的中心点在屏幕的左下角,也效果相当于sp -> setPosition(0,0);,可以看出锚点的默认值在Sprite(此处即HelloWorld.png)的中心
----------------------------------》》》HelloWorld.png的中心与屏幕的原点重合
(2)、设置node(例如Sprite)的anchor point
Sprite *sp = Sprite::create("HelloWorld.png");
sp -> setAnchorPoint(Point(0,0));
this -> addChild(sp);//设置锚点为Point(0,0)时,HelloWorld.png的左下角与屏幕的原点重合
----------------------------------》》》HelloWorld.png的左下角与屏幕的原点重合
Size visibleSize = Director::getInstance()->getVisibleSize();
Sprite *sp = Sprite::create("HelloWorld.png");
sp -> setAnchorPoint(Point(0,0));
sp ->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this -> addChild(sp);
----------------------------------》》》HelloWorld.png的左下角与屏幕的中心点重合
2 、(1)anchor point的默认位置是 Layer的左下角
Layer* layer1 = LayerColor::create(Color4B(255,0,0,255), 300, 200);
this -> addChild(layer1);//默认图片的左下角与屏幕的左下角重合,也效果相当于sp -> setPosition(0,0);,可以看出锚点的默认值在layer(此处即HelloWorld.png)的左下角
----------------------------------》》》红色区域的左下角与屏幕的原点重合
(2)、设置 Layer的anchor point 但不ignoreAnchorPointForPosition(false)时
Layer* layer1 = LayerColor::create(Color4B(255,0,0,255), 300, 200);
layer1 -> setAnchorPoint(Point(0,0));
this -> addChild(layer1);
----------------------------------》》》红色区域的左下角与屏幕的原点重合
Layer* layer1 = LayerColor::create(Color4B(255,0,0,255), 300, 200);
layer1 -> setAnchorPoint(Point(0,0));
layer1 ->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this -> addChild(layer1);
----------------------------------》》》红色区域的左下角与屏幕的中心点重合
(3)、设置 Layer的anchor point ,同时需要设置ignoreAnchorPointForPosition(false)
Layer和Sprite有不同,layer要设置锚点,必须先:ignoreAnchorPointForPosition(false);
layer1->ignoreAnchorPointForPosition(false);
this -> addChild(layer1);
----------------------------------》》》红色区域的中心与屏幕的原点重合,这样加上layer1->ignoreAnchorPointForPosition(false);后效果就与Node的效果一样了
Layer* layer1 = LayerColor::create(Color4B(255,0,0,255), 300, 200);
layer1->ignoreAnchorPointForPosition(false);
layer1 -> setAnchorPoint(Point(0.5,0));
this -> addChild(layer1);
----------------------------------》》》红色区域的下边框中心与屏幕原点重合
Layer* layer1 = LayerColor::create(Color4B(255,0,0,255), 300, 200);
layer1->ignoreAnchorPointForPosition(false);
layer1 -> setAnchorPoint(Point(0.5,0));
layer1 ->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this -> addChild(layer1);
----------------------------------》》》红色区域的下边框中心与屏幕中心重合
Layer* layer1 = LayerColor::create(Color4B(255,0,0,255), 300, 200);
layer1->ignoreAnchorPointForPosition(false);
layer1 -> setAnchorPoint(Point(0,0.5));
layer1 ->setPosition(Point(visibleSize.width/2,visibleSize.height/2));
this -> addChild(layer1);
----------------------------------》》》红色区域的左边框中心与屏幕中心重合