最近两天有个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

在Lufylegend中如何设置bitmap或者sprite的缩放和旋转中心的更多相关文章

  1. [2011-3-9 12:59 ]As3.0中的位图(Bitmap/BitmapData)用法

    1.位图使用(模糊)滤镜 //创建一个矩形区域的BitmapData var bmd:BitmapData = new BitmapData(80, 30, false, 0xefefef); //画 ...

  2. SSIS变量属性中EvaluateAsExpression设置的作用

    我们在做SqlServer SSIS包开发的时候,经常会用到SSIS的变量,我们可以使用和修改SSIS变量的值使得SSIS包的逻辑更灵活,如下图所示: 在定义SSIS变量的时候可以使用固定值(如上图中 ...

  3. myeclipse中UTF-8设置

      myeclipse中UTF-8设置 如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码.然而,Eclipse工作空间(workspace ...

  4. Android 中布局设置导致的TextView不显示的问题

    将TextView放入TableLayout中,设置TextView的Layout Witdh/Layout Height 为Wrap Content或其他大小,导致TextView内容无法显示,改为 ...

  5. Android中如何设置RadioButton在文字的右边,图标在左边

    from:http://blog.csdn.net/sunnyfans/article/details/7901592?utm_source=tuicool&utm_medium=referr ...

  6. MVC中如何设置路由指定默认页

    MVC中怎么设置默认页,在webform中 只要右键设置起始页就可以,但MVC中却没有这个功能,其实MVC更简单 如下: Login是控制器,Index 是动作 在全局Global.asax中改动下即 ...

  7. Quartz在Spring中动态设置cronExpression (spring设置动态定时任务)

    什么是动态定时任务:是由客户制定生成的,服务端只知道该去执行什么任务,但任务的定时是不确定的(是由客户制定).      这样总不能修改配置文件每定制个定时任务就增加一个trigger吧,即便允许客户 ...

  8. iOS开发--应用设置及用户默认设置【2、读取应用中的设置】

            在上一节中,我们通过探讨应用的系统设置的基本功能,了解运用bundle捆绑包以及plist文件的基本开发.用户能够使用设置应用来声明他们的偏好设置,那么我们怎样去调用用户所设置的参数呢 ...

  9. LR中日志设置和日志函数

    LR中日志参数的设置与使用 1.Run-Time Setting日志参数的设置 在loadrunner的vuser菜单下的Run-Time Setting的General的LOG选项中可以对在执行脚本 ...

随机推荐

  1. Linux查看系统资源占用

    Linux查看系统资源占用 在系统维护的过程中,随时可能有需要查看 CPU和内存的使用率,并根据相应信息分析系统状况的需求.本文介绍一下几种常见的Linux系统资源查看命令. 1.总体内存占用的查看 ...

  2. Java8新特性

    Java8新特性 Java8主要的新特性涵盖:函数式接口.Lambda 表达式.集合的流式操作.注解的更新.安全性的增强.IO\NIO 的改进.完善的全球化功能等. 1.函数式接口 Java 8 引入 ...

  3. python 分支 循环

    一  python 知识点      1.变量(标签):           a(变量名) = '字符串'or 数字 (整形和浮点型)     a相当于变量名的标签           如: a = ...

  4. Linux内核之mmc子系统-sdio

    现在的Linux内核中,mmc不仅是一个驱动,而是一个子系统.这里通过分析Linux3.2.0内核,结合TI的arm335x平台及omap_hsmmcd host分析下mmc子系统,重点关注sdio及 ...

  5. UVa 993: Product of digits

    这道题很简单.先将N用2,3,5,7(即10以内的素数)分解因数(需要先特殊判断N不为1),然后将可以合并的因数合并(如2*2合并成4,)这样求得的结果位数会减少,大小肯定会小一些.具体实现见代码. ...

  6. IntelliJ Idea 常用快捷键列表(精简版)

    查找快捷键: Ctrl+N 查找类 Ctrl+shift+N 查找文件 Ctrl+B 找变量来源 Ctrl+E 最近打开的文件 Ctrl+Alt+B 选中方法的实现 Ctrl+F7  选中方法(属性. ...

  7. Java 8 被动迭代式特性介绍(转自IBM)

    编程语言一般都需要提供一种机制用来遍历软件对象的集合,现代的编程语言支持更为复杂的数据结构,如列表.集合.映射和数组.遍历能力是通过公共方法提供,而内部细节都隐藏在类的私有部分,所以程序员不需要了解其 ...

  8. php 两个数组是否相同,并且输出全面的数据,相同的加一个字段标示

    方法一: $date是数组,数组中有字段id,name; $data1是数组,数组中有字段sort_id,name; 所以要通过$date[$i]['id']==$data1[$j]['sort_id ...

  9. tcpdump 命令行抓包工具

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3898248.html ...

  10. 关于this 的一个问题

    var name = "the window"; var object = { name:"my object"; getName:function(){ re ...