`
zorrolg
  • 浏览: 2966 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

FlexAIRAdobeFlashUP 
阅读更多

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

 

直接上代码吧，我的环境是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>
 

 

 

 

 

分享到：
浏览次数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Flex Google Map桌面地图应用程序

    7. **API集成**：作为Flex应用，它可能利用了Google Maps API来获取和处理地图数据，同时也可能与其他Google服务（如Geocoding API或Places API）进行集成。 8. **性能优化**：Flex通常比HTML5更擅长处理复杂的图形...

    Flex应用程序开发

    ### Flex应用程序开发：深入理解与实践 #### 一、Flex概览 Flex是Adobe Systems Incorporated推出的一款用于构建高质量的Rich Internet Applications（RIA）的开源框架。它基于Flash平台，允许开发者使用标准的Web...

    Flex开发AdobeAIR应用程序

    使用 Adobe Flex 3 开发 Adobe AIR 1.1 应用程序

    flex做的桌面应用程序——电话本

    本人经常丢手机。所以做了个电话本，是桌面应用程序。好用。需要安装FLEX相关插件才可安装运行。

    Flex 桌面应用

    Flex桌面应用是基于Adobe Flex技术构建的用于开发桌面应用程序的框架。Adobe Flex最初是一个用于创建富互联网应用程序（RIA）的工具，后来发展出能够构建桌面应用程序的功能，这得益于Adobe AIR（Adobe Integrated ...

    Flex4：开发RIA应用程序

    - 桌面部署：使用Adobe AIR技术，Flex应用程序可被转换成桌面应用，通过桌面运行。 7. Flex开发流程： - 设计和规划：确定应用需求，设计用户界面和交互流程。 - 编写代码：使用MXML和ActionScript开发应用程序的...

    Flex开发移动设备应用程序

    ### Flex开发移动设备应用程序知识点概览 #### 一、引言 - **Adobe Flex与Adobe Flash Builder**: Adobe Flex 是一种开源框架，专为构建跨平台的桌面和移动应用程序而设计。Adobe Flash Builder 是一个集成开发环境...

    flex C# 基于socket 通讯 应用程序源码

    - BlazeDS或LiveCycle Data Services：Adobe提供的中间件，允许Flex应用程序与Java或.NET服务进行数据交换，包括Socket通信。 2. **C#服务端开发**： - `System.Net.Sockets.Socket`类：用于创建和管理Socket连接...

    Flex4开发RIA应用程序.pdf

    - **构建Flex应用程序**：开发者可以使用Flex框架来构建用户界面，并利用ActionScript添加逻辑处理功能。 - **体验Web和桌面应用程序**：Flex支持创建既可以在Web浏览器中运行也可以打包为独立桌面应用程序的应用。 ...

    使用Flex4.5开发Android应用程序

    总结，使用Flex 4.5开发Android应用程序可以借助其强大的UI组件库、良好的编程模型和对原生API的访问能力，实现高效、跨平台的移动应用开发。虽然现在Flex可能不再是主流的Android开发工具，但了解其工作原理和优势...

    企业应用FLEX开发实战

    第五章和第六章可能会探讨FLEX中的数据服务，如AMF通信、Web服务调用和 BlazeDS/LiveCycle Data Services的使用，让FLEX应用程序能够与后端服务器无缝交互，实现数据的获取和更新。 第七章至第九章可能涉及更高级的...

    使用Flex SDK创建第一个桌面AIR应用程序

    在本文中，我们将深入探讨如何使用Flex SDK创建第一个桌面Adobe Integrated Runtime (AIR)应用程序。首先，确保你已经安装了运行时环境并配置了Flex 3 SDK。主要涉及的工具包括AMXMLC编译器、AIR Debug Launcher ...

    一个flex的应用程序-画板

    - ActionScript是Flex应用程序的主要动力，负责处理所有的业务逻辑和交互行为。 - 对象和类的使用：可能自定义了一些类来封装特定的绘图功能或数据管理。 - 异步通信：如果应用需要保存或加载画作，可能涉及了与...

    flex画板简单版

    标题中的“flex画板简单版”指的是一个基于Adobe Flex技术实现的在线绘画应用程序。Flex是一种开源的、基于ActionScript的框架，用于构建富互联网应用程序（RIA）。它允许开发者使用MXML和ActionScript来构建交互式...

    使用 Flex 和 Flash Builder 开发手机应用程序

    Flex和Flash Builder是Adobe提供的两个强大的开发工具，它们被广泛用于开发各种应用程序。在移动设备应用程序的开发中，Flex和Flash Builder扮演着重要的角色。Flex主要负责应用程序的外观和界面设计，而Flash ...

    Flex画板实现～

    Flex画板实现主要涉及到的是Adobe Flex技术，这是一种用于构建富互联网应用程序（RIA）的开源框架。Flex使用MXML和ActionScript编程语言，基于Flash Player或Adobe AIR运行时环境，能够创建交互性强、视觉效果丰富的...

    Flex4：开发RIA应用程序 pdf

    5. **Graphical Builder (Flash Builder)**：Adobe Flash Builder是用于开发Flex应用的主要IDE，它提供了图形化的界面编辑器，使得开发者可以通过拖放方式创建和布局组件，提高开发效率。 6. **数据绑定**：Flex4中...

Magicbox
Global site tag (gtag.js) - Google Analytics