一个简单的画板

Flex中画图，有两种方法：

1、直接在canvas中画

?

private function init():void{cav.graphics.lineStyle(1, 0x000000, 1, false);cav.graphics.lineTo(200, 200);}<mx:Canvas id="cav" width="300" height="300" />

?

2、在Sprite中画，然后将其添加到舞台中。所有显示对象都必须继承UIComponent类，但是Sprite并没有继承UIComponent，如果想显示Sprite，就先要把Sprite添加到UIComponent中，然后再添加到舞台中。

?

sprite = new Sprite();sprite.graphics.lineStyle(1,0x000000,1,true);sprite.graphics.lineTo(event.localX, event.localY);ui = new UIComponent();ui.addChild(sprite);cav.addChild(ui);

?

下面例子实现了一个简单的画板，只实现了画线、撤销、还原、清屏等简单的部分功能，目的是研究Flex画板的原理。

?

private var sprite:Sprite;//作画的载体private var ui:UIComponent;//包装Sprite，然后才能添加到舞台上private var index:int = 0;//作画的操作数，也是添加到舞台的每个对象的索引private var flag:Boolean = false;//表示鼠标是否按下private var arr:Array = new Array();//被撤销的对象列表，以备还原/** * 按下鼠标，初始化画笔 */protected function cav_mouseDownHandler(event:MouseEvent):void{sprite = new Sprite();sprite.graphics.clear();sprite.graphics.lineStyle(1,0x000000,1,true);sprite.graphics.moveTo(event.localX, event.localY);sprite.graphics.lineTo(event.localX, event.localY);ui = new UIComponent();ui.addChild(sprite);cav.addChildAt(ui, index++);flag = true;}/** * 如果鼠标按下，并滑动，开始画画 */protected function cav_mouseMoveHandler(event:MouseEvent):void{if(flag == true){sprite.graphics.lineTo(event.localX, event.localY);}}/** * 停止画画 */protected function cav_mouseUpHandler(event:MouseEvent):void{flag = false;}/** * 撤销*/protected function btnUndo_clickHandler(event:MouseEvent):void{if(index <= 0){return;}arr.push(cav.getChildAt(--index));cav.removeChildAt(index);}/** * 还原 */protected function btnRedo_clickHandler(event:MouseEvent):void{if(arr != null && arr.length > 0){cav.addChildAt(arr.pop(), index++);}}/** * 清屏 */protected function btnClear_clickHandler(event:MouseEvent):void{if(index >= 0){cav.removeAllChildren();index = 0;}if(arr != null && arr.length > 0){arr.splice();}}<mx:VBox id="vb" width="100%" height="100%"><mx:HBox><mx:Button id="btnUndo" label="撤销" click="btnUndo_clickHandler(event)" /><mx:Button id="btnRedo" label="还原" click="btnRedo_clickHandler(event)" /><mx:Button id="btnClear" label="清屏" click="btnClear_clickHandler(event)" /></mx:HBox><mx:Canvas id="cav" width="500" height="500" backgroundColor="#FFFFFF"    mouseDown="cav_mouseDownHandler(event)"   mouseMove="cav_mouseMoveHandler(event)"   mouseUp="cav_mouseUpHandler(event)"/></mx:VBox>