flex实现手写在线签名

 转载自：http://www.iteye.com/topic/377994

Actionscript代码

package com.humanmonth.home.component.page.signature
{
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.LineScaleMode;
    import flash.events.MouseEvent;

    import mx.containers.Canvas;
    import mx.core.UIComponent;

    /**
     * 实现手写签名的白板
     * @author presses
     *
     */
    public class WriteArea extends Canvas
    {
        /**
         *笔
         */
        public var signature:UIComponent=new UIComponent();
        /**
         *颜色
         */
        public var myColor:uint=0x000000;
        /**
         *线条粗细
         */
        public var lineSize:int=1;
        /**
         *模式
         */
        public var pattern:String="圆珠笔";
        /**
         *当前的x座标
         */
        private var cX:Number;
        /**
         *当前的y座标
         */
        private var cY:Number;

        public function WriteArea()
        {
            this.addChild(signature);
            this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);
            this.addEventListener(MouseEvent.MOUSE_UP,endDraw);
        }

        /**
         *鼠标压下时，开始画图，并添加移动鼠标画线的监听器
         */
        private function beginDraw(event:MouseEvent):void{
            this.signature.graphics.lineStyle(lineSize,myColor,1,true,LineScaleMode.NONE,CapsStyle.ROUND,JointStyle.ROUND,99);
            this.signature.graphics.beginFill(myColor);
            this.cX=event.localX;
            this.cY=event.localY;
            this.signature.graphics.moveTo(this.cX,this.cY);
            this.addEventListener(MouseEvent.MOUSE_MOVE,drawIng);
        }

        /**
         * 鼠标移动时，画线
         */
        private function drawIng(event:MouseEvent):void{
            if(this.pattern=="圆珠笔"){
                this.signature.graphics.moveTo(this.cX,this.cY);
            }
            this.signature.graphics.lineTo(event.localX,event.localY);
            this.cX=event.localX;
            this.cY=event.localY;
        }

        /**
         * 结束画图
         */
        private function endDraw(event:MouseEvent):void{
            this.removeEventListener(MouseEvent.MOUSE_MOVE,drawIng);
        }

    }
}

效果图：http://rea.humanmonth.com/

package com.humanmonth.home.component.page.signature
{
	import flash.display.CapsStyle;
	import flash.display.JointStyle;
	import flash.display.LineScaleMode;
	import flash.events.MouseEvent;
	
	import mx.containers.Canvas;
	import mx.core.UIComponent;
	
	/**
	 * 实现手写签名的白板
	 * @author presses
	 * 
	 */
	public class WriteArea extends Canvas
	{
		/**
		 *笔 
		 */
		public var signature:UIComponent=new UIComponent();
		/**
		 *颜色 
		 */
		public var myColor:uint=0x000000;
		/**
		 *线条粗细 
		 */
		public var lineSize:int=1;
		/**
		 *模式 
		 */
		public var pattern:String="圆珠笔";
		/**
		 *当前的x座标 
		 */
		private var cX:Number;
		/**
		 *当前的y座标 
		 */
		private var cY:Number;
		
		public function WriteArea()
		{
			this.addChild(signature);
			this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);
			this.addEventListener(MouseEvent.MOUSE_UP,endDraw);
		}
		
		/**
		 *鼠标压下时，开始画图，并添加移动鼠标画线的监听器 
		 */
		private function beginDraw(event:MouseEvent):void{
			this.signature.graphics.lineStyle(lineSize,myColor,1,true,LineScaleMode.NONE,CapsStyle.ROUND,JointStyle.ROUND,99);
			this.signature.graphics.beginFill(myColor);
			this.cX=event.localX;
			this.cY=event.localY;
			this.signature.graphics.moveTo(this.cX,this.cY);
			this.addEventListener(MouseEvent.MOUSE_MOVE,drawIng);
		}
		
		/**
		 * 鼠标移动时，画线 
		 */
		private function drawIng(event:MouseEvent):void{
			if(this.pattern=="圆珠笔"){
				this.signature.graphics.moveTo(this.cX,this.cY);
			}
			this.signature.graphics.lineTo(event.localX,event.localY);
			this.cX=event.localX;
			this.cY=event.localY;
		}
		
		/**
		 * 结束画图 
		 */
		private function endDraw(event:MouseEvent):void{
			this.removeEventListener(MouseEvent.MOUSE_MOVE,drawIng);
		}
		
	}
}

            上传签名图片（上传到服务器或保存到本地）:fp10(flash player)可以不经服务器，直接把图片保存到本地。但为了兼容fp9,这里的实现是先把图片上传到服务器，再调用下载功能。实现的思路是先把画图的组件转化为BitmapData,然后再编码成jpeg格式，并上传到服务器。最后调用客户端下载。这里要注意的一点是，fp10对下载的api作了限制，下载动作只能由用户触发。代码如下：

