【LAYABOX】轴心点的解释说明

来源:互联网 发布:淘宝大马士革刀真假 编辑:程序博客网 时间:2024/05/18 02:37

简单地说,若对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)位置。



原创粉丝点击