最近正利用Flex開發一個線上影像編輯小工具，一方面除了可練功外，另方面也希望提供給網友，在把照片貼在部落格中，可作一點簡易的編修，如加個底框、打打文字或是放些小插圖與浮水印，寫著寫著便突然想到，Flex怎麼作遮罩，以前在Flash曾製作過，因此今天就上網找些資料，作法跟Flash差不多，便稍作了一些整理弄了一個小範例，該範例除了可自由建立遮罩外，還可拖拉遮罩改變位置，及調整遮罩的大小，有興趣的朋友可以玩玩看。
mask.mxml
<?xml version=“1.0” encoding=“utf-8”?>
mx:Script
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;
}
/mx:ApplicationControlBar
/mx:Canvas
mx:HBox
/mx:HBox
/mx:Application
[範例預覽] [範例下載]