Flex

Flex教學-動態遮罩應用

梅干2009/02/19
  最近正利用Flex開發一個線上影像編輯小工具,一方面除了可練功外,另方面也希望提供給網友,在把照片貼在部落格中,可作一點簡易的編修,如加個底框、打打文字或是放些小插圖與浮水印,寫著寫著便突然想到,Flex怎麼作遮罩,以前在Flash曾製作過,因此今天就上網找些資料,作法跟Flash差不多,便稍作了一些整理弄了一個小範例,該範例除了可自由建立遮罩外,還可拖拉遮罩改變位置,及調整遮罩的大小,有興趣的朋友可以玩玩看。

mask.mxml



import mx.events.ResizeEvent;
private var roundedMask:Sprite;
private var cornerRadius:int;
private var w:int=100;
private var h:int=100;

private function CreatMask():void
{
cornerRadius=int(this.maskcornerRadiusValue.text);
roundedMask = new Sprite();
canvas.rawChildren.addChild(roundedMask);
roundedMask.x=0;
roundedMask.y=0;

roundedMask.graphics.clear();
roundedMask.graphics.beginFill(0xFF0000);
roundedMask.graphics.drawRoundRect(0, 0,
w, h,
cornerRadius, cornerRadius);
roundedMask.graphics.endFill();

roundedMask.addEventListener(MouseEvent.MOUSE_DOWN,maskDownStartDrag);
roundedMask.addEventListener(MouseEvent.MOUSE_UP,maskUpStopDrag);

this.crtMaskbtn.enabled=false;
this.addMaskbtn.enabled=true;
this.disMaskbtn.enabled=false;
this.delMaskbtn.enabled=true;

this.maskWidthValue.text=String(w);
this.maskHeightValue.text=String(h);
}

private function maskDownStartDrag(event:MouseEvent):void{
roundedMask.startDrag();
}
private function maskUpStopDrag(event:MouseEvent):void{
roundedMask.stopDrag();
}

private function addMask():void{
image.mask = roundedMask;
this.addMaskbtn.enabled=false;
this.disMaskbtn.enabled=true;
this.delMaskbtn.enabled=true;
}
private function disMask():void{
image.mask=null;//解除遮罩
this.crtMaskbtn.enabled=false;
this.addMaskbtn.enabled=true;
this.disMaskbtn.enabled=false;
this.delMaskbtn.enabled=true;
}

private function delMask():void{
canvas.rawChildren.removeChild(roundedMask);
image.mask=null;//解除遮罩
this.crtMaskbtn.enabled=true;
this.addMaskbtn.enabled=false;
this.disMaskbtn.enabled=false;
this.delMaskbtn.enabled=false;

this.maskWidthValue.text=””;
this.maskHeightValue.text=””;
this.maskcornerRadiusValue.text=”0″;
}

private function setMaskValue():void
{
var r:int=int(this.maskcornerRadiusValue.text);
var w:int=int(this.maskWidthValue.text);
var h:int=int(this.maskHeightValue.text);

roundedMask.width=w;
roundedMask.height=h;
}























[範例預覽] [範例下載]


UAG軍規iPhone防摔殼