flex 手寫在線簽名實現(xiàn)代碼第1/2頁
更新時間：2009年08月03日 23:40:56 作者：
企業(yè)信息系統(tǒng)中，有時候需要用到手寫簽名的功能。在這里用flex 實現(xiàn)一個。功能實現(xiàn)了，效果還在改善中。
在線手寫簽名分兩部份。第一部分是畫圖功能的實現(xiàn)，第二部份是上傳圖片的功能（上傳到服務(wù)器或保存到本地）。
畫圖：畫圖比較簡單，只要用到了graphics對像的幾個方法。當(dāng)鼠標(biāo)按下時，調(diào)用graphics的beginFill和moveTo方法。同時，還要把調(diào)用了lineTo的方法加入到鼠標(biāo)的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;
/**
* 實現(xiàn)手寫簽名的白板
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*筆
*/
public var signature:UIComponent=new UIComponent();
/**
*顏色
*/
public var myColor:uint=0x000000 ;
/**
*線條粗細(xì)
*/
public var lineSize:int=1 ;
/**
*模式
*/
public var pattern:String="圓珠筆";
/**
*當(dāng)前的x座標(biāo)
*/
private var cX:Number;
/**
*當(dāng)前的y座標(biāo)
*/
private var cY:Number;
public function WriteArea()
{
this.addChild(signature);
this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);
this.addEventListener(MouseEvent.MOUSE_UP,endDraw);
}
/**
*鼠標(biāo)壓下時，開始畫圖，并添加移動鼠標(biāo)畫線的監(jiān)聽器
*/
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);
}
/**
* 鼠標(biāo)移動時，畫線
*/
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;
}
/**
* 結(jié)束畫圖
*/
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;
/**
* 實現(xiàn)手寫簽名的白板
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*筆
*/
public var signature:UIComponent=new UIComponent();
/**
*顏色
*/
public var myColor:uint=0x000000;
/**
*線條粗細(xì)
*/
public var lineSize:int=1;
/**
*模式
*/
public var pattern:String="圓珠筆";
/**
*當(dāng)前的x座標(biāo)
*/
private var cX:Number;
/**
*當(dāng)前的y座標(biāo)
*/
private var cY:Number;
public function WriteArea()
{
this.addChild(signature);
this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);
this.addEventListener(MouseEvent.MOUSE_UP,endDraw);
}
/**
*鼠標(biāo)壓下時，開始畫圖，并添加移動鼠標(biāo)畫線的監(jiān)聽器
*/
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);
}
/**
* 鼠標(biāo)移動時，畫線
*/
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;
}
/**
* 結(jié)束畫圖
*/
private function endDraw(event:MouseEvent):void{
this.removeEventListener(MouseEvent.MOUSE_MOVE,drawIng);
}
}
}
上傳簽名圖片（上傳到服務(wù)器或保存到本地）:fp10(flash player)可以不經(jīng)服務(wù)器，直接把圖片保存到本地。但為了兼容fp9,這里的實現(xiàn)是先把圖片上傳到服務(wù)器，再調(diào)用下載功能。實現(xiàn)的思路是先把畫圖的組件轉(zhuǎn)化為BitmapData,然后再編碼成jpeg格式，并上傳到服務(wù)器。最后調(diào)用客戶端下載。這里要注意的一點是，fp10對下載的api作了限制，下載動作只能由用戶觸發(fā)。代碼如下：
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("正在上傳圖片，等待數(shù)秒后，即可下載圖片");
}
private function initMyId(event:Event):void{
CursorManager.removeBusyCursor();
var loader:URLLoader=URLLoader(event.target);
this.myId=loader.data;
Alert.show("上傳圖片成功，現(xiàn)在可以點擊‘下載圖片'按鈕，保存圖片到本地。");
}
/**
* 下載圖片
*/
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("正在上傳圖片，等待數(shù)秒后，即可下載圖片");
}
private function initMyId(event:Event):void{
CursorManager.removeBusyCursor();
var loader:URLLoader=URLLoader(event.target);
this.myId=loader.data;
Alert.show("上傳圖片成功，現(xiàn)在可以點擊‘下載圖片'按鈕，保存圖片到本地。");
}
/**
* 下載圖片
*/
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;
}
/**
* 設(shè)置模式
*/
private function setPattern(event:Event):void{
this.writearea.pattern=String(this.pattern.value);
}
/**
* 清空寫字區(qū)
*/
private function cleanArea(event:Event):void{
this.writearea.signature.graphics.clear();
}
/**
* 設(shè)置線條粗細(xì)
*/
public function setLineSize(event:Event):void{
this.writearea.lineSize=this.size.value;
}
/**
* 設(shè)置顏色
*/
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;
}
/**
* 設(shè)置模式
*/
private function setPattern(event:Event):void{
this.writearea.pattern=String(this.pattern.value);
}
/**
* 清空寫字區(qū)
*/
private function cleanArea(event:Event):void{
this.writearea.signature.graphics.clear();
}
/**
* 設(shè)置線條粗細(xì)
*/
public function setLineSize(event:Event):void{
this.writearea.lineSize=this.size.value;
}
/**
* 設(shè)置顏色
*/
public function setColor(event:Event):void{
this.writearea.myColor=uint(this.color.value);
}
}
}
到這里為止，功能已經(jīng)實現(xiàn)了。但效果不太好。主要是簽名時，筆畫不圓滑，在flex 的api中，好像找不到在flash中設(shè)置圓滑的功能。
效果圖：http://rea.humanmonth.com/
畫圖：畫圖比較簡單，只要用到了graphics對像的幾個方法。當(dāng)鼠標(biāo)按下時，調(diào)用graphics的beginFill和moveTo方法。同時，還要把調(diào)用了lineTo的方法加入到鼠標(biāo)的MOUSE_MOVE事件中。代碼如下：
Actionscript代碼
復(fù)制代碼 代碼如下:
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;
/**
* 實現(xiàn)手寫簽名的白板
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*筆
*/
public var signature:UIComponent=new UIComponent();
/**
*顏色
*/
public var myColor:uint=0x000000 ;
/**
*線條粗細(xì)
*/
public var lineSize:int=1 ;
/**
*模式
*/
public var pattern:String="圓珠筆";
/**
*當(dāng)前的x座標(biāo)
*/
private var cX:Number;
/**
*當(dāng)前的y座標(biāo)
*/
private var cY:Number;
public function WriteArea()
{
this.addChild(signature);
this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);
this.addEventListener(MouseEvent.MOUSE_UP,endDraw);
}
/**
*鼠標(biāo)壓下時，開始畫圖，并添加移動鼠標(biāo)畫線的監(jiān)聽器
*/
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);
}
/**
* 鼠標(biāo)移動時，畫線
*/
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;
}
/**
* 結(jié)束畫圖
*/
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;
/**
* 實現(xiàn)手寫簽名的白板
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*筆
*/
public var signature:UIComponent=new UIComponent();
/**
*顏色
*/
public var myColor:uint=0x000000;
/**
*線條粗細(xì)
*/
public var lineSize:int=1;
/**
*模式
*/
public var pattern:String="圓珠筆";
/**
*當(dāng)前的x座標(biāo)
*/
private var cX:Number;
/**
*當(dāng)前的y座標(biāo)
*/
private var cY:Number;
public function WriteArea()
{
this.addChild(signature);
this.addEventListener(MouseEvent.MOUSE_DOWN,beginDraw);
this.addEventListener(MouseEvent.MOUSE_UP,endDraw);
}
/**
*鼠標(biāo)壓下時，開始畫圖，并添加移動鼠標(biāo)畫線的監(jiān)聽器
*/
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);
}
/**
* 鼠標(biāo)移動時，畫線
*/
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;
}
/**
* 結(jié)束畫圖
*/
private function endDraw(event:MouseEvent):void{
this.removeEventListener(MouseEvent.MOUSE_MOVE,drawIng);
}
}
}
上傳簽名圖片（上傳到服務(wù)器或保存到本地）:fp10(flash player)可以不經(jīng)服務(wù)器，直接把圖片保存到本地。但為了兼容fp9,這里的實現(xiàn)是先把圖片上傳到服務(wù)器，再調(diào)用下載功能。實現(xiàn)的思路是先把畫圖的組件轉(zhuǎn)化為BitmapData,然后再編碼成jpeg格式，并上傳到服務(wù)器。最后調(diào)用客戶端下載。這里要注意的一點是，fp10對下載的api作了限制，下載動作只能由用戶觸發(fā)。代碼如下：
Actionscript代碼
復(fù)制代碼 代碼如下:
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("正在上傳圖片，等待數(shù)秒后，即可下載圖片");
}
private function initMyId(event:Event):void{
CursorManager.removeBusyCursor();
var loader:URLLoader=URLLoader(event.target);
this.myId=loader.data;
Alert.show("上傳圖片成功，現(xiàn)在可以點擊‘下載圖片'按鈕，保存圖片到本地。");
}
/**
* 下載圖片
*/
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("正在上傳圖片，等待數(shù)秒后，即可下載圖片");
}
private function initMyId(event:Event):void{
CursorManager.removeBusyCursor();
var loader:URLLoader=URLLoader(event.target);
this.myId=loader.data;
Alert.show("上傳圖片成功，現(xiàn)在可以點擊‘下載圖片'按鈕，保存圖片到本地。");
}
/**
* 下載圖片
*/
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代碼
復(fù)制代碼 代碼如下:
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;
}
/**
* 設(shè)置模式
*/
private function setPattern(event:Event):void{
this.writearea.pattern=String(this.pattern.value);
}
/**
* 清空寫字區(qū)
*/
private function cleanArea(event:Event):void{
this.writearea.signature.graphics.clear();
}
/**
* 設(shè)置線條粗細(xì)
*/
public function setLineSize(event:Event):void{
this.writearea.lineSize=this.size.value;
}
/**
* 設(shè)置顏色
*/
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;
}
/**
* 設(shè)置模式
*/
private function setPattern(event:Event):void{
this.writearea.pattern=String(this.pattern.value);
}
/**
* 清空寫字區(qū)
*/
private function cleanArea(event:Event):void{
this.writearea.signature.graphics.clear();
}
/**
* 設(shè)置線條粗細(xì)
*/
public function setLineSize(event:Event):void{
this.writearea.lineSize=this.size.value;
}
/**
* 設(shè)置顏色
*/
public function setColor(event:Event):void{
this.writearea.myColor=uint(this.color.value);
}
}
}
到這里為止，功能已經(jīng)實現(xiàn)了。但效果不太好。主要是簽名時，筆畫不圓滑，在flex 的api中，好像找不到在flash中設(shè)置圓滑的功能。
效果圖：http://rea.humanmonth.com/
相關(guān)文章
Flex與.NET互操作 使用FileReference+HttpHandler實現(xiàn)文件上傳/下載
Flex與.NET互操作 使用FileReference+HttpHandler實現(xiàn)文件上傳/下載2009-06-06
flex 屏幕快照實現(xiàn)代碼2009-05-05
Flex 編程注意之自動獲取焦點、監(jiān)聽全局鍵盤事件2009-07-07
Flex 編程注意之性能優(yōu)化、垃圾回收的一些總結(jié)
自從開始做Flex、ActionScript 3.0的項目，我就一直與垃圾回收、性能優(yōu)化這些問題打交道，因此也總結(jié)了一些優(yōu)化的方案，同時在一些QQ群中也得到了一些“高人”的指點，因此將此內(nèi)容記錄一下。2009-07-07
Flex與.NET互操作(十二)：FluorineFx.Net的及時通信應(yīng)用(Remote Shared Objects
遠(yuǎn)程共享對象(Remote Shared Objects) 可以用來跟蹤、存儲、共享以及做多客戶端的數(shù)據(jù)同步操作。只要共享對象上的數(shù)據(jù)發(fā)生了改變，將會把最新數(shù)據(jù)同步到所有連接到該共享對象的應(yīng)用程序客戶端。2009-06-06
我跟WonJia打算寫一個類似于《Flex編程注意之XX》的系列文章，此系列文章主要就是介紹一些我們在實際的項目中發(fā)現(xiàn)的一些Flex的問題，而這些問題可能已經(jīng)被人發(fā)現(xiàn)了，也可能沒被人發(fā)現(xiàn)，所以在此記錄一下。2009-07-07
找了很久,還是沒有找到包含時間以下的東西,算了,還是麻煩一點,用日期加時間來處理吧.這里需要注意的是,它的時間日期跟其他語言是差不多的.所以要注意進(jìn)行處理.2009-07-07
Flex 如何得到itemRenderer里面的內(nèi)容
itemRenderer里面的內(nèi)容 獲取技巧。2009-07-07
Flex與.NET互操作(十三)：FluorineFx.Net實現(xiàn)視頻錄制與視頻回放
本文主要介紹使用FluorineFx.Net來實現(xiàn)視頻錄制與視頻回放，F(xiàn)luorineFx如同F(xiàn)MS一樣，除了有AMF通信，RTMP協(xié)議，RPC 和遠(yuǎn)程共享對象外，它同樣具備視頻流服務(wù)的功能。2009-06-06
Flex與.NET互操作(八) 使用FluorineFx網(wǎng)關(guān)實現(xiàn)遠(yuǎn)程訪問
關(guān)于遠(yuǎn)程訪問在本系列文章中陸續(xù)的寫了不少示例了，本文沒有準(zhǔn)備深入的去探討，為了鞏固FluorineFx網(wǎng)關(guān)的學(xué)習(xí)和使用。2009-06-06