Simple Drawing tool in flex

A simple application demonstrating the free mouse drawing in flex....

View the application....

Source Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" height="634">
    <mx:Style>

        Application {
            backgroundGradientColors: #ffffcc, #ff99cc;
            backgroundGradientAlphas: 1, 1;
            themeColor: #000066;
            color: #000066;
        }
        MenuBar {
            backgroundGradientColors: #ffffcc, #ff99cc;
            backgroundGradientAlphas: 1, 1;
            themeColor: #000066;
            color: #000066;
            borderColor: #ff99cc;
            borderThicknessLeft: 11;
            borderThicknessTop: 10;
            borderThicknessBottom: 11;
            borderThicknessRight: 10;
            cornerRadius: 10;
            headerHeight: 22;
            backgroundAlpha: 0.82;
            highlightAlphas: 0.54, 0.72;
            headerColors: #e7e7e7, #ff6699;
            dropShadowEnabled: true;
        }
        Button {
            cornerRadius: 7;
            textIndent: 2;
            paddingLeft: 4;
            paddingRight: 4;
            paddingTop: 4;
            paddingBottom: 4;
            highlightAlphas: 0.67, 0.4;
            fillAlphas: 0.6, 0.67, 0.48, 0.36;
            fillColors: #ff9999, #ff00cc, #ff33cc, #ff99cc;
            fontSize: 16;
        }
        TextArea{
            borderColor: #ff99cc;
            borderThicknessLeft: 11;
            borderThicknessTop: 10;
            borderThicknessBottom: 11;
            borderThicknessRight: 10;
            cornerRadius: 10;
            headerHeight: 22;
            backgroundAlpha: 0.82;
            highlightAlphas: 0.54, 0.72;
            headerColors: #e7e7e7, #ff6699;
            dropShadowEnabled: true;
        }
        Panel {
            borderColor: #ff99cc;
            borderThicknessLeft: 11;
            borderThicknessTop: 10;
            borderThicknessBottom: 11;
            borderThicknessRight: 10;
            cornerRadius: 10;
            headerHeight: 22;
            backgroundAlpha: 0.82;
            highlightAlphas: 0.54, 0.72;
            headerColors: #e7e7e7, #ff6699;
            dropShadowEnabled: true;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            import mx.events.IndexChangedEvent;
            private function init():void{       
                setBrushSize();
                setBrushPalette();
            }
            //Set Brush
            private function setBrushPalette():void{
                //addchild();
                for( var i:int = 1 ; i<= 16 ; i += 2 ){
                    var bCanvas:Canvas = new Canvas();
                    bCanvas.name = "brush-"+i;
                    bCanvas.width = 32;
                    bCanvas.height = 32;
                    bCanvas.graphics.beginFill( 0x00000000 , 1.0);   
                    bCanvas.graphics.drawCircle( 32 , 32 , i);
                    bCanvas.graphics.endFill();   
                    BrushPalette.addChild( bCanvas );
                    bCanvas.addEventListener(MouseEvent.CLICK , function(event:MouseEvent):void{
                        var tmpArray:Array = (event.target.name).split("-");
                        myLog.text = (event.target.name).split("-");
                        hideBrushPalette();
                        thickness.value = tmpArray[1];
                        setBrushSize();
                    });
                }
            }
            private function showBrushPalette():void{
                BrushPalette.visible = true;
            }
            private function hideBrushPalette():void{
                BrushPalette.visible = false;
            }
            private function setBrushSize():void{
                myCanvas.graphics.clear();
                myCanvas.graphics.beginFill( 0x00000000 , 1.0);
                myCanvas.graphics.drawCircle( myCanvas.width/2 , myCanvas.height/2 , thickness.value  );   
                myCanvas.graphics.endFill();
            }
            private function clearCanvas():void {
                canvas.graphics.clear();
            }
            private var oldX:Number, oldY:Number;
            private function onMouseDown(e:MouseEvent):void {
                oldX = e.localX;
                oldY = e.localY;
            }
            private function onMouseMove(e:MouseEvent):void {
                if (e.buttonDown) {
                    var g:Graphics = canvas.graphics;
                    var mx:Number = e.localX;
                    var my:Number = e.localY;       
                    if( mode == "modeBrush" ){
                        myLog.text += mode;
                        g.lineStyle(thickness.value, fgColor.selectedColor);
                        g.moveTo(oldX, oldY);
                        g.lineTo(mx, my);
                    }else if( mode == "modeErase" ){
                        myLog.text += mode;   
                        g.lineStyle(10,bgColor.selectedColor);
                        g.moveTo(oldX, oldY);
                        g.lineTo(mx, my);
                    }else{
                        myLog.text += "none";
                    }
                    oldX = mx;
                    oldY = my;       
                }
            }
            //On Change Event
            private function onChange(event:MenuEvent):void{
                var m:String = event.item.@value;
                if(  m == "filter_sharp" ){
                    onSharp();       
                } else if ( m == 'filter_blur' ){
                    onBlur();   
                }
            }
            private function onSharp():void{
            }
            private function onBlur():void{
            }
            //ツールモード選択
            private var mode:String = "modeBrush";
            private function setMode(m:String):void{
                myLog.text += mode;   
                mode = m;
            }
        ]]>
    </mx:Script>
    <mx:Sequence id="show">
        <mx:Move xFrom="-300" xTo="10" duration="300" />
    </mx:Sequence>
    <mx:Sequence id="hide">
        <mx:Move xFrom="10" xTo="-300" duration="300" />
    </mx:Sequence>
    <mx:Panel width="448" height="420" x="153.5" y="177" title="drawing" layout="absolute">
        <mx:Canvas id="canvas" width="427" height="377" mouseMove="onMouseMove(event)" mouseDown="onMouseDown(event)" x="0" y="0" borderStyle="solid">
            <mx:Button x="342" y="10" label="clear" click="clearCanvas()"/>
        </mx:Canvas>   
    </mx:Panel>
    <mx:Panel x="10" y="177" width="135.5" height="420" layout="absolute" title="Tool">
        <mx:Button x="20.25" y="4" label="Brush" click="setMode('modeBrush')"/>
        <mx:Button x="10" y="339" label="●" click="setMode('modeCircle')"/>
        <mx:Button x="11.25" y="181" label="Erase" click="setMode('modeErase')"/>
        <mx:Button x="57.5" y="339" label="■" click="setMode('modeRect')"/>
        <mx:ColorPicker id="bgColor" x="46.5" y="139" width="36" height="34" selectedColor="0xffffff"/>
        <mx:ColorPicker id="fgColor" x="32" y="123" width="36" height="34" selectedColor="0x0000ff"/>
        <mx:NumericStepper id="thickness" x="24.75" y="93" value="4" minimum="1" maximum="100" change="setBrushSize()"/>
        <mx:Canvas x="24.75" y="40" width="65" height="45" id="myCanvas" borderColor="#ff00ff" borderStyle="solid" click="showBrushPalette()"/>
    </mx:Panel>
    <mx:MenuBar x="10" y="138" id="menuBar" labelField="@label" width="712.5" height="32" itemClick="onChange(event)">
        <mx:XMLListCollection id="menuXml">
            <mx:XMLList xmlns="">
                <menuitem label="File" >
                    <menuitem label="New"   value="file_new" />
                    <menuitem label="Save"   value="file_save"/>
                    <menuitem type="separator" />
                    <menuitem label="Exit"   value="file_quite"/>
                </menuitem>
                <menuitem label="Edit">
                    <menuitem label="Clear" value="edit_clear" />
                    <menuitem label="Undo" value="edit_bak" />
                </menuitem>
                <menuitem label="Filter">
                    <menuitem label="Sharp"  value="filter_sharp"/>
                    <menuitem label="Blur"    value="filter_blur"/>
                </menuitem>               
                <menuitem label="Help">
                    <menuitem label="HowTo" value="help_howto"/>
                    <menuitem label="About" value="help_member"/>
                </menuitem>
            </mx:XMLList>   
        </mx:XMLListCollection>
    </mx:MenuBar>
    <mx:TextArea x="609.5" y="177" width="113" height="420" id="myLog" backgroundAlpha="0.47" color="#c0c0c0"/>
    <mx:HBox x="10" y="120"  backgroundAlpha="0.9" height="50" width="482" id="BrushPalette" backgroundColor="#ff80ff" showEffect="show" hideEffect="hide" visible="false"/>
    <mx:Image x="10" y="10" width="712.5" height="120" source="@Embed('assets/banner.jpg')" autoLoad="true" id="myImage"/>
</mx:Application>