flex 开发的电子画板(桌面应用程序)

可以画线,圆,方块,以及截取当前画板图像的功能。

 

直接上代码吧,我的环境是AIR 2.6, FB4。

 

ElectronicBoard.mxml  主程序。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
						width="100%" height="100%"
						applicationComplete="init()" layout="absolute"
						showTitleBar="false" showStatusBar="false" showFlexChrome="false" borderStyle="none">
	<mx:Script>
		<![CDATA[
			import flash.net.dns.AAAARecord;
			
			import mx.binding.utils.BindingUtils;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.FileSystemList;
			import mx.controls.FileSystemTree;
			import mx.core.Application;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			import mx.graphics.ImageSnapshot;
			import mx.graphics.codec.JPEGEncoder;
			import mx.managers.PopUpManager;
			
			private var oY:Number;
			private var nX:Number;
			private var oX:Number;
			private var nY:Number;
			private var _isDown:Boolean=false;
			private var showBasePanelFlag:Boolean=false;
			private var _file:File;
			private var sprit:Sprite=new Sprite();
			private var comUI:UIComponent=new UIComponent();
			private var PrObj:Object=new Object();
			private var _imgByteArray:ByteArray;
			private var  saveDirectoryPath:String;
			[Bindable]
			private var pop1:ConsolePanel;
			 
			private function init():void
			{
				//全屏
				systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHand);
				systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
				//清除画板
				myPanel.removeAllChildren();
				myPanel.visible=true;
				//0x869ca7设置画笔颜色。
				myPanel.graphics.lineStyle(0,0xFFFFFF,0);
				//绘制一个透明度为0.1的画板。
				myPanel.graphics.beginFill(0xFFFFFF,0.1);
				myPanel.graphics.drawRect(0,0,this.width,this.height);
				myPanel.graphics.endFill();
				//添加鼠标事件监听,即画笔动作的处理。
				myPanel.addEventListener(MouseEvent.MOUSE_DOWN,downHandler);
				myPanel.addEventListener(MouseEvent.MOUSE_MOVE,moveHandler);
				myPanel.addEventListener(MouseEvent.MOUSE_UP,upHandler);
				//弹出设置面板
				pop1 = ConsolePanel(PopUpManager.createPopUp(myPanel,ConsolePanel,false));
				//鼠标移动到设置面板上时,显示设置面板,否则隐藏到屏幕上方。
				pop1.addEventListener(MouseEvent.ROLL_OVER,moveImage);
				pop1.addEventListener(MouseEvent.ROLL_OUT,moveout);
				//初始化设置面板位置。
				pop1.x = (stage.width - pop1.width)/2;
				pop1.y = -220;
				//设置面板上的按钮事件处理。
				pop1.btn_cancel.addEventListener(MouseEvent.CLICK,btn_cancel_clickHandler);
				pop1.btn_reset.addEventListener(MouseEvent.CLICK,btn_reset_clickHandler);
				pop1.btn_recovery.addEventListener(MouseEvent.CLICK,btn_recovery_clickHandler);
				pop1.prScrn.addEventListener(MouseEvent.CLICK,prScrn_clickHandler);
				//设置面板中保存清除,撤消,恢复等操作所涉及对象的集合。
				if(pop1.indexList.length!=0)
				{
					pop1.indexList.removeAll();
				}
				if(pop1.tempDel.length!=0)
				{
					pop1.tempDel.removeAll();
				}	
			}
			
			private function fullScreenHand(evt:FullScreenEvent):void{
				if(evt.fullScreen)
				{}
				else
				{//一旦退出全屏即退出系统。
					this.exit();
				}
			}
			//---------截屏----------------
			protected function prScrn_clickHandler(event:MouseEvent):void
			{
				var now:Date=new Date();
				var encode:JPEGEncoder=new JPEGEncoder(100);
				var m : Matrix = new Matrix();
				//ImageSnapshot类抓取myPanel面板的BitmapData
				var bmp:BitmapData = ImageSnapshot.captureBitmapData(myPanel,m,null,null,null,true);
				bmp.draw(myPanel,m);
				//解析为ByteArray
				_imgByteArray=encode.encode(bmp);
				//设置文件名
				var imgName:String="\\"+df.format(now)+".jpg";
				//第一次保存图片,打开保存位置对话框选择保存位置。
				if (_file == null) {
					//默认打开的保存路径为桌面,并且对话框有默认的文件名,文件名为设置的imgName。
					_file =new File(File.desktopDirectory.nativePath +  imgName);
					//对话框标题。
					_file.browseForSave("请选择截屏图片的保存位置");
					//单击保存按钮派发事件。
					_file.addEventListener(Event.SELECT,getSavePathHandler);
					//单击取消按钮将判断条件回置为初始状态。
					_file.addEventListener(Event.CANCEL,function():void{_file = null;return;});
				} else {
					//若是第一次以后打开,则_file不为空,saveDirectoryPath值已经在getSavePathHandler方法中赋值,其值为第一次选择的保存路径。
					_file =new File(saveDirectoryPath +  imgName);
//					Alert.show(_file.nativePath);
					writeDataToImage();
				}
			}
			//点击保存按钮,触发select事件时的处理函数。
			private function getSavePathHandler(event:Event):void
			{
				_file = event.target as File;
				//得到选择的路径,将其转换为数组处理。
				var pathDirectoryArr:Array = _file.nativePath.toString().split("\\");
				//去掉文件名。
				pathDirectoryArr.pop();
//				Alert.show(pathDirectoryArr.join("\\"));
				//将保存目录的路径保存到saveDirectoryPath变量中。
				saveDirectoryPath= pathDirectoryArr.join("\\");
				writeDataToImage();
			}
			//使用文件流生成截图。
			private function writeDataToImage():void
			{
				var filestream:FileStream=new FileStream();
				try{
					filestream.open(_file,FileMode.WRITE);
					filestream.writeBytes(_imgByteArray);
					filestream.close();	
				}catch(e:Error){
					Alert.show(e.message);
				}
			}
			//撤销按钮操作。
			protected function btn_cancel_clickHandler(event:MouseEvent):void
			{   
				if(pop1.indexList.length != 0 && pop1.indexList.length >= 0)
				{
					pop1.tempDel.addItem(pop1.indexList.getItemAt(pop1.indexList.length-1));
					myPanel.removeChild(pop1.indexList.getItemAt(pop1.indexList.length - 1) as DisplayObject);
					pop1.indexList.removeItemAt(pop1.indexList.length-1);
				}
			}
			
			//-----清空白板按钮操作--------
			protected function btn_reset_clickHandler(event:MouseEvent):void
			{
				myPanel.removeAllChildren();
				pop1.indexList.removeAll();
				pop1.tempDel.removeAll();
			}
			
			//------图形恢复按钮操作-------
			protected function btn_recovery_clickHandler(event:MouseEvent):void
			{
				
				if(pop1.tempDel.length!=0)
				{
					pop1.indexList.addItem(pop1.tempDel.getItemAt(pop1.tempDel.length-1))
					myPanel.addChild(pop1.tempDel.getItemAt(pop1.tempDel.length-1) as DisplayObject);
					pop1.tempDel.removeItemAt(pop1.tempDel.length-1);	  
				}
			}
			//绘图时,鼠标按下操作处理。
			private function downHandler(e:MouseEvent):void
			{
				_isDown=true;
				oX = myPanel.mouseX;
				oY = myPanel.mouseY;
				sprit=new Sprite();
			}
			//---------绘图时,鼠标释放操作处理。----------
			private function upHandler(e:MouseEvent):void
			{
				_isDown=false;
				oX=myPanel.mouseX;
				oY=myPanel.mouseY;
				var Num:Number=Number(myPanel.numChildren)-1;
				if(pop1.spriteFlag!="截屏")
				{
					if(Num>=0)
					{
						pop1.indexList.addItem(myPanel.getChildAt(myPanel.numChildren-1));
					}
				} else {
					//截屏操作只需要保存最后一个绘制上去的图形对象。
					PrObj=myPanel.getChildAt(myPanel.numChildren-1);
				}
			}
			//-----鼠标移动事件-----------
			private function moveHandler(e:MouseEvent):void
			{
				if(_isDown)
				{
					myPanel.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
					
					//-----生成线-----------
					if(pop1.spriteFlag=="线"){
						
						sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);//应用线条样式
						sprit.graphics.beginFill(0xffffff,1);//图的内部填充
						var x:Number = myPanel.mouseX;
						var y:Number = myPanel.mouseY;
						sprit.graphics.moveTo(oX,oY);
						sprit.graphics.lineTo(x,y);
						var uiCom:UIComponent=new UIComponent();
						uiCom.addChild(sprit);
						myPanel.addChild(uiCom);
						oX=x;
						oY=y;
					}
					//---生成圆--------					
					if(pop1.spriteFlag=="圆"){
						
						sprit.graphics.clear();
						sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
						sprit.graphics.beginFill(pop1._fillColor,pop1._fillAlpha);
						
						nX = myPanel.mouseX;
						nY = myPanel.mouseY;
						
						var cX:Number=oX+(nX-oX)/2;
						var cY:Number=oY+(nY-oY)/2;
						var preX:Number  =Math.min(oX,nX);
						var preY:Number  =Math.min(oY,nY);
						var cWidth:Number = Math.abs(oX - nX);
						var cHeight:Number  = Math.abs(oY- nY);
						sprit.graphics.drawEllipse(preX,preY,cWidth,cHeight);
						var uiCom:UIComponent = new UIComponent();
						uiCom.addChild(sprit);
						myPanel.addChild(uiCom);
					}
					//----------生成矩形-------------
					if(pop1.spriteFlag=="矩形"){
						sprit.graphics.clear();
						
						sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
						sprit.graphics.beginFill(pop1._fillColor,pop1._fillAlpha);
						nX=myPanel.mouseX;
						nY=myPanel.mouseY;
						sprit.graphics.drawRect(oX,oY,nX-oX,nY-oY);
						var uiCom:UIComponent = new UIComponent();
						uiCom.addChild(sprit);
						myPanel.addChild(uiCom);
					}
					//----------生成截屏区域-------------
					if(pop1.spriteFlag=="截屏"){
						//sprit=new Sprite();
						
						sprit.graphics.clear();
						sprit.graphics.lineStyle(pop1._lineSize,pop1._lineColor,1);
						sprit.graphics.beginFill(pop1._fillColor,pop1._fillAlpha);
						nX=myPanel.mouseX;
						nY=myPanel.mouseY;
						sprit.graphics.drawRect(oX,oY,nX-oX,nY-oY);
						comUI.addChild(sprit);
						comUI.width=sprit.width;
						comUI.height=sprit.height;
						myPanel.addChild(comUI);
					}
				}
			}
			
			//----------移出浮动窗-------
			private function moveImage(event:MouseEvent):void {
				myMoveIn.play();	
			}
			//----------移走浮动窗------
			private function moveout(event:MouseEvent):void{
				myMoveOut.play();
			}
		]]>
	</mx:Script>
	<mx:DateFormatter id="df" formatString="YYYY-MM-DD JJ-NN-SS"/>
	<mx:Move id="myMoveIn" target="{pop1}" duration="300" yTo="0" />
	<mx:Move id="myMoveOut" target="{pop1}" duration="300" yTo="-230" />

	<mx:Canvas width="100%" height="100%" id="myPanel" borderStyle="solid" fontSize="12" backgroundSize="100%">
		
	</mx:Canvas>
