Flex 塗鴉板

執行結果：



程式碼：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.managers.CursorManager;

private var mX:Number;
private var mY:Number;
private var IsDown:Boolean=false;
[Bindable]
public var _lineSize:int=3;
[Bindable]
public var _lineColor:uint=0xff0000;

private function init():void
{
myPanel.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
myPanel.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
myPanel.addEventListener(MouseEvent.MOUSE_UP, upHandler);
BindingUtils.bindProperty(this, "_lineSize", hs, "value");
BindingUtils.bindProperty(this, "_lineColor", cp, "selectedColor");
}

private function downHandler(e:MouseEvent):void
{
IsDown=true;
mX=myPanel.mouseX;
mY=myPanel.mouseY;
}

private function upHandler(e:MouseEvent):void
{
IsDown=false;
}

private function moveHandler(e:MouseEvent):void
{
if (IsDown)
{
var x:Number=myPanel.mouseX;
var y:Number=myPanel.mouseY;
myPanel.graphics.lineStyle(_lineSize, _lineColor, 1);
myPanel.graphics.moveTo(mX, mY);
myPanel.graphics.lineTo(x, y);
mX=x;
mY=y;
}
}
]]>
</mx:Script>
<mx:Panel width="100%"
height="100%">
<mx:Canvas id="myPanel"
x="113.5"
y="83"
width="100%"
height="90%"
buttonMode="true"
borderStyle="outset">
</mx:Canvas>
<mx:Button label="清空"
click="myPanel.graphics.clear();"/>
<mx:HSlider id="hs"
value="{_lineSize}"/>
<mx:ColorPicker id="cp"
selectedColor="{_lineColor}"/>
</mx:Panel>
</mx:Application>