简单地说,若对sprite对象设置轴心点,则对sprite对象设置位置、缩放、旋转时,都会以该轴心点为基准。
即,实际设置的位置、缩放、旋转、都是对轴心点设置相应的位置、缩放、旋转,而不是对sprite对象的左上角设置。
【以实际效果为例说明轴心点】
官网的猴子图:
apesCtn = new Sprite();
Laya.stage.addChild(apesCtn);
var ape = new Sprite();
ape.loadImage("../../res/apes/monkey1.png");
ape.pivot(0,0);
ape.pos(0,0);
apesCtn.addChild(ape);
以上代码将ape轴心点设置为(0,0),设置ape坐标为(0,0),效果如下:
若设置ape的轴心点为(100,100),ape位置为(0,0)
ape.pivot(100,100);
ape.pos(0,0);
得到的效果如下
猴子图并未能显示在stage中,因为根据轴心点的设置,猴子图和stage的位置如下(蓝点为轴心点):
猴子图的轴心点设置为(100,100),再设置位置(0,0),实际上是设置了相对于猴子图(100,100)位置的点 到 stage的(0,0)点;反过来,猴子图位于轴心点的(-100,-100)位置,位于stage以外,自然无法正常显示。
如果想调整位置显示猴子图,按上图位置关系让猴子图位于stage内就可以了。
ape.pivot(100,100);
ape.pos(100,100);
效果如下:
想让猴子图向中心靠,可以将pos的x和y设置更大一些
ape.pivot(100,100);
ape.pos(300,300);
效果如下:
【图示说明】
以下图为例
若设置轴心点x=100,y=100,则轴心点(蓝点)位置如下:
设置的位置、旋转、放缩都是在设置蓝点,如将蓝点放置到stage的(0,0),(99,109)位置。