flex实现手写在线签名

最新推荐文章于 2022-02-28 10:51:42 发布
最新推荐文章于 2022-02-28 10:51:42 发布
阅读量188 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Flex3 文章标签： Flex Flash ActionScript .net UP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cwfmaker/article/details/83396577

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

Actionscript代码 复制代码

  1. package com.humanmonth.home.component.page.signature   
  2. {   
  3.     import flash.display.CapsStyle;   
  4.     import flash.display.JointStyle;   
  5.     import flash.display.LineScaleMode;   
  6.     import flash.events.MouseEvent;   
  7.        
  8.     import mx.containers.Canvas;   
  9.     import mx.core.UIComponent;   
  10.        
  11.     /**   
  12.      * 实现手写签名的白板   
  13.      * @author presses   
  14.      *    
  15.      */   
  16.     public class WriteArea extends Canvas   
  17.     {   
  18.         /**   
  19.          *笔    
  20.          */   
  21.         public var signature:UIComponent=new UIComponent();   
  22.         /**   
  23.          *颜色    
  24.          */   
  25.         public var myColor:uint=0x000000;   
  26.         /**   
  27.          *线条粗细    
  28.          */   
  29.         public var lineSize:int=1;   
  30.         /**   
  31.          *模式    
  32.          */   
  33.         public var pattern:String="圆珠笔";   
  34.         /**   
  35.          *当前的x座标    
  36.          */   
  37.         private var cX:Number;   
  38.         /**   
  39.          *当前的y座标    
  40.          */   
  41.         private var cY:Number;   
  42.            
  43.         public function WriteArea()   
  44.         {   
  45.             this.addChild(signature);   
  46.             this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);   
  47.             this.addEventListener(MouseEvent.MOUSE_UP,endDraw);   
  48.         }   
  49.            
  50.         /**   
  51.          *鼠标压下时，开始画图，并添加移动鼠标画线的监听器    
  52.          */   
  53.         private function beginDraw(event:MouseEvent):void{   
  54.             this.signature.graphics.lineStyle(lineSize,myColor,1,true,LineScaleMode.NONE,CapsStyle.ROUND,JointStyle.ROUND,99);   
  55.             this.signature.graphics.beginFill(myColor);   
  56.             this.cX=event.localX;   
  57.             this.cY=event.localY;   
  58.             this.signature.graphics.moveTo(this.cX,this.cY);   
  59.             this.addEventListener(MouseEvent.MOUSE_MOVE,drawIng);   
  60.         }   
  61.            
  62.         /**   
  63.          * 鼠标移动时，画线    
  64.          */   
  65.         private function drawIng(event:MouseEvent):void{   
  66.             if(this.pattern=="圆珠笔"){   
  67.                 this.signature.graphics.moveTo(this.cX,this.cY);   
  68.             }   
  69.             this.signature.graphics.lineTo(event.localX,event.localY);   
  70.             this.cX=event.localX;   
  71.             this.cY=event.localY;   
  72.         }   
  73.            
  74.         /**   
  75.          * 结束画图    
  76.          */   
  77.         private function endDraw(event:MouseEvent):void{   
  78.             this.removeEventListener(MouseEvent.MOUSE_MOVE,drawIng);   
  79.         }   
  80.            
  81.     }   
  82. }  

效果图：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作了限制，下载动作只能由用户触发。代码如下：

Actionscript代码 复制代码
  1. package com.humanmonth.home.component.page.signature.remote   
  2. {   
  3.     import com.humanmonth.global.Config;   
  4.        
  5.     import flash.display.BitmapData;   
  6.     import flash.events.Event;   
  7.     import flash.net.FileReference;   
  8.     import flash.net.URLLoader;   
  9.     import flash.net.URLRequest;   
  10.     import flash.net.URLRequestMethod;   
  11.        
  12.     import mx.controls.Alert;   
  13.     import mx.graphics.codec.JPEGEncoder;   
  14.     import mx.managers.CursorManager;   
  15.        
  16.     /**   
  17.      * 图片的上传及下载   
  18.      * @author presses   
  19.      *    
  20.      */   
  21.     public class Connector   
  22.     {   
  23.         private var file:FileReference;   
  24.         private var myId:String;   
  25.         public function Connector()   
  26.         {   
  27.         }   
  28.            
  29.         /**   
  30.          * 保存图片   
  31.          */   
  32.         public function savePic(myData:BitmapData,fun:Function):void{   
  33.             CursorManager.setBusyCursor();   
  34.             var url:String=Config.picLink+"rea/pic.do?action=savePic&timestamp="+new Date().getTime();   
  35.             var request:URLRequest = new URLRequest(url);              
  36.             request.method=URLRequestMethod.POST;   
  37.             request.contentType = "application/octet-stream";    
  38.             request.data=new JPEGEncoder(80).encode(myData);   
  39.             var loader:URLLoader = new URLLoader();                     
  40.             loader.load(request) ;           
  41.             loader.addEventListener(Event.COMPLETE, fun) ;     
  42.             loader.addEventListener(Event.COMPLETE,initMyId);   
  43.             Alert.show("正在上传图片，等待数秒后，即可下载图片");           
  44.         }   
  45.            
  46.         private function initMyId(event:Event):void{   
  47.             CursorManager.removeBusyCursor();   
  48.             var loader:URLLoader=URLLoader(event.target);   
  49.             this.myId=loader.data;   
  50.             Alert.show("上传图片成功，现在可以点击‘下载图片’按钮，保存图片到本地。");   
  51.                
  52.         }   
  53.            
  54.         /**   
  55.          * 下载图片    
  56.          */   
  57.         public function downloadFile(event:Event):void{   
  58.             var url2:String=Config.picLink+"rea/pic.do?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();   
  59.             var req:URLRequest=new URLRequest(url2);   
  60.             file=new FileReference();   
  61.             file.download(req,"humanmonth.jpg");   
  62.         }   
  63.     }   
  64. }  
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");
		}
	}
}

 

