企业信息系统中,有时候需要用到手写签名的功能。在这里用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://rea.humanmonth.com/
- 10:10
- 浏览 (113)
- 论坛浏览 (1363)
- 评论 (3)
- 分类: 人月软件
- 相关推荐
评论
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.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.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;
- }
- }