</mx:WindowedApplication>

 

设置面板ConsolePanel.mxml

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
				width="500"  height="242" fontSize="12"
				creationComplete="canvas1_creationCompleteHandler(event)" alpha="1">
	<mx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.CollectionEvent;
			import mx.events.FlexEvent;
			import mx.utils.ColorUtil;
			import mx.utils.StringUtil;
			[Bindable] 
			public var _lineSize:int=1;
			[Bindable] 
			public var _lineColor:uint=0x000000;
			[Bindable] 
			public var _fillAlpha:Number=0;
			[Bindable] 
			public var _fillColor:uint=0xffffff;
			private var _changeLineFlag:Boolean = false;
			private var _changeFillFlag:Boolean = false;
			public var spriteFlag:String="线";
			public var indexList:ArrayCollection=new ArrayCollection();//myPanel显示对象
			public var tempDel:ArrayCollection=new ArrayCollection();//临时删除对象

			
			private function canvas1_creationCompleteHandler(event:FlexEvent):void
			{				
				BindingUtils.bindProperty(this,"_lineSize",hs,"value");
				BindingUtils.bindProperty(this,"_fillAlpha",fillalpha,"value");
				indexList.addEventListener(CollectionEvent.COLLECTION_CHANGE,listChange);
				tempDel.addEventListener(CollectionEvent.COLLECTION_CHANGE,tempDelChange);
			}
			private function listChange(evt:CollectionEvent):void
			{
				if(indexList.length==0)
				{
					btn_cancel.enabled=false;
					btn_reset.enabled=false;
				}
				else
				{
					btn_cancel.enabled=true;
					btn_reset.enabled=true;
				}
			}
			private function tempDelChange(evt:CollectionEvent):void
			{
				if(tempDel.length==0)
				{
					btn_recovery.enabled=false;
				}
				else
				{
					btn_recovery.enabled=true;
				}
			}
			//设置线条颜色和填充颜色时,例如设置线条颜色,需要首先点击线条颜色方块,在点击下方八个颜色方块中的任意一色,可更换线条颜色。
			private function changeColor(event:MouseEvent):void
			{
				var colorValue:uint = (event.target as GridItem).getStyle("backgroundColor");
//				Alert.show("_changeLineFlag :"+_changeLineFlag +"   _changeFillFlag : "+_changeFillFlag+"  colorValue:"+colorValue);
				if (_changeLineFlag) {
					_lineColor = colorValue;
				} 
				if (_changeFillFlag) {
					_fillColor = colorValue;
				}
			}
		]]>
	</mx:Script>
	<mx:Canvas id="spritPanelBox" width="100%" height="100%" backgroundColor="#5599AA" alpha="0.6">
		<mx:Canvas id="chooseBox" width="472" height="194" x="0" y="0">
			
			<mx:Label text="线条色" fontWeight="bold" x="10" y="18"/>
			<mx:Label text="填充色" fontWeight="bold" x="129" y="18"/>
			
			<mx:Button label="椭圆" id="circle" icon="@Embed(source='img/圆.png')" click="this.spriteFlag='圆';" width="75.2" x="242.8" y="82"/>
			<mx:Button label="线" id="line"  icon="@Embed(source='img/线 .png')" click="this.spriteFlag='线';" width="75.2" x="242.75" y="14"/>
			<mx:Button label="矩形" id="rect" icon="@Embed(source='img/矩形.png')" click="this.spriteFlag='矩形'" width="75.2" x="242.8" y="48"/>
			
			<mx:Button label="截屏" id="prScrn" icon="@Embed(source='img/截屏.png')" x="410" y="39" labelPlacement="bottom"/>
			<mx:Button label="撤消" id="btn_cancel" icon="@Embed(source='img/撤销.png')" enabled="false"  x="326" y="14"/>
			<mx:Button label="清除" id="btn_reset" icon="@Embed(source='img/清除.png')" enabled="false"  x="326" y="48"/>
			<mx:Button label="恢复" id="btn_recovery" icon="@Embed(source='img/恢复.png')" enabled="false" width="77.5" x="326" y="82"/>
			<mx:HBox width="100%" horizontalGap="23" verticalGap="0"  x="0" y="148" height="39">
				<mx:VBox verticalGap="0" width="229" height="39">
					<mx:HSlider  id="hs" value="{_lineSize}" minimum="1" maximum="20" snapInterval="1" tickInterval="1" liveDragging="true"/>
					<mx:Label id="lb_lineSize" text="笔刷大小:{hs.value}px"/>
				</mx:VBox>
				<mx:VBox verticalGap="0" height="39">
					<mx:HSlider  id="fillalpha"  value="{_fillAlpha}" minimum="0" maximum="1" tickInterval="0.1" snapInterval="0.1" liveDragging="true"/>
					<mx:Label id="lb_fillAlpha" text="填充区透明度:{fillalpha.value}"/>
				</mx:VBox>
			</mx:HBox>
			<mx:HRule x="0" y="136" width="462" height="1"/>
			<mx:TextInput id="fillColor" x="180" y="16" width="30" height="25" backgroundColor="{_fillColor}" focusRect="false" editable="false"  focusIn="_changeFillFlag = true;" focusOut="_changeFillFlag = false;"/>
			<mx:TextInput id="lineColor" x="62" y="16" width="30" height="25" backgroundColor="{_lineColor}" focusRect="false" editable="false" focusIn="_changeLineFlag = true;" focusOut="_changeLineFlag = false;"/>
			<mx:Grid x="10" y="46" width="224.8" height="73">
				<mx:GridRow width="100%" height="100%">
					<mx:GridItem width="100%" height="100%" backgroundColor="black" click="changeColor(event)">
					</mx:GridItem>
					<mx:GridItem width="100%" height="100%" backgroundColor="white" click="changeColor(event)">
					</mx:GridItem>
					<mx:GridItem width="100%" height="100%" backgroundColor="gray" click="changeColor(event)">
					</mx:GridItem>
					<mx:GridItem width="100%" height="100%" backgroundColor="yellow" click="changeColor(event)">
					</mx:GridItem>
				</mx:GridRow>
				<mx:GridRow width="100%" height="100%">
					<mx:GridItem width="100%" height="100%" backgroundColor="purple" click="changeColor(event)">
					</mx:GridItem>
					<mx:GridItem width="100%" height="100%" backgroundColor="red" click="changeColor(event)">
					</mx:GridItem>
					<mx:GridItem width="100%" height="100%" backgroundColor="green" click="changeColor(event)">
					</mx:GridItem>
					<mx:GridItem width="100%" height="100%" backgroundColor="blue" click="changeColor(event)">
					</mx:GridItem>
				</mx:GridRow>
			</mx:Grid>
		</mx:Canvas>
	</mx:Canvas>
</mx:TitleWindow>
 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值