[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度