lufy's legend

标题: 关于对象的旋转中心和缩放中心的设置 [打印本页]

作者: lufy 时间: 2014-7-18 01:00
标题: 关于对象的旋转中心和缩放中心的设置
经常有人问关于LBitmap和LSprite对象如何设置旋转的注册点，就是以哪个点为中心来旋转的问题。
当然，还有缩放也是。
每次都回答同样的问题，是一件很郁闷的事，所以我在这里把这个问题单独拿出来详细讲解一下。

先来看默认情况。
首先是LBitmap，LBitmap默认的旋转是以它自己的中心位置为注册点来旋转的。
当然，这个默认的设置是可以通过rotateCenter来设置的，rotateCenter默认值是true，即沿着中心旋转。
而LBitmap的缩放坐标是以自己本身的起始点为缩放中心的。
效果如下图
スクリーンショット 2014-07-18 1.00.47.png

如果设置rotateCenter=false;那么效果就变成了下图
スクリーンショット 2014-07-18 1.01.02.png

对比上图，你会发现，旋转的中心变为了对象的原点坐标，缩放没有影响。
以上效果，可以通过下面的URL测试
http://lufylegend.com/demo/test/42.html

接着，看一下LSprite 对象旋转和缩放的中心坐标
LSPrite对象没有rotateCenter属性，它的旋转中心和缩放中心都是它的起始坐标，效果如图
スクリーンショット 2014-07-18 1.01.02.png

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）.
那么，效果如下图
スクリーンショット 2014-07-18 1.32.43.png

可以看到，无论是旋转还是缩放，中心点都发生了变化，变为了（50,0）.
根据这个原理，你可以任意修改这个旋转中心和缩放中心了，
比如将一个LBitmap对象做下面坐标设置

bitmap.x = -bitmap.getWidth()*0.5;

bitmap.y = -bitmap.getHeight()*0.5;

这样就可以让对象沿着自己的中心旋转和缩放，下面是效果
スクリーンショット 2014-07-18 1.33.02.png

测试连接
http://lufylegend.com/demo/test/45.html

你也可以利用这个原理，制作一个钟摆，如下
スクリーンショット 2014-07-18 1.58.20.png

测试连接
http://lufylegend.com/demo/test/22.html

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

作者: wfssjily 时间: 2014-10-14 10:20
收藏,透彻!

作者: lift6220819 时间: 2016-1-16 15:38
多谢。很不错

作者: var 时间: 2016-3-1 17:24
本帖最后由 var 于 2016-3-3 01:25 编辑

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

作者: islzc 时间: 2016-6-17 16:47
本帖最后由 islzc 于 2016-6-17 16:49 编辑

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

作者: lufy 时间: 2016-6-17 18:12

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

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

作者: islzc 时间: 2016-6-19 22:58

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

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

作者: lufy 时间: 2016-6-20 01:08

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

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

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

作者: lufy 时间: 2018-3-1 16:00

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

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

作者: zb0819 时间: 2018-3-1 16:05

lufy 发表于 2018-3-1 16:00
原理我已经讲的很明白了吧，具体想怎么设置中心点，上面都已经给了方法了 ...

我想要实现的是把画布上的所有元素整体放大或缩小，直接改变scale会导致坐标点出错，有什么好的办法吗？

作者: lufy 时间: 2018-3-1 20:08

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

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

作者: zb0819 时间: 2018-3-2 14:23

lufy 发表于 2018-3-1 20:08
坐标点出错是指什么？引擎这部分的处理肯定没有bug，最好能举个例子，或者直接把你代码贴出来看看 ...

意思是我需要以画出图形的中心为原点，画出两条类似于x，y轴的坐标线，拖动图形坐标线也跟着移动，现在遇到的问题是图形缩放后，图形的位置改变了，但是图形的中心点还是缩放之前的，就导致x,y轴位置的偏移。

作者: lufy 时间: 2018-3-2 20:23

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

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

欢迎光临 lufy's legend (http://lufylegend.com/forum/)