这是写完后的画板,你可以在上边点击相应的按钮,画相应的图形。
遗憾的是,不能选择颜色,并且画直线的时候有点问题
下边是全部的代码:
package { import flash.display.Sprite; import flash.events.MouseEvent; /** * 画板实现类 */ [SWF(width="800",height="600",backgroundColor="#FFFFFF",frameRate="31")] public class DrawSprite extends Sprite { //定义画板的对象 private var _sprite:Sprite; private var item:String = "btnLine";//选择的图形 private var count:int = 0; /** * 构造函数 */ public function DrawSprite() { //实例化显示图形对象 _sprite = new Sprite(); //将对象添加到窗体上 this.addChild(_sprite); //设置图形的颜色,为白色 _sprite.graphics.beginFill(0xffffff); //画一个矩形,从0,0开始,到400,400结束。 _sprite.graphics.drawRect(0,35,400,400); //结束 _sprite.graphics.endFill(); //给画布添加鼠标监听器方法,设置鼠标按下时,调用onMouseDown方法 _sprite.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown); //给画布添加鼠标监听器方法,设置鼠标释放时,调用onMouseUp方法 _sprite.addEventListener(MouseEvent.MOUSE_UP,onMouseUp); var line:RectangleButton = new RectangleButton("直线",50,25); this.addChild(line); line.x = 10; line.y = 10; line.name ="btnLine"; line.addEventListener(MouseEvent.CLICK,onClickHandler); var curve:RectangleButton = new RectangleButton("曲线",50,25); this.addChild(curve); curve.x = 70; curve.y = 10; curve.name ="btnCurve"; curve.addEventListener(MouseEvent.CLICK,onClickHandler); var circle:RectangleButton = new RectangleButton("圆",50,25); this.addChild(circle); circle.x = 130; circle.y = 10; circle.name ="btnCircle"; circle.addEventListener(MouseEvent.CLICK,onClickHandler); var ellipse:RectangleButton = new RectangleButton("椭圆",50,25); this.addChild(ellipse); ellipse.x = 190; ellipse.y = 10; ellipse.name ="btnEllipse"; ellipse.addEventListener(MouseEvent.CLICK,onClickHandler); var rect:RectangleButton = new RectangleButton("矩形",50,25); this.addChild(rect); rect.x = 250; rect.y = 10; rect.name ="btnRect"; rect.addEventListener(MouseEvent.CLICK,onClickHandler); var roundRect:RectangleButton = new RectangleButton("圆角矩形",80,25); this.addChild(roundRect); roundRect.x = 310; roundRect.y = 10; roundRect.name ="btnRoundRect"; roundRect.addEventListener(MouseEvent.CLICK,onClickHandler); } /** * 点击按钮时触发该事件函数 */ private function onClickHandler(event:MouseEvent):void { item = event.target.name; trace(item); } /** * 在画板上按下鼠标并且拖动的时候调用该方法。 */ private function onMouseDown(event:MouseEvent):void{ if(item == "btnLine"){ if(count == 0){ _sprite.graphics.moveTo(event.localX,event.localY); count++; }else{ _sprite.graphics.lineStyle(1,0,1); _sprite.graphics.beginFill(0x000000); _sprite.graphics.lineTo(event.localX/2,event.localY/2); _sprite.graphics.endFill(); count--; } }else if(item == "btnCurve"){ _sprite.graphics.lineStyle(1,0,1); _sprite.graphics.beginFill(0x000000); _sprite.graphics.moveTo(event.localX,event.localY); _sprite.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove); _sprite.graphics.endFill(); }else if(item == "btnCircle"){ _sprite.graphics.lineStyle(1,0,1); _sprite.graphics.beginFill(0x000000); _sprite.graphics.drawCircle(event.localX,event.localY,30); _sprite.graphics.endFill(); }else if(item == "btnEllipse"){ _sprite.graphics.lineStyle(1,0,1); _sprite.graphics.beginFill(0x000000); _sprite.graphics.drawEllipse(event.localX,event.localY,30,40); _sprite.graphics.endFill(); }else if(item == "btnRect"){ _sprite.graphics.lineStyle(1,0,1); _sprite.graphics.beginFill(0x000000); _sprite.graphics.drawRect(event.localX,event.localY,50,50); _sprite.graphics.endFill(); }else if(item == "btnRoundRect"){ _sprite.graphics.lineStyle(1,0,1); _sprite.graphics.beginFill(0x000000); _sprite.graphics.drawRoundRect(event.localX,event.localY,60,60,4,20); _sprite.graphics.endFill(); } //给画板添加鼠标移动监听器方法 _sprite.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove); } /** * 在画板上释放鼠标按键时,调用该方法 */ private function onMouseUp(event:MouseEvent):void{ //释放的时候,移除鼠标移动的监听方法 _sprite.removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove); } /** * 鼠标拖动时,调用该方法 */ private function onMouseMove(event:MouseEvent):void{ if(item == "btnCurve") //画直线 _sprite.graphics.lineTo(event.localX,event.localY); } } } package { import flash.display.DisplayObject; import flash.display.Shape; import flash.display.SimpleButton; import flash.display.Sprite; import flash.filters.DropShadowFilter; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFormatAlign; public class RectangleButton extends SimpleButton { //要显示在按钮上的文字 private var _text:String; //存储矩形的宽度和高度 private var _width:Number; private var _height:Number; public function RectangleButton(text:String,width:Number,height:Number){ //存储这些值,用于建立按钮状态 _text = text; _width = width; _height = height; //根据宽度、高度、以及文字之值建立按钮状态 upState = createUpState(); overState = createOverState(); downState = createDownState(); hitTestState = upState; } //替换按钮的up状态建立显示组件 private function createUpState():Sprite{ var sprite:Sprite = new Sprite(); var background:Shape = createdColoredRectangle(0x33FF66); var textField:TextField = createTextField(false); sprite.addChild(background); sprite.addChild(textField); return sprite; } //替换按钮的Over状态建立显示组件 private function createOverState():Sprite{ var sprite:Sprite = new Sprite(); var background:Shape = createdColoredRectangle(0x70FF94); var textField:TextField = createTextField(false); sprite.addChild(background); sprite.addChild(textField); return sprite; } //替换按钮的down状态建立显示组件 private function createDownState():Sprite{ var sprite:Sprite = new Sprite(); var background:Shape = createdColoredRectangle(0xCCCCCC); var textField:TextField = createTextField(true); sprite.addChild(background); sprite.addChild(textField); return sprite; } //建立圆角矩形,以指定之颜色填充 private function createdColoredRectangle(color:uint):Shape{ var rect:Shape = new Shape(); rect.graphics.lineStyle(1,0x000000); rect.graphics.beginFill(color); rect.graphics.drawRoundRect(0,0,_width,_height,15); rect.graphics.endFill(); rect.filters = [new DropShadowFilter(2)]; return rect; } //建立文字栏,用来显示按钮上的文字 private function createTextField(downState:Boolean):TextField{ var textField:TextField = new TextField(); textField.text = _text; textField.width = _width; //以水平方式把文字摆在中心点 var format:TextFormat = new TextFormat(); format.align = TextFormatAlign.CENTER; textField.setTextFormat(format); //以垂直方式把文字摆在中心点 textField.y = (_height - textField.textHeight)/2; textField.y -= 2; //down状态会让文字更往下合往右,有别于其他状态 if(downState){ textField.x += 1; textField.y += 1; } return textField; } } }