Online handwritten signatures are divided into two parts. The first part is the implementation of the drawing function, and the second part is the function of uploading pictures (uploading to the server or saving to the local area).
Drawing: Drawing is relatively simple, as long as you use a few methods of graphic objects. When the mouse is pressed, the beginFill and moveTo methods of graphics are called. At the same time, the method that calls lineTo must be added to the MOUSE_MOVE event of the mouse. The code is as follows:
Actionscript code
package
{
import ;
import ;
import ;
import ;
import ;
import ;
/**
* A whiteboard that realizes handwritten signatures
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*Pen
*/
public var signature:UIComponent=new UIComponent();
/**
*color
*/
public var myColor:uint=0x000000 ;
/**
*Line thickness
*/
public var lineSize:int=1 ;
/**
*model
*/
public var pattern:String="Ballpoint pen";
/**
*Current x coordinate
*/
private var cX:Number;
/**
*Current y coordinate
*/
private var cY:Number;
public function WriteArea()
{
(signature);
(MouseEvent.MOUSE_DOWN,beginDraw);
(MouseEvent.MOUSE_UP,endDraw);
}
/**
*When the mouse is pressed down, start drawing and add a monitor to move the mouse to draw lines.
*/
private function beginDraw(event:MouseEvent):void{
(lineSize,myColor,1 ,true,,,, 99 );
(myColor);
=;
=;
(,);
(MouseEvent.MOUSE_MOVE,drawIng);
}
/**
* When the mouse moves, draw lines
*/
private function drawIng(event:MouseEvent):void{
if(=="Ballpoint pen"){
(,);
}
(,);
=;
=;
}
/**
* End drawing
*/
private function endDraw(event:MouseEvent):void{
(MouseEvent.MOUSE_MOVE,drawIng);
}
}
}
package
{
import ;
import ;
import ;
import ;
import ;
import ;
/**
* A whiteboard that realizes handwritten signatures
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*Pen
*/
public var signature:UIComponent=new UIComponent();
/**
*color
*/
public var myColor:uint=0x000000;
/**
*Line thickness
*/
public var lineSize:int=1;
/**
*model
*/
public var pattern:String="Ballpoint pen";
/**
*Current x-coordinate
*/
private var cX:Number;
/**
*Current y coordinate
*/
private var cY:Number;
public function WriteArea()
{
(signature);
(MouseEvent.MOUSE_DOWN,beginDraw);
(MouseEvent.MOUSE_UP,endDraw);
}
/**
*When the mouse is pressed down, start drawing and add a monitor to move the mouse to draw lines.
*/
private function beginDraw(event:MouseEvent):void{
(lineSize,myColor,1,true,,,,99);
(myColor);
=;
=;
(,);
(MouseEvent.MOUSE_MOVE,drawIng);
}
/**
* Draw lines when the mouse moves
*/
private function drawIng(event:MouseEvent):void{
if(=="Ballpoint pen"){
(,);
}
(,);
=;
=;
}
/**
* End drawing
*/
private function endDraw(event:MouseEvent):void{
(MouseEvent.MOUSE_MOVE,drawIng);
}
}
}
Upload signed image (upload to the server or save to local): fp10 (flash player) can save the image locally without going through the server. But in order to be compatible with FP9, the implementation here is to upload the image to the server first, and then call the download function. The implementation idea is to first convert the drawing components into BitmapData, then encode them into jpeg format, and upload them to the server. Finally, call the client to download. One thing to note here is that FP10 restricts the downloaded API, and the download action can only be triggered by the user. The code is as follows:
Actionscript code
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* Upload and download of pictures
* @author presses
*
*/
public class Connector
{
private var file:FileReference;
private var myId:String;
public function Connector()
{
}
/**
* Save the picture
*/
public function savePic(myData:BitmapData,fun:Function):void{
();
var url:String=+"rea/?action=savePic&timestamp="+new Date().getTime();
var request:URLRequest = new URLRequest(url);
=;
= "application/octet-stream";
=new JPEGEncoder(80 ).encode(myData);
var loader:URLLoader = new URLLoader();
(request) ;
(, fun) ;
(,initMyId);
("Uploading pictures, wait for a few seconds to download the pictures");
}
private function initMyId(event:Event):void{
();
var loader:URLLoader=URLLoader();
=;
("The upload of the picture is successful, now you can click the 'Download Picture' button to save the picture locally. ");
}
/**
* Download the picture
*/
public function downloadFile(event:Event):void{
var url2:String=+"rea/?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();
var req:URLRequest=new URLRequest(url2);
file=new FileReference();
(req,"");
}
}
}
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* Upload and download of pictures
* @author presses
*
*/
public class Connector
{
private var file:FileReference;
private var myId:String;
public function Connector()
{
}
/**
* Save the picture
*/
public function savePic(myData:BitmapData,fun:Function):void{
();
var url:String=+"rea/?action=savePic&timestamp="+new Date().getTime();
var request:URLRequest = new URLRequest(url);
=;
= "application/octet-stream";
=new JPEGEncoder(80).encode(myData);
var loader:URLLoader = new URLLoader();
(request) ;
(, fun) ;
(,initMyId);
("Uploading pictures, wait for a few seconds to download the pictures");
}
private function initMyId(event:Event):void{
();
var loader:URLLoader=URLLoader();
=;
("The upload of the picture was successful, now you can click the 'Download Picture' button to save the picture locally. ");
}
/**
* Download picture
*/
public function downloadFile(event:Event):void{
var url2:String=+"rea/?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();
var req:URLRequest=new URLRequest(url2);
file=new FileReference();
(req,"");
}
}
}
Actionscript code
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* control Panel
* @author presses
*
*/
public class MyControlBarAs extends MyControlBar
{
public var writearea:WriteArea;
private var connector:Connector=new Connector();
public function MyControlBarAs()
{
super();
(FlexEvent.CREATION_COMPLETE,myInit);
}
private function myInit(event:Event):void{
=;
(,cleanArea);
(,setLineSize);
(,setColor);
(,setPattern);
(,savePicture);
(,)
}
/**
* Save the picture
*/
private function savePicture(event:Event):void{
var myData:BitmapData=new BitmapData(,);
();
(myData,enableDownload);
}
private function enableDownload(event:Event):void{
=true;
}
/**
* Set mode
*/
private function setPattern(event:Event):void{
=String();
}
/**
* Clear the writing area
*/
private function cleanArea(event:Event):void{
();
}
/**
* Set the line thickness
*/
public function setLineSize(event:Event):void{
=;
}
/**
* Set color
*/
public function setColor(event:Event):void{
=uint();
}
}
}
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* control Panel
* @author presses
*
*/
public class MyControlBarAs extends MyControlBar
{
public var writearea:WriteArea;
private var connector:Connector=new Connector();
public function MyControlBarAs()
{
super();
(FlexEvent.CREATION_COMPLETE,myInit);
}
private function myInit(event:Event):void{
=;
(,cleanArea);
(,setLineSize);
(,setColor);
(,setPattern);
(,savePicture);
(,)
}
/**
* Save the picture
*/
private function savePicture(event:Event):void{
var myData:BitmapData=new BitmapData(,);
();
(myData,enableDownload);
}
private function enableDownload(event:Event):void{
=true;
}
/**
* Set mode
*/
private function setPattern(event:Event):void{
=String();
}
/**
* Clear the writing area
*/
private function cleanArea(event:Event):void{
();
}
/**
* Set the line thickness
*/
public function setLineSize(event:Event):void{
=;
}
/**
* Set color
*/
public function setColor(event:Event):void{
=uint();
}
}
}
So far, the function has been implemented. But the effect is not very good. Mainly, when signing, the strokes are not smooth. In the flex API, it seems that the function of setting sleek in flash cannot be found.
Reproduction image:/
Drawing: Drawing is relatively simple, as long as you use a few methods of graphic objects. When the mouse is pressed, the beginFill and moveTo methods of graphics are called. At the same time, the method that calls lineTo must be added to the MOUSE_MOVE event of the mouse. The code is as follows:
Actionscript code
Copy the codeThe code is as follows:
package
{
import ;
import ;
import ;
import ;
import ;
import ;
/**
* A whiteboard that realizes handwritten signatures
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*Pen
*/
public var signature:UIComponent=new UIComponent();
/**
*color
*/
public var myColor:uint=0x000000 ;
/**
*Line thickness
*/
public var lineSize:int=1 ;
/**
*model
*/
public var pattern:String="Ballpoint pen";
/**
*Current x coordinate
*/
private var cX:Number;
/**
*Current y coordinate
*/
private var cY:Number;
public function WriteArea()
{
(signature);
(MouseEvent.MOUSE_DOWN,beginDraw);
(MouseEvent.MOUSE_UP,endDraw);
}
/**
*When the mouse is pressed down, start drawing and add a monitor to move the mouse to draw lines.
*/
private function beginDraw(event:MouseEvent):void{
(lineSize,myColor,1 ,true,,,, 99 );
(myColor);
=;
=;
(,);
(MouseEvent.MOUSE_MOVE,drawIng);
}
/**
* When the mouse moves, draw lines
*/
private function drawIng(event:MouseEvent):void{
if(=="Ballpoint pen"){
(,);
}
(,);
=;
=;
}
/**
* End drawing
*/
private function endDraw(event:MouseEvent):void{
(MouseEvent.MOUSE_MOVE,drawIng);
}
}
}
package
{
import ;
import ;
import ;
import ;
import ;
import ;
/**
* A whiteboard that realizes handwritten signatures
* @author presses
*
*/
public class WriteArea extends Canvas
{
/**
*Pen
*/
public var signature:UIComponent=new UIComponent();
/**
*color
*/
public var myColor:uint=0x000000;
/**
*Line thickness
*/
public var lineSize:int=1;
/**
*model
*/
public var pattern:String="Ballpoint pen";
/**
*Current x-coordinate
*/
private var cX:Number;
/**
*Current y coordinate
*/
private var cY:Number;
public function WriteArea()
{
(signature);
(MouseEvent.MOUSE_DOWN,beginDraw);
(MouseEvent.MOUSE_UP,endDraw);
}
/**
*When the mouse is pressed down, start drawing and add a monitor to move the mouse to draw lines.
*/
private function beginDraw(event:MouseEvent):void{
(lineSize,myColor,1,true,,,,99);
(myColor);
=;
=;
(,);
(MouseEvent.MOUSE_MOVE,drawIng);
}
/**
* Draw lines when the mouse moves
*/
private function drawIng(event:MouseEvent):void{
if(=="Ballpoint pen"){
(,);
}
(,);
=;
=;
}
/**
* End drawing
*/
private function endDraw(event:MouseEvent):void{
(MouseEvent.MOUSE_MOVE,drawIng);
}
}
}
Upload signed image (upload to the server or save to local): fp10 (flash player) can save the image locally without going through the server. But in order to be compatible with FP9, the implementation here is to upload the image to the server first, and then call the download function. The implementation idea is to first convert the drawing components into BitmapData, then encode them into jpeg format, and upload them to the server. Finally, call the client to download. One thing to note here is that FP10 restricts the downloaded API, and the download action can only be triggered by the user. The code is as follows:
Actionscript code
Copy the codeThe code is as follows:
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* Upload and download of pictures
* @author presses
*
*/
public class Connector
{
private var file:FileReference;
private var myId:String;
public function Connector()
{
}
/**
* Save the picture
*/
public function savePic(myData:BitmapData,fun:Function):void{
();
var url:String=+"rea/?action=savePic&timestamp="+new Date().getTime();
var request:URLRequest = new URLRequest(url);
=;
= "application/octet-stream";
=new JPEGEncoder(80 ).encode(myData);
var loader:URLLoader = new URLLoader();
(request) ;
(, fun) ;
(,initMyId);
("Uploading pictures, wait for a few seconds to download the pictures");
}
private function initMyId(event:Event):void{
();
var loader:URLLoader=URLLoader();
=;
("The upload of the picture is successful, now you can click the 'Download Picture' button to save the picture locally. ");
}
/**
* Download the picture
*/
public function downloadFile(event:Event):void{
var url2:String=+"rea/?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();
var req:URLRequest=new URLRequest(url2);
file=new FileReference();
(req,"");
}
}
}
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* Upload and download of pictures
* @author presses
*
*/
public class Connector
{
private var file:FileReference;
private var myId:String;
public function Connector()
{
}
/**
* Save the picture
*/
public function savePic(myData:BitmapData,fun:Function):void{
();
var url:String=+"rea/?action=savePic&timestamp="+new Date().getTime();
var request:URLRequest = new URLRequest(url);
=;
= "application/octet-stream";
=new JPEGEncoder(80).encode(myData);
var loader:URLLoader = new URLLoader();
(request) ;
(, fun) ;
(,initMyId);
("Uploading pictures, wait for a few seconds to download the pictures");
}
private function initMyId(event:Event):void{
();
var loader:URLLoader=URLLoader();
=;
("The upload of the picture was successful, now you can click the 'Download Picture' button to save the picture locally. ");
}
/**
* Download picture
*/
public function downloadFile(event:Event):void{
var url2:String=+"rea/?action=queryPicById&pid="+myId+"&timestamp="+new Date().getTime();
var req:URLRequest=new URLRequest(url2);
file=new FileReference();
(req,"");
}
}
}
Actionscript code
Copy the codeThe code is as follows:
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* control Panel
* @author presses
*
*/
public class MyControlBarAs extends MyControlBar
{
public var writearea:WriteArea;
private var connector:Connector=new Connector();
public function MyControlBarAs()
{
super();
(FlexEvent.CREATION_COMPLETE,myInit);
}
private function myInit(event:Event):void{
=;
(,cleanArea);
(,setLineSize);
(,setColor);
(,setPattern);
(,savePicture);
(,)
}
/**
* Save the picture
*/
private function savePicture(event:Event):void{
var myData:BitmapData=new BitmapData(,);
();
(myData,enableDownload);
}
private function enableDownload(event:Event):void{
=true;
}
/**
* Set mode
*/
private function setPattern(event:Event):void{
=String();
}
/**
* Clear the writing area
*/
private function cleanArea(event:Event):void{
();
}
/**
* Set the line thickness
*/
public function setLineSize(event:Event):void{
=;
}
/**
* Set color
*/
public function setColor(event:Event):void{
=uint();
}
}
}
package
{
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* control Panel
* @author presses
*
*/
public class MyControlBarAs extends MyControlBar
{
public var writearea:WriteArea;
private var connector:Connector=new Connector();
public function MyControlBarAs()
{
super();
(FlexEvent.CREATION_COMPLETE,myInit);
}
private function myInit(event:Event):void{
=;
(,cleanArea);
(,setLineSize);
(,setColor);
(,setPattern);
(,savePicture);
(,)
}
/**
* Save the picture
*/
private function savePicture(event:Event):void{
var myData:BitmapData=new BitmapData(,);
();
(myData,enableDownload);
}
private function enableDownload(event:Event):void{
=true;
}
/**
* Set mode
*/
private function setPattern(event:Event):void{
=String();
}
/**
* Clear the writing area
*/
private function cleanArea(event:Event):void{
();
}
/**
* Set the line thickness
*/
public function setLineSize(event:Event):void{
=;
}
/**
* Set color
*/
public function setColor(event:Event):void{
=uint();
}
}
}
So far, the function has been implemented. But the effect is not very good. Mainly, when signing, the strokes are not smooth. In the flex API, it seems that the function of setting sleek in flash cannot be found.
Reproduction image:/
12Next pageRead the full text