<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" fontSize="12" backgroundColor="white" viewSourceURL="srcview/index.html">
  
    <mx:Script> 
        <![CDATA[ 
            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:Script>
  
  <mx:ApplicationControlBar width="100%" dock="true">
     <mx:Label text="梅問題‧教學網【Flex簡易遮罩運用】"/>
      <mx:Label text="寬:"/>
      <mx:TextInput id="maskWidthValue" width="50"/>
      <mx:Label text="高:"/>
      <mx:TextInput id="maskHeightValue" width="50"/>      
      <mx:Button click="setMaskValue()" label="確定"/>
     <mx:Spacer width="100%"/>
     <mx:Button id="addMaskbtn" label="套用遮罩" click="addMask()" enabled="false"/>
      <mx:Button id="disMaskbtn" label="解除遮罩" click="disMask()" enabled="false"/> 
  </mx:ApplicationControlBar>
  <mx:Canvas id="canvas" borderColor="0x000000" borderStyle="solid" borderThickness="3"> 
    <mx:Image id="image" source="img/DSC001.jpg"/>
  </mx:Canvas>
  <mx:HBox>
      <mx:Label text="圓角:"/>
      <mx:TextInput text="0" id="maskcornerRadiusValue" width="50"/>
      <mx:Button id="crtMaskbtn" label="建立遮罩範圍" click="CreatMask()"/>
      <mx:Button id="delMaskbtn" label="刪除遮罩" click="delMask()" enabled="false"/>
 </mx:HBox> 
</mx:Application>