HTML5技术

在Lufylegend中如何设置bitmap或者sprite的缩放和旋转中心 - 哥德

字号+ 作者:H5之家 来源:博客园 2015-09-25 09:05 我要评论( )

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

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

“我霉”orz

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

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

如图所示:

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

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

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

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

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

代码是这样的:

rotateAndScale init(,main); var loader; function main(){ loader = new LLoader(); loader.addEventListener(LEvent.COMPLETE,loadbitmapdata); ); } function loadbitmapdata(event){ ); LBitmap(bmd); LSprite(); ; bm.y ; sp.addChild(bm); addChild(sp); ; setInterval(function(){ sp.rotate ; sp.scaleX += 0.01; sp.scaleY += 0.01; },50) LSprite(); ppp.graphics.drawArc(); addChild(ppp); }

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

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

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

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

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 如何快速处理线上故障 - 倒骑的驴

    如何快速处理线上故障 - 倒骑的驴

    2017-05-02 12:01

  • 如何在 ASP.NET Core 中发送邮件 - Savorboard

    如何在 ASP.NET Core 中发送邮件 - Savorboard

    2017-05-02 08:02

  • 对于Bootstrap的介绍以及如何使用 - novai-L

    对于Bootstrap的介绍以及如何使用 - novai-L

    2017-04-29 09:00

  • 谈一下我们是如何开展code review的 - HarlanC

    谈一下我们是如何开展code review的 - HarlanC

    2017-04-27 15:03

网友点评
a