[Egret學習筆記 七]使用skewX skewY實作圖檔翻轉效果

其中顯示區域，使用了 Wing  UI布局，關于Wing UI布局使用說明請看egret官網教程  

http://bbs.egret-labs.org/thread-1888-1-1.html

皮膚 GamePanelSkin.exml 如下：

<?xml version='1.0' encoding='utf-8'?>

<e:Skin width="484" height="410" xmlns:e="http://ns.egret-labs.org/egret" xmlns:w="http://ns.egret-labs.org/wing">

<w:HostComponent name="egret.gui.SkinnableComponent"/>

<w:Declarations/>

<e:states>

<e:State name="normal"/>

<e:State name="disabled"/>

</e:states>

<e:HSlider width="180" id="hslider" x="163" y="352"/>

<e:VSlider height="180" id="vslider" x="50" y="90"/>

<e:UIAsset id="asset" width="179" height="154" x="247" y="139"/> <!--圖檔-->

<e:Label id="label" x="64" y="15" width="338" height="54"/>

</e:Skin>

邏輯代碼如下：

class GamePanel extends egret.gui.SkinnableComponent{

    public constructor(){
        super();
        this.skinName = skins.mySkin.GamePanelSkin;
    }

    //垂直滑條
    public vslider:egret.gui.VSlider;
    //水準滑條
    public hslider:egret.gui.HSlider;
    //圖檔
    public asset:egret.gui.UIAsset;
    //顯示資料
    public label:egret.gui.Label;

    partAdded(name:string,instance:any):void{
        super.partAdded(name,instance);
        if(instance == this.vslider){
            this.vslider.addEventListener(egret.Event.CHANGE,this.changeHandler,this);
            this.vslider.minimum = 0;
            this.vslider.maximum = 360;
        }else if(instance == this.hslider){
            this.hslider.addEventListener(egret.Event.CHANGE,this.changeHandler,this);
            this.hslider.minimum = 0;
            this.hslider.maximum = 360;
        }else if(instance == this.asset){
            this.asset.anchorX = 0.5;
            this.asset.anchorY = 0.5;
            this.asset.source = RES.getRes("mantou_sheet.mantou_003_png"); //圖檔素材
        }
    }

    private changeHandler(event:egret.Event):void{
        if(event.currentTarget == this.vslider){
            this.asset.skewY = this.vslider.value;
        }else if(event.currentTarget == this.hslider){
            this.asset.skewX = this.hslider.value;
        }
        this.label.text = "skewY：" + this.asset.skewY + "\n" + "skewX：" + this.asset.skewX;
    }
}      

核心部分在 調用skewX skewY 前 先設定錨點，将錨點 anchorX anchorY 都設定為0.5，改變skewX 和 skewY時候，始終都圍繞圖檔中心點翻轉。

PS：skewX skewY 的值 實際是翻轉的度數，若設定skewX 為180，圖檔将垂直翻轉180度，若設定skewY 為180，圖檔将水準翻轉180度

核心部分在 調用skewX skewY 前 先設定錨點，将錨點 anchorX anchorY 都設定為0.5，改變skewX 和 skewY時候，始終都圍繞圖檔中心點翻轉。

PS：skewX skewY 的值 實際是翻轉的度數，若設定skewX 為180，圖檔将垂直翻轉180度，若設定skewY 為180，圖檔将水準翻轉180度