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