Flex画夹实现

Flex画板实现～
由于项目要求，需要开发一个基于Flex的白板和共享文档功能。在网上找了一把，基本上没有一个完整的关于白板和文档共享的实例代码，所以干脆自己写了一个，这里贴出基本的画板代码，基于这个画板，结合Red5就可以开发出白板和文档共享了；这里没有包含Red5的实现，需要的自己加上Red5连接和函数调用就OK了。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute" initialize="init()" fontSize="12">
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.ScrollEvent;
			import mx.controls.Button;
			import mx.events.ListEvent;
			import qflag.ucstar.flex.draw.impl.RectangClearDrawImpl;
			import qflag.ucstar.flex.draw.impl.TextDrawImpl;
			import qflag.ucstar.flex.draw.impl.EclipseDrawImpl;
			import qflag.ucstar.flex.draw.impl.CycleDrawImpl;
			import mx.core.UIComponent;
			import qflag.ucstar.flex.draw.impl.RectangDrawImpl;
			import qflag.ucstar.flex.draw.impl.LineDrawImpl;
			import qflag.ucstar.flex.draw.IDraw;
			import mx.utils.URLUtil;
			import mx.controls.Alert;
			import org.red5.net.User;

			import mx.binding.utils.BindingUtils;
			import mx.managers.CursorManager;
			
			//当前画图工具
			private var currentDraw:IDraw;
			
			//当前北京图片
			private var currentImage:Image;
			
			//当前文字域
			public var currentTextArea:TextArea;
			
			private var currentButton:Button;
			
			//颜色拾取器的属性绑定
			[Bindable]
			public var _lineSize:Number=3;
			[Bindable]
			public var _lineColor:uint=0xff0000;
			[Bindable]
			public var _lineColorFill:uint=0x000000;
			[Bindable]
			public var _fontColor:uint=0xff0000;
			[Bindable]
			public var _fillAlpha:Number=1;
			
			//共享文档翻页
			private var pageImageBaseUrl:String = "http://192.168.1.6/flex/";
			private var pageImageName = "test";
			private var pageImageExtend = ".jpg";
			private var maxCount:Number = 3; //从0开始，例如3就是(0,1,2,3)
			private var currentPage:Number = 0;
			
			public var SELF_CLIENTID:String = "self"; //客户端本身的ID
			
			//获取图像地址
			public function getCurrentImageUrl():String {
				var result:String = pageImageBaseUrl + pageImageName + currentPage + pageImageExtend;
				return result;
			}
			
			//初始化连接
			public function init():void
			{
				
				//将颜色拾取器对象绑定到全局属性中
				BindingUtils.bindProperty(this, "_lineSize", hs, "value");
				BindingUtils.bindProperty(this, "_fillAlpha", hs_fill, "value");
				BindingUtils.bindProperty(this, "_lineColor", cp, "selectedColor");
				BindingUtils.bindProperty(this, "_lineColorFill", cp_fill, "selectedColor");
				BindingUtils.bindProperty(this, "_fontColor", cp_font_color, "selectedColor");
				
				hs.addEventListener(FlexEvent.VALUE_COMMIT, testValueCommit);
				
				//Alert.show(URLUtil.getServerNameWithPort(appurl));
				//testImage.load("http://192.168.1.6/flex/test1.jpg");
				
				//初始化画图变量
				myPanel.graphics.beginFill(0xffffff);
				//this.graphics.drawRect(0, 0, this.width, this.height);
				myPanel.graphics.endFill();
				
				currentImage = new Image();
				//imageUi.setStyle("backgroundImage","http://192.168.1.6/flex/test1.jpg");
				myPanel.addChild(currentImage);
				//myPanel.setStyle("backgroundImage","http://192.168.1.6/flex/test1.jpg");
				
				myPanel.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
				myPanel.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
				myPanel.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
				myPanel.addEventListener(ScrollEvent.SCROLL, onScrolling);
//				log2.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
				
				changeDraw(0);
				
				//初始化共享文档信息
				initDocument();
			}
			
			//初始化共享文档信息
			public function initDocument():void {
				
				currentImage.load(getCurrentImageUrl());
				var vPageData:Array = new Array();
				for(var i:int = 0; i<maxCount; i++) {
					vPageData[i] = "第" + (i+1) + "页";
				}
				vPageSelect.dataProvider = vPageData;
				vPageSelect.addEventListener(ListEvent.CHANGE, onVPageChange);
			}
			
			public function logDebug(str:String):void {
				log.text = str;
			}
			
			/**
			 * ***************************************************
			 * 鼠标点击、拖动、放开事件
			 * 
			 **/
			private function onMouseDown(event:MouseEvent):void
			{
				
				//边缘上的滚动条样式不能添加画板事件
				if(myPanel.mouseX > myPanel.width - 20) {
					return;
				}
				if(myPanel.mouseY > myPanel.height - 20) {
					return;
				}
				onDrawDown(myPanel.mouseX,myPanel.mouseY);
				//soChat.send("onDrawDown", myPanel.mouseX,myPanel.mouseY); //RED5事件
				//onDrawDown(event.localX,event.localY);
			}

			private function onMouseUp(event:MouseEvent):void
			{
				
				onDrawUp(myPanel.mouseX,myPanel.mouseY);
				//soChat.send("onDrawUp", myPanel.mouseX,myPanel.mouseY); //RED5事件
				//onDrawUp(event.localX,event.localY);
			}

			private function onMouseMove(event:MouseEvent):void
			{
				
				onDrawMove(myPanel.mouseX,myPanel.mouseY);
				//soChat.send("onDrawMove", myPanel.mouseX,myPanel.mouseY); //RED5事件
				//onDrawMove(event.localX,event.localY);
			}
			
			public function onKeyUp(event:KeyboardEvent):void {
				var currentText:String = "";
				if(currentTextArea != null) {
					currentText = currentTextArea.text;
				}
				onDrawKeyUp(currentText);
				//soChat.send("onDrawKeyUp", currentText); //RED5事件
			}
			
			public function onScrolling(event:ScrollEvent):void {
			}
			
			public function onFoucusOut(event:FocusEvent):void {
				onDrawFoucusKeyUp(this.currentTextArea.text);
				//soChat.send("onDrawFoucusKeyUp"); //RED5事件
			}
			
			/**
			 * ***********************************************************
			 * 触发相应的事件,本地事件通知过来的或者是Red5远程通知过来的事件
			 * 
			 **/
			
			public function onDrawDown(mX:Number, mY:Number):void
			{
				this.currentDraw.onDrawDown(SELF_CLIENTID,mX,mY);
				logDebug("onDrawDown:"+mX+","+mY);
			}

			public function onDrawMove(mX:Number, mY:Number):void
			{
				this.currentDraw.onDrawMove(SELF_CLIENTID,mX,mY);
				logDebug("onDrawMove:"+mX+","+mY);
			}

			public function onDrawUp(mX:Number, mY:Number):void
			{
				this.currentDraw.onDrawUp(SELF_CLIENTID,mX,mY);
				logDebug("onDrawUp:"+mX+","+mY);
			}
			
			public function onDrawKeyUp(text:String):void
			{
				this.currentDraw.onDrawKeyUp(SELF_CLIENTID,text);
			}
			
			public function onDrawFoucusKeyUp(text:String):void {
				this.currentDraw.onFoucusOut(SELF_CLIENTID,text);
			}
			
			public function onChangeDocument(_page:Number) {
				this.currentPage = _page;
				vPageSelect.selectedIndex = _page;
				currentImage.load(this.getCurrentImageUrl());
			}
			
			/**
			 * ***************************************************
			 * 按钮事件
			 * 
			 **/
			 //清除白板
			public function onClear():void
			{
				this.graphics.lineStyle(0, 0, 0);
				this.graphics.beginFill(0xffffff, 1);
				this.graphics.drawRect(0, 0, this.width, this.height);
				this.graphics.endFill();
				this.myPanel.removeAllChildren();
				
				this.myPanel.addChild(currentImage);
			}
			
			private function sendClear():void
			{
				//soChat.send("onClear");
				onClear();
			}
			
			private function changeDraw(x:Number):void {
				switch(x) {
					case 0: {currentDraw = new LineDrawImpl();currentDraw.init(myPanel);break;}
					case 1: {currentDraw = new RectangDrawImpl();currentDraw.init(myPanel);break;}
					case 2: {currentDraw = new CycleDrawImpl();currentDraw.init(myPanel);break;}
					case 3: {currentDraw = new EclipseDrawImpl();currentDraw.init(myPanel);break;}
					case 4: {currentDraw = new TextDrawImpl();currentDraw.init(myPanel);break;}
					case 5: {currentDraw = new RectangClearDrawImpl();currentDraw.init(myPanel);break;}
					default: {currentDraw = new LineDrawImpl();currentDraw.init(myPanel);break;}
				}
			}
			
			//翻页动作
			private function changeImage(type:Number):void
			{
				switch(type) {
					//向前翻页
					case -1: {
						if(currentPage > 0) {
							currentPage--;
						} else {
							Alert.show("当前页为首页!");
							return;
						}
						break;
					}
					//向后翻页
					case 1: {
						if((currentPage+1) < maxCount) {
							currentPage++;
						} else {
							Alert.show("当前页为末页!");
							return;
						}
						break;
					}
					
				}
				
				
				onChangeDocument(currentPage);
				//soChat.send("onChangeDocument", currentPage); //RED5事件
			}
			
			//选择页面动作
			public function onVPageChange(event:ListEvent):void {
				onChangeDocument(vPageSelect.selectedIndex);
				//soChat.send("onChangeDocument", currentPage); //RED5事件
			}
			
			public function testValueCommit(event:FlexEvent):void {
				Alert.show(""+event+""+this._lineSize);
			}
			 
			
			
		]]>
	</mx:Script>
	<mx:Panel width="100%"
			  height="100%">
		<mx:Canvas id="myPanel"
				   x="113.5"
				   y="83"
				   width="100%"
				   height="90%"
				   buttonMode="true"
				   borderStyle="outset"
				   >
		<mx:Image id="testImage" alpha="1"></mx:Image>
		</mx:Canvas>

		<mx:HBox width="100%">
			
			<mx:Button label="上一页" click="changeImage(-1);"/>
			<mx:ComboBox id="vPageSelect"></mx:ComboBox>
			<mx:Button label="下一页" click="changeImage(1);"/>
			<mx:Button label="画笔" click="changeDraw(0);"/>
			<mx:Button label="矩形" click="changeDraw(1);"/>
			<mx:Button label="圆形" click="changeDraw(2);"/>
			<mx:Button label="椭圆" click="changeDraw(3);"/>
			<mx:Button label="文字" click="changeDraw(4);"/>
			<mx:Button label="矩形橡皮" click="changeDraw(5);"/>
			<mx:Button label="清空内容" click="sendClear();"/>
			
			<mx:TextArea id="log" height="51" fontSize="12" wordWrap="false" width="159"/>
			<mx:TextArea id="log2"/>
		</mx:HBox>
		<mx:HBox width="100%">
			<mx:VBox>
				<mx:HBox width="100%">
					<mx:Label text="线条大小:"/><mx:HSlider id="hs" value="{_lineSize}" minimum="0" maximum="3" width="100"/>
					<mx:Label text="线条颜色:"/><mx:ColorPicker id="cp" selectedColor="{_lineColor}"/>
				</mx:HBox>
			</mx:VBox>
			<mx:VBox>
				<mx:HBox width="100%">
					<mx:Label text="填充透明度:"/><mx:HSlider id="hs_fill" value="{_fillAlpha}" minimum="0" maximum="1" width="100"/>
					<mx:Label text="填充颜色:"/><mx:ColorPicker id="cp_fill" selectedColor="{_lineColorFill}"/>
				</mx:HBox>
			</mx:VBox>
			<mx:VBox>
				<mx:HBox width="100%">
					<mx:Label text="文字颜色:"/><mx:ColorPicker id="cp_font_color" selectedColor="{_fontColor}"/>
				</mx:HBox>
			</mx:VBox>
		</mx:HBox>
	</mx:Panel>
</mx:Application>

以上是主页面的代码，详细代码参考src.rar附件~