使用bitmapData简单实现涂鸦中的橡皮功能[Flex]

有朋友需要..改成了Flex版的..其实代码原理都一样...

其它版本:
使用bitmapData简单实现涂鸦中的橡皮功能(AS3+Flash)
使用bitmapData简单实现涂鸦中的橡皮功能(AS2)

效果:
<script type="text/javascript"></script>

 

注:其中点"Other"任何操作都不执行..朋友需要的..

查看源码 打印 关于此插件

001.<?xml version="1.0" encoding="utf-8"?>

002.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 

003.    width="550" height="400" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" color="#333333" fontSize="12"

004.    creationComplete="_init()">

005.    <mx:Script>

006.        <![CDATA[

007.            import mx.core.UIComponent

008.            private var _palette:UIComponent;

009.            private var _paper:BitmapData;

010.            private var _pencil:UIComponent;

011.              

012.            [Bindable]

013.            private var _action:String;

014.            private function _init():void

015.            {

016.                _paletteCreate();

017.                _paperCreate();

018.                _pencilCreate()

019.            }

020.              

021.            private function _pencilCreate():void

022.            {

023.                _pencil = new UIComponent();

024.                _pencil.x = _pencil.y = 10;

025.                _pencil.visible = false;

026.                _pencil.mouseEnabled = false;

027.                _pencil.mouseChildren = false;

028.                addChild(_pencil);

029.                  

030.            }

031.            private function _paperCreate():void

032.            {

033.                _paper = new BitmapData(530,350,true,0x00FFFFFF);

034.                var bmp:UIComponent = new UIComponent();

035.                bmp.x = bmp.y = 10;

036.                bmp.addChild(new Bitmap(_paper))

037.                bmp.mouseEnabled = false;

038.                bmp.mouseChildren = false;

039.                addChild(bmp);

040.            }

041.            private function _paletteCreate():void

042.            {

043.                _palette = new UIComponent();

044.                _palette.x = _palette.y = 10;

045.                _palette.graphics.beginFill(0x000000,0);

046.                _palette.graphics.drawRect(0,0,530,350);

047.                _palette.graphics.endFill();

048.                addChild(_palette);

049.                  

050.                _palette.addEventListener(MouseEvent.MOUSE_DOWN,_down)

051.            }

052.              

053.              

054.              

055.            private function _actionChange(e:MouseEvent):void

056.            {

057.                switch(e.currentTarget.name)

058.                {

059.                    case "act_draw":

060.                        _action = "draw";

061.                        _pencil.visible = true;

062.                        break;

063.                    case "act_clear":

064.                        _action = "clear";

065.                        _pencil.visible = false;

066.                        break;

067.                    case "act_other":

068.                        _action = "other";

069.                        break;

070.                }

071.            }

072.              

073.              

074.              

075.            private function _down(e:MouseEvent):void

076.            {

077.                switch(_action)

078.                {

079.                    case "draw":

080.                        _pencil.graphics.lineStyle(int(_line.value),_color.selectedColor);

081.                        _pencil.graphics.moveTo(mouseX,mouseY);

082.                        _palette.addEventListener(MouseEvent.MOUSE_MOVE,_move);

083.                        stage.addEventListener(MouseEvent.MOUSE_UP,_up);

084.                        break;

085.                    case "clear":

086.                        _pencil.graphics.lineStyle(int(_line.value),_color.selectedColor);

087.                        _pencil.graphics.moveTo(mouseX,mouseY);

088.                        _palette.addEventListener(MouseEvent.MOUSE_MOVE,_move);

089.                        stage.addEventListener(MouseEvent.MOUSE_UP,_up);

090.                        break;

091.                    case "other":

092.                        break;

093.                }

094.            }

095.            private function _move(e:MouseEvent):void

096.            {

097.                _pencil.graphics.lineTo(mouseX,mouseY)

098.                if(_action=="clear")_paper.draw(_pencil,new Matrix(),new ColorTransform(),BlendMode.ERASE)

099.                e.updateAfterEvent()

100.            }

101.            private function _up(e:MouseEvent):void

102.            {

103.                if(_action=="draw")_paper.draw(_pencil,new Matrix(),new ColorTransform(),BlendMode.NORMAL,new Rectangle(0,0,550,400))

104.                _pencil.graphics.clear()

105.                _palette.removeEventListener(MouseEvent.MOUSE_MOVE,_move);

106.                stage.removeEventListener(MouseEvent.MOUSE_UP,_up);

107.            }

108.        ]]>

109.    </mx:Script>

110.  

111.    <mx:Label x="10" y="10" text="图片加载中..."/>

112.    <mx:Image x="10" y="10" width="530" height="350" source="530_350.jpg"/>

113.    <mx:Button id="act_draw" click="_actionChange(event)" x="47" y="368" label="Draw" height="24" selected="{_action=='draw'}"/>

114.    <mx:Button id="act_clear" click="_actionChange(event)" x="117" y="368" label="Clear" height="24" selected="{_action=='clear'}"/>

115.    <mx:Button id="act_other" click="_actionChange(event)" x="186" y="368" label="Other" height="24" selected="{_action=='other'}"/>

116.    <mx:NumericStepper id="_line" x="300" y="368" width="45" minimum="1" maximum="20" value="10" height="24"/>

117.    <mx:Label x="10" y="370" text="动作：" height="24"/>

118.    <mx:Label x="263" y="370" text="粗细：" height="24"/>

119.    <mx:Label x="353" y="370" text="颜色：" height="24"/>

120.    <mx:ColorPicker id="_color" x="390" y="368" height="24" width="24"/>

121.      

122.</mx:Application>

//源文路径

http://blog.l4cd.net/post-old-82.html#more-673