package com.humanmonth.home.component.page.signature.remote
{
    import com.humanmonth.global.Config;

    import flash.display.BitmapData;
    import flash.events.Event;
    import flash.net.FileReference;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;

    import mx.controls.Alert;
    import mx.graphics.codec.JPEGEncoder;
    import mx.managers.CursorManager;

    /**
     * 图片的上传及下载
     * @author presses
     *
     */
    public class Connector
    {
        private var file:FileReference;
        private var myId:String;
        public function Connector()
        {
        }

        /**
         * 保存图片
         */
        public function savePic(myData:BitmapData,fun:Function):void{
            CursorManager.setBusyCursor();
            var url:String=Config.picLink+"rea/pic.do?action=savePic&timestamp="+new Date().getTime();
            var request:URLRequest = new URLRequest(url);
            request.method=URLRequestMethod.POST;
            request.contentType = "application/octet-stream";
            request.data=new JPEGEncoder(80).encode(myData);
            var loader:URLLoader = new URLLoader();
            loader.load(request) ;
            loader.addEventListener(Event.COMPLETE, fun) ;
            loader.addEventListener(Event.COMPLETE,initMyId);
            Alert.show("正在上传图片，等待数秒后，即可下载图片");
        }

        private function initMyId(event:Event):void{
            CursorManager.removeBusyCursor();
            var loader:URLLoader=URLLoader(event.target);
            this.myId=loader.data;
            Alert.show("上传图片成功，现在可以点击‘下载图片’按钮，保存图片到本地。");

        }

        /**
         * 下载图片
         */
        public function downloadFile(event:Event):void{
            var url2:String=Config.picLink+"rea/pic.do?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();
            var req:URLRequest=new URLRequest(url2);
            file=new FileReference();
            file.download(req,"humanmonth.jpg");
        }
    }
}

package com.humanmonth.home.component.page.signature.remote
{
	import com.humanmonth.global.Config;
	
	import flash.display.BitmapData;
	import flash.events.Event;
	import flash.net.FileReference;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	
	import mx.controls.Alert;
	import mx.graphics.codec.JPEGEncoder;
	import mx.managers.CursorManager;
	
	/**
	 * 图片的上传及下载
	 * @author presses
	 * 
	 */
	public class Connector
	{
		private var file:FileReference;
		private var myId:String;
		public function Connector()
		{
		}
		
		/**
		 * 保存图片
		 */
		public function savePic(myData:BitmapData,fun:Function):void{
		    CursorManager.setBusyCursor();
			var url:String=Config.picLink+"rea/pic.do?action=savePic&timestamp="+new Date().getTime();
 			var request:URLRequest = new URLRequest(url); 			
 			request.method=URLRequestMethod.POST;
		 	request.contentType = "application/octet-stream"; 
 			request.data=new JPEGEncoder(80).encode(myData);
            var loader:URLLoader = new URLLoader();                  
            loader.load(request) ;        
            loader.addEventListener(Event.COMPLETE, fun) ; 	
            loader.addEventListener(Event.COMPLETE,initMyId);
            Alert.show("正在上传图片，等待数秒后，即可下载图片");		
		}
		
		private function initMyId(event:Event):void{
		    CursorManager.removeBusyCursor();
			var loader:URLLoader=URLLoader(event.target);
			this.myId=loader.data;
			Alert.show("上传图片成功，现在可以点击‘下载图片’按钮，保存图片到本地。");
			
		}
		
		/**
		 * 下载图片 
		 */
		public function downloadFile(event:Event):void{
			var url2:String=Config.picLink+"rea/pic.do?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();
			var req:URLRequest=new URLRequest(url2);
			file=new FileReference();
			file.download(req,"humanmonth.jpg");
		}
	}
}

 

package com.humanmonth.home.component.page.signature
{
    import com.humanmonth.home.component.page.signature.remote.Connector;

    import flash.display.BitmapData;
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.core.Application;
    import mx.events.ColorPickerEvent;
    import mx.events.FlexEvent;
    import mx.events.ListEvent;
    import mx.events.NumericStepperEvent;

    /**
     * 控制面版
     * @author presses
     *
     */
    public class MyControlBarAs extends MyControlBar
    {
        public var writearea:WriteArea;
        private var connector:Connector=new Connector();
        public function MyControlBarAs()
        {
            super();
            this.addEventListener(FlexEvent.CREATION_COMPLETE,myInit);
        }

        private function myInit(event:Event):void{
            this.writearea=Application.application.signature.writearea;
            this.reset.addEventListener(MouseEvent.CLICK,cleanArea);
            this.size.addEventListener(NumericStepperEvent.CHANGE,setLineSize);
            this.color.addEventListener(ColorPickerEvent.CHANGE,setColor);
            this.pattern.addEventListener(ListEvent.CHANGE,setPattern);
            this.savePic.addEventListener(MouseEvent.CLICK,savePicture);
            this.downloadPic.addEventListener(MouseEvent.CLICK,connector.downloadFile)
        }
        /**
         * 保存图片
         */
        private function savePicture(event:Event):void{
            var myData:BitmapData=new BitmapData(this.writearea.width,this.writearea.height);
            myData.draw(this.writearea);
            connector.savePic(myData,enableDownload);
        }

        private function enableDownload(event:Event):void{
            this.downloadPic.enabled=true;
        }
        /**
         * 设置模式
         */
        private function setPattern(event:Event):void{
            this.writearea.pattern=String(this.pattern.value);
        }
        /**
         * 清空写字区
         */
        private function cleanArea(event:Event):void{
            this.writearea.signature.graphics.clear();
        }

        /**
         * 设置线条粗细
         */
        public function setLineSize(event:Event):void{
            this.writearea.lineSize=this.size.value;
        }

        /**
         * 设置颜色
         */
        public function setColor(event:Event):void{
            this.writearea.myColor=uint(this.color.value);
        }


    }
}