[Egret学习笔记 七]使用skewX skewY实现图片翻转效果

其中显示区域，使用了 Wing  UI布局，关于Wing UI布局使用说明请看egret官网教程  

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

皮肤 GamePanelSkin.exml 如下：

逻辑代码如下：

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度