flex 手写在线签名实现代码第1/2页_Flash教程-查字典教程网
flex 手写在线签名实现代码第1/2页
flex 手写在线签名实现代码第1/2页
发布时间：2016-12-28 来源：查字典编辑
摘要：在线手写签名分两部份。第一部分是画图功能的实现，第二部份是上传图片的功能（上传到服务器或保存到本地）。画图：画图比较简单，只要用到了grap...

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

画图：画图比较简单，只要用到了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/

当前1/2页12下一页阅读全文

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
    •
    最新Flash教程学习
    热门Flash教程学习
    网页设计子分类