经常有人问关于LBitmap和LSprite对象如何设置旋转的注册点,就是以哪个点为中心来旋转的问题。
当然,还有缩放也是。
每次都回答同样的问题,是一件很郁闷的事,所以我在这里把这个问题单独拿出来详细讲解一下。
先来看默认情况。
首先是LBitmap,LBitmap默认的旋转是以它自己的中心位置为注册点来旋转的。
当然,这个默认的设置是可以通过rotateCenter来设置的,rotateCenter默认值是true,即沿着中心旋转。
而LBitmap的缩放坐标是以自己本身的起始点为缩放中心的。
效果如下图
如果设置rotateCenter=false;那么效果就变成了下图
对比上图,你会发现,旋转的中心变为了对象的原点坐标,缩放没有影响。
以上效果,可以通过下面的URL测试
http://lufylegend.com/demo/test/42.html
接着,看一下LSprite 对象旋转和缩放的中心坐标
LSPrite对象没有rotateCenter属性,它的旋转中心和缩放中心都是它的起始坐标,效果如图
http://lufylegend.com/demo/test/43.html
那么,如何来设置任意的旋转中心和缩放中心呢?
LBitmap对象和LSprite对象都有rotatex和rotatey两个隐藏属性,下面我只说LSprite,LBitmap同理
如果在旋转和缩放的时候,添加以下设置的话- sprite.rotatex = 50;
- sprite.rotatey = 0;
复制代码 效果如下图
上面的黑点是rotatex和rotatey确定的位置,可以看到,旋转的中心点变为了(rotatex,rotatey),而缩放无影响。
测试连接
http://lufylegend.com/demo/test/44.html
那么如何即设置旋转中心,同时也设置缩放中心呢?
原理就是将这个LBitmap或者LSprite对象A放到另一个LSprite对象B里,然后设置对象A和对象B的相对位置,比如将对象A的坐标设置为(-50,0).
那么,效果如下图
可以看到,无论是旋转还是缩放,中心点都发生了变化,变为了(50,0).
根据这个原理,你可以任意修改这个旋转中心和缩放中心了,
比如将一个LBitmap对象做下面坐标设置 bitmap.x = -bitmap.getWidth()*0.5; bitmap.y = -bitmap.getHeight()*0.5; 这样就可以让对象沿着自己的中心旋转和缩放,下面是效果
测试连接
http://lufylegend.com/demo/test/45.html
你也可以利用这个原理,制作一个钟摆,如下
测试连接
http://lufylegend.com/demo/test/22.html
好了,剩下的就是自由发挥了。 |