Flex handwritten Online Signature implementation code page 1/2

Source: Internet
Author: User

Online handwritten signatures are divided into two parts. The first part is the implementation of the drawing function, and the second part is the image upload function (uploaded to the server or saved locally ).
Drawing: drawing is relatively simple. You only need to use the graphics method to draw images. When you press the mouse, call the beginfill and moveTo methods of graphics. At the same time, you must add the lineto method to the mouse_move event of the mouse. Code As follows:
ActionScript code Copy code The Code is as follows: 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;
/**
* Implement a hand-Signed Whiteboard
* @ Author presses
*
*/
Public class writearea extends canvas
{
/**
* Pen
*/
Public var Signature: uicomponent = new uicomponent ();
/**
* Color
*/
Public var mycolor: uint = 0x000000;
/**
* Line width
*/
Public var linesize: Int = 1;
/**
* Mode
*/
Public var pattern: String = "ballpoint pen ";
/**
* Current X coordinate
*/
Private var CX: number;
/**
* Current y coordinate
*/
Private var Cy: number;
Public Function writearea ()
{
This. addchild (signature );
This. addeventlistener (mouseevent. mouse_down, begindraw );
This. addeventlistener (mouseevent. mouse_up, enddraw );
}
/**
* When the mouse is pressed down, draw a picture and add a listener for moving the mouse to draw a line.
*/
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 );
}
/**
* Draw a line when the mouse moves
*/
Private function drawing (Event: mouseevent): void {
If (this. pattern = "ballpoint pen "){
This. Signature. Graphics. moveTo (this. CX, this. Cy );
}
This. Signature. Graphics. lineto (event. localx, event. localy );
This. Cx = event. localx;
This. Cy = event. localy;
}
/**
* End drawing
*/
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;

/**
* Implement a hand-Signed Whiteboard
* @ Author presses
*
*/
Public class writearea extends canvas
{
/**
* Pen
*/
Public var Signature: uicomponent = new uicomponent ();
/**
* Color
*/
Public var mycolor: uint = 0x000000;
/**
* Line width
*/
Public var linesize: Int = 1;
/**
* Mode
*/
Public var pattern: String = "ballpoint pen ";
/**
* Current X coordinate
*/
Private var CX: number;
/**
* Current y coordinate
*/
Private var Cy: number;

Public Function writearea ()
{
This. addchild (signature );
This. addeventlistener (mouseevent. mouse_down, begindraw );
This. addeventlistener (mouseevent. mouse_up, enddraw );
}

/**
* When the mouse is pressed down, draw a picture and add a listener for moving the mouse to draw a line.
*/
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 );
}

/**
* Draw a line when the mouse moves
*/
Private function drawing (Event: mouseevent): void {
If (this. pattern = "ballpoint pen "){
This. Signature. Graphics. moveTo (this. CX, this. Cy );
}
This. Signature. Graphics. lineto (event. localx, event. localy );
This. Cx = event. localx;
This. Cy = event. localy;
}

/**
* End drawing
*/
Private function enddraw (Event: mouseevent): void {
This. removeeventlistener (mouseevent. mouse_move, drawing );
}

}
}

Upload a signature image (upload to the server or save it to the local machine): fp10 (Flash Player) can directly Save the image to the local machine without using the server. However, to be compatible with fp9, the implementation here is to upload the image to the server before calling the download function. The idea is to first convert the component of the drawing into bitmapdata, then encode it into JPEG format, and upload it to the server. Finally, the client is called for download. Note that fp10 restricts the download API and the download action can only be triggered by the user. The Code is as follows:
ActionScript code Copy code The Code is as follows: 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;
/**
* Upload and download images
* @ Author presses
*
*/
Public class Connector
{
Private var file: filereference;
Private var myid: string;
Public Function connector ()
{
}
/**
* Save the image
*/
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 incluencoder (80). encode (mydata );
VaR Loader: urlloader = new urlloader ();
Loader. Load (request );
Loader. addeventlistener (event. Complete, fun );
Loader. addeventlistener (event. Complete, initmyid );
Alert. Show ("uploading an image. You can download the image after several seconds ");
}
Private function initmyid (Event: Event): void {
Cursormanager. removebusycursor ();
VaR Loader: urlloader=urlloader(event.tar get );
This. myid = loader. Data;
Alert. Show ("the image has been uploaded successfully. Now you can click the 'Download image' button to save the image to your local device. ");
}
/**
* Download images
*/
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;

/**
* Upload and download images
* @ Author presses
*
*/
Public class Connector
{
Private var file: filereference;
Private var myid: string;
Public Function connector ()
{
}

/**
* Save the image
*/
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 incluencoder (80). encode (mydata );
VaR Loader: urlloader = new urlloader ();
Loader. Load (request );
Loader. addeventlistener (event. Complete, fun );
Loader. addeventlistener (event. Complete, initmyid );
Alert. Show ("uploading an image. You can download the image after several seconds ");
}

Private function initmyid (Event: Event): void {
Cursormanager. removebusycursor ();
VaR Loader: urlloader=urlloader(event.tar get );
This. myid = loader. Data;
Alert. Show ("the image has been uploaded successfully. Now you can click the 'Download image' button to save the image to your local device. ");

}

/**
* Download images
*/
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 code Copy code The Code is as follows: 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;
/**
* Control Panel
* @ 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)
}
/**
* Save the image
*/
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;
}
/**
* Set Mode
*/
Private function setpattern (Event: Event): void {
This. writearea. pattern = string (this. pattern. value );
}
/**
* Clear the writing area
*/
Private function cleanarea (Event: Event): void {
This. writearea. Signature. Graphics. Clear ();
}
/**
* Set line width
*/
Public Function setlinesize (Event: Event): void {
This. writearea. linesize = This. Size. value;
}
/**
* Set the color.
*/
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;

/**
* Control Panel
* @ 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)
}< br>/**
* Save the image
*/
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;
}
/**
* Set Mode
*/
Private function setpattern (Event: Event): void {
This. writearea. pattern = string (this. pattern. value );
}
/**
* Clear the writing area
*/
Private function cleanarea (Event: Event): void {
This. writearea. Signature. Graphics. Clear ();
}

/**
* Set line width
*/
Public Function setlinesize (Event: Event): void {
This. writearea. linesize = This. Size. value;
}

/**
* Set the color.
*/
Public Function setcolor (Event: Event): void {
This. writearea. mycolor = uint (this. color. value );
}

}
}

So far, the function has been implemented. But the effect is not very good. It is mainly because the strokes are not smooth when signing. In the flex API, it seems that you cannot find the smooth function in flash.
: Http://rea.humanmonth.com/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.