你的位置:首页 > 网页设计

[网页设计]在Lufylegend中如何设置bitmap或者sprite的缩放和旋转中心


最近两天有个lufylegend游戏引擎群的群友需要做一个项目,其中要解决的需求是:获取照相机拍摄的图片,根据图片的EXIF信息让图片显示为“正常”情况,并且需要给图片添加一些事件侦听。何为正常呢?就是我们拍照的时候,因为横着或者竖着拿相机或者手机拍摄的图片,最终显示出来的时候要是拍摄时候的样子,比如:

“我霉”orz


我就当您是用过lufylegend的道友了。那么我们知道Bitmap这个层的默认旋转中心是其内容中心,也就是:bitmap.getWidth()*0.5,bitmap.getHeight()*0.5,默认的缩放中心则是其左上角。

Sprite层的默认旋转中心和默认缩放中心都是左上角,如:

如图所示:

Bitmap和Sprite缩放中心是左上角,往右下角这个方向进行变形;

Bitmap的旋转中心则是内容中心,如图,其围绕着一个圆心旋转各个点则在外接圆上;

Sprite旋转中心还是左上角,所以其旋转的时候则是在那个大圆上;

那么,如果我们需要一个Bitmap或者Sprite不管旋转或者缩放都是其内容中心的时候,怎么做呢?

答案就是:将上面两种情况结合起来,组成一个新的层即可,原理也非常简单,如下:

代码是这样的:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>rotateAndScale</title></head><body>  <div id="mylegend"></div>  <script src="../lufylegend-1.9.10.min.js"></script>  <script type="text/javascript">init(80,"mylegend",600,480,main);var loader;function main(){  loader = new LLoader();  loader.addEventListener(LEvent.COMPLETE,loadbitmapdata);  //加载一张图片,你可以替换为自己的图片  loader.load("./images/backG.png",'bitmapData');}function loadbitmapdata(event){  //将图片转为bitmapdata对象,当然你也可以用一个纯色的色块来做试验  //但是纯色色块的话,请注意LBitmapData("#ff0000",20,20,100,100)  //得到的色块大小是80*80的,而如果是图片的话则是100*100的  //具体为什么会有差异呢 请看引擎源码...  var bmd = new LBitmapData(event.target,0,0,200,200);  var bm = new LBitmap(bmd);  var sp = new LSprite();  //将我们要旋转或者缩放的目标按照如下进行位移  //则该对象会将其内容的中心移到我们给其包裹对象LSprite的左上角  bm.x = -bm.getWidth()*0.5;  bm.y = -bm.getHeight()*0.5;  //包裹目标对象的层可以设置任何一点为最终的缩放旋转中心  //此处设置为整个画布的中心  sp.x = LGlobal.width/2;  sp.y = LGlobal.height/2;  //添加进Canvas  sp.addChild(bm);    addChild(sp);  //做一个动画来观看实际效果  var i=0,j=1;  setInterval(function(){    sp.rotate = i++;    sp.scaleX += 0.01;    sp.scaleY += 0.01;  },50)  //再画一个圆心来作为参照  var ppp = new LSprite();  ppp.graphics.drawArc(1,"#000000",[300, 240, 10, 0, 2*Math.PI], true);  addChild(ppp);}  </script></body></html>

其实上面的东西,引擎作者Lufy已经在这里讲明白了:关于对象的旋转中心和缩放中心的设置

因为其中的内容图片不知道是什么原因(服务器在日本),没有显示出来,而且Lufy的例子写得也太麻烦了,反倒不容易看清楚为什么...

所以将这个原理写在这里,仅供小伙伴们参考!o(∩_∩)o 

最后再恭喜Lufylegend HTML5游戏引擎刚刚发布新版本:1.9.11