lufy 发表于 2014-7-18 01:00:19

关于对象的旋转中心和缩放中心的设置

经常有人问关于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


好了，剩下的就是自由发挥了。

wfssjily 发表于 2014-10-14 10:20:16

收藏,透彻!

lift6220819 发表于 2016-1-16 15:38:08

多谢。很不错

var 发表于 2016-3-1 17:24:22

本帖最后由 var 于 2016-3-3 01:25 编辑

我早期使用的负数，负一倍的距离就可以在中心，后来这种选择的东西过多，多设置负数会导致后期操作的一些计算变的复杂
就将物件设置被静态刚体，使用的box2d的setAngle :'(

islzc 发表于 2016-6-17 16:47:52

本帖最后由 islzc 于 2016-6-17 16:49 编辑

你好我想问一下我设置了Lsprite的旋转点rotatex,rotatey点在中心,围绕着中心旋转  Lsprite是绑定的点击事件的,旋转后点击图层所在的位置却获取的不是图层本身了

lufy 发表于 2016-6-17 18:12:28

islzc 发表于 2016-6-17 16:47 static/image/common/back.gif
你好我想问一下我设置了Lsprite的旋转点rotatex,rotatey点在中心,围绕着中心旋转  Lsprite是绑定的点击事件 ...

用上面介绍的最后一种方式来做就可以了

islzc 发表于 2016-6-19 22:58:20

lufy 发表于 2016-6-17 18:12 static/image/common/back.gif
用上面介绍的最后一种方式来做就可以了

可能我说的不够清楚,我的意思是围绕着中心旋转已经实现(实现的方式是改变他的rotatex,rotatey)到图层的中心,但是旋转过后,但问题是图层所绑定的点击事件没有办法在旋转后的区域抓取到改图层了  就是说实际点击区域跟改变了旋转中心后的区域不相符

lufy 发表于 2016-6-20 01:08:18

islzc 发表于 2016-6-19 22:58 static/image/common/back.gif
可能我说的不够清楚,我的意思是围绕着中心旋转已经实现(实现的方式是改变他的rotatex,rotatey)到图层的中 ...

我知道你的意思，我说的就是解决办法，用最后一种方法来设置中心点就能解决你的问题

zb0819 发表于 2018-3-1 14:15:00

直接缩放或平移画布之后所有的坐标点都会偏移，是不是因为中心点的问题？有没有更好的办法缩放和平移画布保证坐标点不变？

lufy 发表于 2018-3-1 16:00:00

zb0819 发表于 2018-3-1 14:15 static/image/common/back.gif
直接缩放或平移画布之后所有的坐标点都会偏移，是不是因为中心点的问题？有没有更好的办法缩放和平移画布保 ...

原理我已经讲的很明白了吧，具体想怎么设置中心点，上面都已经给了方法了
页: [1] 2
查看完整版本: 关于对象的旋转中心和缩放中心的设置