Actionscript代码 复制代码
  1. package com.humanmonth.home.component.page.signature   
  2. {   
  3.     import com.humanmonth.home.component.page.signature.remote.Connector;   
  4.        
  5.     import flash.display.BitmapData;   
  6.     import flash.events.Event;   
  7.     import flash.events.MouseEvent;   
  8.        
  9.     import mx.core.Application;   
  10.     import mx.events.ColorPickerEvent;   
  11.     import mx.events.FlexEvent;   
  12.     import mx.events.ListEvent;   
  13.     import mx.events.NumericStepperEvent;   
  14.        
  15.     /**   
  16.      * 控制面版   
  17.      * @author presses   
  18.      *    
  19.      */   
  20.     public class MyControlBarAs extends MyControlBar   
  21.     {   
  22.         public var writearea:WriteArea;   
  23.         private var connector:Connector=new Connector();   
  24.         public function MyControlBarAs()   
  25.         {   
  26.             super();   
  27.             this.addEventListener(FlexEvent.CREATION_COMPLETE,myInit);   
  28.         }   
  29.            
  30.         private function myInit(event:Event):void{   
  31.             this.writearea=Application.application.signature.writearea;   
  32.             this.reset.addEventListener(MouseEvent.CLICK,cleanArea);   
  33.             this.size.addEventListener(NumericStepperEvent.CHANGE,setLineSize);   
  34.             this.color.addEventListener(ColorPickerEvent.CHANGE,setColor);   
  35.             this.pattern.addEventListener(ListEvent.CHANGE,setPattern);   
  36.             this.savePic.addEventListener(MouseEvent.CLICK,savePicture);   
  37.             this.downloadPic.addEventListener(MouseEvent.CLICK,connector.downloadFile)   
  38.         }   
  39.         /**   
  40.          * 保存图片    
  41.          */   
  42.         private function savePicture(event:Event):void{   
  43.             var myData:BitmapData=new BitmapData(this.writearea.width,this.writearea.height);   
  44.             myData.draw(this.writearea);   
  45.             connector.savePic(myData,enableDownload);    
  46.         }   
  47.            
  48.         private function enableDownload(event:Event):void{   
  49.             this.downloadPic.enabled=true;   
  50.         }   
  51.         /**   
  52.          * 设置模式    
  53.          */   
  54.         private function setPattern(event:Event):void{   
  55.             this.writearea.pattern=String(this.pattern.value);   
  56.         }   
  57.         /**   
  58.          * 清空写字区    
  59.          */   
  60.         private function cleanArea(event:Event):void{   
  61.             this.writearea.signature.graphics.clear();   
  62.         }   
  63.            
  64.         /**   
  65.          * 设置线条粗细    
  66.          */   
  67.         public function setLineSize(event:Event):void{   
  68.             this.writearea.lineSize=this.size.value;   
  69.         }   
  70.            
  71.         /**   
  72.          * 设置颜色   
  73.          */   
  74.         public function setColor(event:Event):void{   
  75.             this.writearea.myColor=uint(this.color.value);   
  76.         }   
  77.            
  78.            
  79.     }   
  80. }  
