画板可以这样玩

最新推荐文章于 2024-09-24 22:46:30 发布

最新推荐文章于 2024-09-24 22:46:30 发布 · 166 阅读

文章标签：

#Flash #UP

Flex 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Flash开发的简易画板应用。该应用支持绘制多种图形，如直线、曲线、圆、椭圆、矩形及圆角矩形等。虽然目前无法选择颜色，且存在一些绘制直线的问题，但用户可以通过点击不同按钮来选择想要绘制的图形。

这是写完后的画板，你可以在上边点击相应的按钮，画相应的图形。

遗憾的是，不能选择颜色，并且画直线的时候有点问题

下边是全部的代码：

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;
			
		}
		
		
	}
}