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

时间 2019-12-09

标签 lufylegend 如何设置 bitmap 或者 sprite 缩放旋转中心繁體版

原文原文链接

最近两天有个lufylegend游戏引擎群的群友须要作一个项目，其中要解决的需求是：获取照相机拍摄的图片，根据图片的EXIF信息让图片显示为“正常”状况，而且须要给图片添加一些事件侦听。何为正常呢？就是咱们拍照的时候，由于横着或者竖着拿相机或者手机拍摄的图片，最终显示出来的时候要是拍摄时候的样子，好比：javascript

“我霉”orzphp

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

Sprite层的默认旋转中心和默认缩放中心都是左上角，如：java

如图所示：api

Bitmap和Sprite缩放中心是左上角，往右下角这个方向进行变形；服务器

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

Sprite旋转中心仍是左上角，因此其旋转的时候则是在那个大圆上；spa

那么，若是咱们须要一个Bitmap或者Sprite无论旋转或者缩放都是其内容中心的时候，怎么作呢？3d

答案就是：将上面两种状况结合起来，组成一个新的层便可，原理也很是简单，以下：code

代码是这样的：

<!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