flex实现手写在线签名

企业信息系统中，有时候需要用到手写签名的功能。在这里用flex
实现一个。功能实现了，效果还在改善中。

在线手写签名分两部份。第一部分是画图功能的实现，第二部份是上传图片的功能（上传到服务器或保存到本地）。

画图：画图比较简单，只要用到了graphics对像的几个方法。当鼠标按下时，调用graphics的beginFill和moveTo方法。同时，还要把调用了lineTo的方法加入到鼠标的MOUSE_MOVE事件中。代码如下：

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

}

}

}

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代码

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

Actionscript代码

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

}

}

}

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)

分类: 人月软件

相关推荐

评论

3 楼
presses
2009-06-14
引用

java端主要有两个方法。一个是接收客户端保存图片时的流，另一个是根据客户端的ID返回流。当前例子是运行在google app engine上的。以下是核心代码：

servlet:

Java代码

/**

*

*/

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

业务类：

Java代码

/**

*

*/

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

域对像：

Java代码

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;

}

}