Flex – Mouse Event 之 Scope 的描繪(續)

在之前的文章中提供了一個簡單的方式來描繪 Mouse Down 時拖拉會出現的Scope，在此提供另一種方式來實作此部份的功能.

首先建立一 Component ，那其內容如下所示：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="creationCompleteHandler(event)"
>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            private var rectangle:Rectangle = new Rectangle();
            private var tracking:Boolean = false;
            private var startX:Number;
            private var startY:Number;
            
            public var selectedResult:Function;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
                this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
                this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
            }
            
            protected function mouseDownHandler(event:MouseEvent):void
            {    
                if (event.target != this)
                    return;
                
                tracking = true;
                startX = event.localX;
                startY = event.localY;
                
                rectangle.x = event.localX;
                rectangle.y = event.localY;
                rectangle.width = 0;
                rectangle.height = 0;
            }
            
            protected function mouseMoveHandler(event:MouseEvent):void
            {
                if (tracking) {
                    rectangle.width = Math.abs(startX - event.localX);
                    rectangle.height = Math.abs(startY - event.localY);
                    rectangle.x = Math.min(startX, event.localX);
                    rectangle.y = Math.min(startY, event.localY);
                    
                    this.invalidateDisplayList();
                }
            }
            
            protected function mouseUpHandler(event:MouseEvent):void
            {
                tracking = false;
                selectedResult(new Rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height));
                
                rectangle.x = 0;
                rectangle.y = 0;
                rectangle.width = 0;
                rectangle.height = 0;
            }
            
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                
                this.graphics.beginFill(0x000000, 0.2);
                this.graphics.drawRect(0, 0, unscaledWidth, rectangle.y);
                this.graphics.drawRect(0, rectangle.y, rectangle.x, rectangle.height);
                this.graphics.drawRect(rectangle.x + rectangle.width, rectangle.y, unscaledWidth - rectangle.x - rectangle.width, rectangle.height);
                this.graphics.drawRect(0, rectangle.y + rectangle.height, unscaledWidth, unscaledHeight - rectangle.y - rectangle.height);
            }
            

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
</s:Group>

在其需使用此功能的 Container 中加入此 Component，即可使用此功能.畫面如下所示：