其中显示区域,使用了 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度