uniapp 实现手写签名
qq_40890601的博客
06-29 3055
效果如下： 源代码 <template> <view > <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas> <view class="footer"> <view class="left" @click="finish" sty
flex 手写在线签名实现代码第1/2页
10-29
本文所述的在线手写签名功能在Flex环境下实现，分为两个主要部分：画图功能和上传图片功能。 画图功能： 1. 创建一个Canvas容器，并在其上添加一个UIComponent作为签名的白板，这个组件用于绘制签名。 2. 定义基本...
flash 签名 涂鸦 带保存
05-16
flash 签名 涂鸦 带保存 按s保存 缩放 按z清除！~~~~
Flex 字体样式
张 作强 BLOG
12-26 144
/*Spark包的设置方式*/ s|TextInput{ trackingLeft:4; trackingRight:4; } /*mx包的设置方式*/ mx|TextInput{ letterSpacing:4; } /*前面是命名空间*/ .teststyle1{ ...
Vue Canvas 实现电子签名 手写板
热门推荐
岁末zzz的博客
08-15 1万+
最近再做移动端电子签名，Vue+Canvas实现，移动端、PC端均可，也可以从github下载 。 我在做这个功能的时候参考了 这个代码，但是在移动端光标与实际划线有偏移，我在我的代码中修正了这个问题。 代码 <template> <section class="signature"> <div class="signatureBox...
小程序实现手写板签名
李湘湘的博客
02-28 1180
小程序实现手写板签名 1.wxss代码 page { background: #F8F8F8; } /* 签名 */ .qianming { background: #fff; padding: 20rpx 30rpx; font-size: 32rpx; color: #333; padding-bottom: 0; position: fixed; bottom: 0; left: 0; width: 92%; he
Flex实现在线手写签名技术分享
"这篇资源是关于使用Flex实现在线手写签名功能的代码示例，主要分为画图功能和上传图片两部分。作者分享了在Flex环境中如何创建一个基本的手写签名组件，允许用户进行签名并可能将其保存或上传至服务器。" 在Flex...
FLASH+JS在线手写输入，支持中日韩语。
12-21
FLASH+JS在线手写输入源码，支持中日韩语。 非常不错
Flex 3.0 手写签名系统
10-16
在Flex 3.0中，我们可以使用`Flash Player`的内置API来实现手写签名的功能。用户可以通过鼠标或触摸设备模拟笔迹，绘制出签名。关键在于监听鼠标的移动事件，并在每次鼠标移动时在舞台上添加新的图形对象，如线条，...
Flex与Java实现的手写签名功能源码解析
根据提供的文件信息，本文将详细解释与“Flex-Java实现手写签名源码健辉”相关的知识点。考虑到信息的重复性，我们将重点讨论Flex与Java结合实现手写签名的技术要点，并且假设在项目中可能使用到的SQL脚本以及服务端...
Flex手写签名与Java服务交互技术实现
Flex（现在称为Apache Flex）是一个开源的应用程序框架，...实现一个flex手写签名程序需要综合运用前端的ActionScript编程技能、后端Java服务的设计和开发能力，以及数据库的知识，来构建一个完整的交云互操作系统。
FLEX手写在线签名及手写签名墙
狼之梦---爱乌及屋
10-17 505
        一个FLEX在线手绘签名的东东。用户可以在线签名，然后保存图片到服务器。然后在后台用JAVA接收图片流保存到服务器。然后再在页面展示出来。 效果如下：         效果演示地址如下：http://www.wolfdream.cn/HandNamepage.html     现在除了手绘签名之外还有别的好多功能，如相册，手机日志，手机公告等等。 http://www...
手写签名 生成图片 php,jSignature 在网页上手写签名的插件(html5手写签名)
weixin_36255517的博客
03-18 891
【实例简介】jSignature 在网页上手写签名的插件(html5手写签名)在IE7~IE8这种不支持HTML5的浏览器上，是利用Flash嵌入的方式实现的签名处理，在支持的HTML5的浏览器上默认采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片。非常适合在IPAD等移动客户端上实现手写签名的，该插件基于JQuery【实例截图】【核心代码】jSignature-maste...
Flex常用技巧
cwfmaker的专栏
05-12 632
本文转载自：http://www.iteye.com/topic/311216   【改变输出swf的尺度,背景颜色或帧频】 在"Navigator"窗框里右键你的项目&gt;选中"Properties"&gt;选中"ActionScript Compiler"&gt;在"Additional compiler arguments"里输入你所需要的命令如想改变背景颜色,请输入: -defaul...
Flex RSL（Runtime Shared Library）
cwfmaker的专栏
12-10 214
        RSL是 Runtime Shared Library的简称，意思是运行时共享库当前RSL主要有3个级别的，一个是Standard RSL（即一个网站内共享），一个是Cross-domain RSL（跨域共享），最后一个也是最关键的是Framework RSL（Flex框架共享）。 Framework RSL 意思是, 把Flex的类和库在程序运行时动态加载而不是封装在程序里面如果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值