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

lufy

经常有人问关于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同理
如果在旋转和缩放的时候，添加以下设置的话

1. sprite.rotatex = 50;
   
2.         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


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

lufy

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

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

lufy

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

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

lufy

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

原理我已经讲的很明白了吧，具体想怎么设置中心点，上面都已经给了方法了

lufy

zb0819 发表于 2018-3-1 16:05
我想要实现的是把画布上的所有元素整体放大或缩小，直接改变scale会导致坐标点出错，有什么好的办法吗？ ...

坐标点出错是指什么？引擎这部分的处理肯定没有bug，最好能举个例子，或者直接把你代码贴出来看看

lufy

zb0819 发表于 2018-3-2 14:23
意思是我需要以画出图形的中心为原点，画出两条类似于x，y轴的坐标线，拖动图形坐标线也跟着移动，现在遇 ...

你可以试着这样做
建立一个LSprite对象A，再在它上面添加一个子对象，比如LSprite对象B
拖拽的时候拖拽对象A，缩放的时候缩放对象B，这样就不会有你说的问题了