<?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"
    xmlns:oh="com.roguedevelopment.objecthandles.*"
    xmlns:popupbar="com.roguedevelopment.popupbar.*"
    xmlns:sample="com.roguedevelopment.objecthandles.sample.*">
  
    <mx:Script> 
        <![CDATA[            
            import mx.events.ResizeEvent; 
            //引用oh類別檔                       
            import com.roguedevelopment.objecthandles.ObjectHandleEvent;
            import com.roguedevelopment.objecthandles.ObjectHandlesMouseCursors;
            import com.roguedevelopment.objecthandles.SelectionManager;
            
            private var roundedMask:Sprite;
              private var cornerRadius:int;
              private var w:int=100;
              private var h:int=100;
              
              [Embed(source="img/resize_handle.png")]
              [Bindable]
            protected var resize_handle:Class;
            [Embed(source="img/rotate_handle.png")]
            [Bindable]
            protected var rotate_handle:Class;
            
            private function CreatMask():void
            { 
                cornerRadius=int(this.maskcornerRadiusValue.text);             
                roundedMask = new Sprite();                
                roundedMask.x=0;
                roundedMask.y=0;
              
                roundedMask.graphics.clear(); 
                roundedMask.graphics.beginFill(0xf2113b); 
                roundedMask.graphics.drawRoundRect(0, 0, 
                            w, h, 
                            cornerRadius, cornerRadius); 
                roundedMask.graphics.endFill();
                roundedMask.alpha=0.4;
               
                maskOh.setStyle("borderStyle","solid");                          
                maskOh.setStyle("borderColor","#0000cc");         
                maskOh.rawChildren.addChild(roundedMask);//將roundedMask遮罩加到maskOh裡
                
                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);
                this.maskRotationValue.text="0";
                
                this.maskOh.width=w;
                this.maskOh.height=h;
                this.maskOh.rotation=0;
                this.maskOh.x=0;
                this.maskOh.y=0;
                
                this.maskOh.mouseEnabled = true;                               
            }           
                       
            private function addMask():void
            {                
                this.addMaskbtn.enabled=false;
                this.disMaskbtn.enabled=true;
                this.delMaskbtn.enabled=true;
                this.setBtn.enabled=false;
           
                image.mask = roundedMask;//套用遮罩
                
                maskOh.deselect();//取消oh控制點
                maskOh.mouseEnabled = false;//取消oh滑鼠選取
                
                maskOh.setStyle("borderStyle","");                          
                maskOh.setStyle("borderColor",""); 
            }
            private function disMask():void
            {
                this.crtMaskbtn.enabled=false;
                this.addMaskbtn.enabled=true;
                this.disMaskbtn.enabled=false;
                this.delMaskbtn.enabled=true;
                this.setBtn.enabled=true;
                
                image.mask=null;//解除遮罩                  
                this.maskOh.mouseEnabled = true;//啟用oh滑鼠選取
                
                maskOh.setStyle("borderStyle","solid");                          
                maskOh.setStyle("borderColor","#0000cc");                            
            }
            
             private function delMask():void
             {                           
                this.crtMaskbtn.enabled=true;
                this.addMaskbtn.enabled=false;
                this.disMaskbtn.enabled=false;
                this.delMaskbtn.enabled=false;
                
                this.maskWidthValue.text="";                
                this.maskHeightValue.text="";
                this.maskRotationValue.text="";
                
                maskOh.rawChildren.removeChild(roundedMask);//移除遮罩
                maskOh.deselect();//取消oh控制點
                maskOh.mouseEnabled = false;//取消oh滑鼠選取
                image.mask=null;//解除遮罩 
                
                maskOh.setStyle("borderStyle","");                          
                maskOh.setStyle("borderColor","");           
            }
            
            private function setMaskValue():void
            {                
                var w:int=int(this.maskWidthValue.text);
                var h:int=int(this.maskHeightValue.text);
                var r:int=int(this.maskRotationValue.text);
                
                maskOh.width=w;
                maskOh.height=h;
                maskOh.rotation=r;            
            }
            
            private function maskMouseHanlder():void
            {
                roundedMask.width=this.maskOh.width;
                roundedMask.height=this.maskOh.height;
                
                maskWidthValue.text=String(this.maskOh.width);
                maskHeightValue.text=String(this.maskOh.height);
                maskRotationValue.text=String(this.maskOh.rotation);
            }
            private function maskMouseDown():void
            {
                this.maskOh.select();//開啟oh控制點
            }
        ]]> 
    </mx:Script>
  
  <mx:ApplicationControlBar width="100%" dock="true">     
      <mx:Label text="寬："/>
      <mx:TextInput id="maskWidthValue" width="50"/>
      <mx:Label text="高："/>
      <mx:TextInput id="maskHeightValue" width="50"/>
      <mx:Label text="角度："/>
      <mx:TextInput id="maskRotationValue" width="50"/>    
      <mx:Button id="setBtn" 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/DSC002.jpg"/>
       <oh:ObjectHandles id="maskOh" allowRotate="true" 
            mouseCursors="{new ObjectHandlesMouseCursors()}" 
            resizeHandleImage="{resize_handle}" 
            rotateHandleImage="{rotate_handle}" 
            mouseMove="maskMouseHanlder()"
            mouseUp="maskMouseHanlder()"
            mouseDown="maskMouseDown()">            
    </oh:ObjectHandles>
  </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>