`
presses
  • 浏览: 119425 次
  • 性别: Icon_minigender_1
  • 来自: 中山
社区版块
存档分类
最新评论

flex实现手写在线签名

FlexFlashActionScriptServletGoogle 
阅读更多
    企业信息系统中，有时候需要用到手写签名的功能。在这里用flex实现一个。功能实现了，效果还在改善中。
     在线手写签名分两部份。第一部分是画图功能的实现，第二部份是上传图片的功能（上传到服务器或保存到本地）。
     画图：画图比较简单，只要用到了graphics对像的几个方法。当鼠标按下时，调用graphics的beginFill和moveTo方法。同时，还要把调用了lineTo的方法加入到鼠标的MOUSE_MOVE事件中。代码如下： 

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
{
	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);
		}
		
		
	}
}

          到这里为止，功能已经实现了。但效果不太好。主要是签名时，笔画不圆滑，在flex的api中，好像找不到在flash中设置圆滑的功能。

           效果图：http://piterlin.appspot.com/
分享到：
| 发布一个企业平台的flex应用例子
评论
13 楼 zlsj80 2009-12-09  
楼主，你这个有人在你的基础上改进了
http://bbs.airia.cn/FLEX/thread-8769-1-1.aspx
12 楼 starone 2009-11-04  
期待LZ打包
11 楼 presses 2009-09-25  
<p><br><img src="http://dl.iteye.com/upload/attachment/150472/b38afe29-2b3c-365a-8066-5e9fe8777034.jpg" alt=""></p>
<p> </p>
<p><span style="white-space: pre;"> </span>我上面就说了，效果不怎么样。呵呵。</p>
10 楼 wei495715356 2009-09-24  
毛笔的 毛字好像不能写呢
9 楼 presses 2009-08-26  
<pre name="code" class="MXML">&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="200" title="控制栏"&gt;
&lt;mx:Label x="10" y="11" text="模式" width="56" textAlign="right"/&gt;
&lt;mx:ComboBox x="85" y="6" fontSize="12" fontWeight="normal" id="pattern"&gt;
&lt;mx:dataProvider&gt;
&lt;mx:Array&gt;
&lt;mx:String&gt;圆珠笔&lt;/mx:String&gt;
&lt;mx:String&gt;毛笔&lt;/mx:String&gt;
&lt;/mx:Array&gt;
&lt;/mx:dataProvider&gt;
&lt;/mx:ComboBox&gt;
&lt;mx:HRule x="13" y="37" width="192" height="4"/&gt;
&lt;mx:Label x="0" y="48" text="笔画粗细" width="66" textAlign="right"/&gt;
&lt;mx:NumericStepper x="85" y="46" minimum="1" maximum="5" stepSize="1" id="size"/&gt;
&lt;mx:HRule x="13" y="74" width="192" height="8"/&gt;
&lt;mx:Label x="10" y="89" text="颜色" width="56" textAlign="right"/&gt;
&lt;mx:ColorPicker x="85" y="89" id="color"/&gt;
&lt;mx:HRule x="13" y="115" width="192" height="6"/&gt;
&lt;mx:Button x="10" y="129" label="清空" id="reset"/&gt;
&lt;mx:Button x="58" y="129" label="上传图片" id="savePic"/&gt;
&lt;mx:Button x="124" y="129" label="下载图片" id="downloadPic" enabled="false"/&gt;
&lt;/mx:Panel&gt;
</pre>
<p> 全部类都帖上来了，以后有时间再打包上传。</p>
8 楼 key232323 2009-08-25  
lz

那个 MyControlBar的代码，也分享下吧

干脆整个工程给个，我刚懂点as，flex都搞不定呵
麻烦一下
7 楼 p_x1984 2009-07-10  
路过,过来瞧瞧!
6 楼 zylucky 2009-07-10  
能发一个份给我吗。。谢谢  zhangyong0129@126.com
5 楼 lydawen 2009-06-28  
如果换成光笔就强大了~
4 楼 wuxi15932077655 2009-06-27  
牛X 我就想说牛X 为什么不让说两个字！
3 楼 presses 2009-06-14  
java端主要有两个方法。一个是接收客户端保存图片时的流，另一个是根据客户端的ID返回流。当前例子是运行在google app engine上的。以下是核心代码：
servlet: 
/**
 * 
 */
package com.humanmonth.rea.pic;

import java.io.IOException;
import java.util.logging.Logger;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.IOUtils;

import com.google.appengine.api.datastore.Blob;
import com.humanmonth.framework.web.servlet.Action;
import com.humanmonth.framework.web.servlet.AutoMapperServlet;
import com.humanmonth.framework.web.servlet.ServletUtil;

/**
 * @author presses
 * 
 */
@SuppressWarnings("serial")
public class PictureServlet extends AutoMapperServlet {
private Logger log=Logger.getLogger(this.getClass().getName());
	/**
	 * 测试
	 */
	@Action("sayHi")
	public void sayHi(HttpServletRequest req, HttpServletResponse res) throws IOException {
		ServletUtil.outTips(res, "hi", null);
	}

	/**
	 * 保存图片
	 */
	@Action("savePic")
	public void savePic(HttpServletRequest req, HttpServletResponse res) throws IOException {
String name= ServletUtil
.getStringParameterWithTrim(req, "name");
if(name==null){
	name="签名.jpg";
}
		Picture pic = new Picture(ServletUtil.getStringParameterWithTrim(req, "module"),name, new Blob(IOUtils.toByteArray(req.getInputStream())));
		new PictureService().savePic(pic);
		log.info("保存的文件大小："+pic.getContent().getBytes().length);
		ServletUtil.outView(res, pic.getId());
	}

	/**
	 * 查找所有图片
	 */
	@Action("queryAllPic")
	public void queryAllPic(HttpServletRequest req, HttpServletResponse res) throws IOException {
		String result = "";
		for (Picture pic : new PictureService().queryAllPicture()) {
			if (pic.getContent() == null) {
				continue;
			}
			result += new String(pic.getContent().getBytes(), "utf-8") + ":";
		}
		ServletUtil.outView(res, result);
	}

	/**
	 * 以ID获取图片
	 */
	@Action("queryPicById")
	public void queryPicById(HttpServletRequest req, HttpServletResponse res) throws IOException {
		String id = ServletUtil.getStringParameterWithTrim(req, "pid");
		log.info("开始下载文件,ID为:"+id);
		Picture pic = new PictureService().queryPicById(Long.valueOf(id));
		log.info("下载的文件大小："+pic.getContent().getBytes().length);
		ServletUtil.downloadToClient(res, pic.getContent().getBytes(), pic.getName());
	}
}


业务类： 

/**
 * 
 */
package com.humanmonth.rea.pic;

import java.util.List;
import java.util.logging.Logger;

import javax.jdo.PersistenceManager;

import com.humanmonth.framework.dao.JDOTemplate;

/**
 * @author presses
 * 
 */
public class PictureService {
	@SuppressWarnings("unused")
	private final Logger log=Logger.getLogger(this.getClass().getName());
	/**
	 * 保存图片
	 */
	public void savePic(final Picture pic) {
		new JDOTemplate<Picture>() {
			@Override
			public void deal(PersistenceManager pm, List<Picture> result) {
				pm.makePersistent(pic);
				pm.flush();
			}
		}.execute();
	}

	/**
	 * 以ID和条件获取图片
	 */
	public Picture queryPicById(final Long id) {
		return new JDOTemplate<Picture>() {
			@Override
			public void deal(PersistenceManager pm, List<Picture> result) {
				result.add((Picture) pm.getObjectById(Picture.class,id));
			}
		}.execute().get(0);
	}

	/**
	 * 查找所有的图片
	 */
	public List<Picture> queryAllPicture() {
		return new JDOTemplate<Picture>() {
			@SuppressWarnings("unchecked")
			@Override
			public void deal(PersistenceManager pm, List<Picture> result) {
				Object obj = pm.newQuery("select from " + Picture.class.getName()).execute();
				result.addAll((List<Picture>) obj);
			}
		}.execute();
	}
}


域对像： 
package com.humanmonth.rea.pic;

import java.sql.Date;

import javax.jdo.annotations.IdGeneratorStrategy;
import javax.jdo.annotations.IdentityType;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;

import com.google.appengine.api.datastore.Blob;

/**
 * 图片
 * 
 * @author presses
 * 
 */
@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class Picture {
	/**
	 * 主键
	 */
	@PrimaryKey
	@Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
	private Long id;
	/**
	 * 模块
	 */
	@Persistent
	private String module;
	/**
	 * 文件名
	 */
	@Persistent
	private String name;
	/**
	 * 内容
	 */
	@Persistent
	private Blob content;
	/**
	 * 保存时间
	 */
	@Persistent
	private Date date;

	public Picture(String module, String name,Blob content) {
		this.module = module;
		this.name=name;
		this.content = content;

	}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getModule() {
		return module;
	}

	public void setModule(String module) {
		this.module = module;
	}

	public Date getDate() {
		return date;
	}

	public void setDate(Date date) {
		this.date = date;
	}

	public Blob getContent() {
		return content;
	}

	public void setContent(Blob content) {
		this.content = content;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}
2 楼 pupyyang 2009-06-12  
我也想运行以下楼主的成果，能不能把java包给一给呢~~
1 楼 xhanxhanxhan 2009-05-03  
谢谢分享  原来10还能下载的
发表评论

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

相关推荐

    Flex 3.0 手写签名系统

    在Flex 3.0中，我们可以使用`Flash Player`的内置API来实现手写签名的功能。用户可以通过鼠标或触摸设备模拟笔迹，绘制出签名。关键在于监听鼠标的移动事件，并在每次鼠标移动时在舞台上添加新的图形对象，如线条，...

    flex 手写在线签名实现代码第1/2页

    本文所述的在线手写签名功能在Flex环境下实现，分为两个主要部分：画图功能和上传图片功能。 画图功能： 1. 创建一个Canvas容器，并在其上添加一个UIComponent作为签名的白板，这个组件用于绘制签名。 2. 定义基本...

    flex实现在线翻译

    【标题】：“flex实现在线翻译” 在Web应用开发中，Flex是一种基于Adobe Flash Player或Adobe AIR运行时的富互联网应用程序（RIA）框架。它允许开发者创建具有交互性和动态视觉效果的用户界面。在这个实例中，我们...

    flexwheel flex实现的图片滚动效果

    "Flexwheel"是基于Flex实现的一种特定组件，主要用于创建图片滚动和时间滚动的效果。这种效果常用于增强用户体验，尤其是在展示大量信息或者产品图片时，能够以吸引人的方式呈现内容。 首先，我们要理解什么是Flex...

    flex 实现网页在线拍照，支持ie8浏览器

    在本案例中，我们讨论的主题是如何使用Flex实现一个功能，允许用户在网页上进行在线拍照，并且这个功能需要兼容老旧的Internet Explorer 8（IE8）浏览器，同时支持照片预览。 在Flex中实现在线拍照，首先需要考虑的...

    flex实现的翻书功能的网站漂亮的flex实现swf及源码

    在本案例中，"flex实现的翻书功能的网站漂亮的flex实现swf及源码"，显然指的是使用Flex技术创建了一个模拟真实书籍翻页效果的交互式Web应用。这个应用不仅提供了视觉上的吸引力，还具有高度的用户参与度，让浏览者...

    flex实现在线拍照

    标题中的“flex实现在线拍照”指的是使用Adobe Flex技术来创建一个功能，允许用户通过Web浏览器进行实时拍照。Flex是一个开源的、基于ActionScript的框架，主要用于构建富互联网应用程序（RIA）。它提供了丰富的用户...

    Flex实现的计算器

    在这个"Flex实现的计算器"项目中，开发者使用了Adobe Flex来设计和开发一个基本的计算器，具备进行基本数学运算如加、减、乘、除的功能。 1. **Flex框架介绍** Flex提供了MXML和ActionScript两种编程语言，其中...

    基于java+flex实现的聊天程序

    《基于Java+Flex实现的聊天程序详解》 在信息技术领域，构建实时的在线聊天系统是一项常见的挑战。本项目“基于Java+Flex实现的聊天程序”提供了一种有效的解决方案，它结合了Java的强大后端处理能力和Flex的富...

    Flex实现的xmpp消息发送接收

    在这个特定的场景中，"Flex实现的xmpp消息发送接收"是指使用Flex技术来实现在Android、iOS等移动设备以及IE浏览器上的即时通讯功能。 XMPP（Extensible Messaging and Presence Protocol）是一种开放标准的协议，...

    flex实现边框

    本篇文章将详细解释如何使用Flex来实现边框以及添加标题，并重点关注在标题框中显示文本的实现方法。 首先，我们需要了解Flex中的容器和组件。容器是Flex应用程序的基础，它们可以包含一个或多个组件，如按钮、文本...

    flex实现简单浏览器

    flex实现简单浏览器,flex AIR中HTML控件实现了简单的网页浏览效果

    flex实现数据表格。

    在本实例中，“flex实现数据表格”指的是使用Flex技术来创建一个数据展示组件，即Datagrid，用于显示结构化的数据。Datagrid是Flex中非常重要的一个组件，它允许用户以表格形式查看和操作大量数据。 Flex Datagrid...

    flex布局Flex实现常见布局的汇总

    一类是给flex容器设置的，一类是给flex子元素设置的，本文在介绍一些典型场景实现的同时也会顺带讲解部分属性，当然更详细的内容可以阅读MDN上的教程。接下来需要使用到flex-grow属性，这个是flex子元素上的属性，...

    j2ee+FLEX实现在线拍照

    在这个“j2ee+FLEX实现在线拍照”的项目中，Flex将提供拍照和图像处理的功能，用户可以直接在Web浏览器中进行拍照或选择本地图片上传；而后端的J2EE服务器则处理图片上传、存储和可能的进一步处理。 为了实现这一...

    flex实现QQ面板效果

    flex实现QQ面板效果flex实现QQ面板效果flex实现QQ面板效果flex实现QQ面板效果

    flex实现旋转效果

    在本文中，我们将深入探讨如何使用Flex来实现一个图片旋转效果，这在产品展示或交互式界面设计中非常常见。Flex是一种强大的、基于XML的框架，用于构建富互联网应用程序（RIA），尤其适用于创建动态、响应式的用户...

    Flex实现打印预览

    在Flex中实现打印预览功能可以帮助用户在正式打印前检查文档布局和格式，确保打印效果符合预期。以下是对Flex中实现打印预览功能的详细解释： 一、Flex中的打印服务 Flex内置了`flash.printing.PrintJob`类，提供了...

    flex实现阴影效果

    在本文中，我们将深入探讨如何使用Flex技术来实现阴影效果。Flex是一种强大的开发框架，主要用于构建富互联网应用程序（RIA），特别是在Adobe AIR和Flash Player环境中。它提供了丰富的组件库、强大的数据绑定机制...

    Flex实现国际化样例

    这篇博客“Flex实现国际化样例”将指导我们如何在Flex项目中实现这一功能。 在Flex中实现国际化通常涉及以下几个核心概念： 1. **资源文件**：在Flex项目中，我们会创建一系列的资源文件，每个文件对应一种语言。...

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