flex 手写在线签名实现代码第1/2页_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/

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

时间： 2024-03-04 16:25:02

flex 手写在线签名实现代码第1/2页_Flex的相关文章

纯JavaScript手写图片轮播代码_javascript技巧

废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

教你用TensorFlow和自编码器模型生成手写数字（附代码）

自编码器是一种能够用来学习对输入数据高效编码的神经网络.若给定一些输入,神经网络首先会使用一系列的变换来将数据映射到低维空间,这部分神经网络就被称为编码器. 然后,网络会使用被编码的低维数据去尝试重建输入,这部分网络称之为解码器.我们可以使用编码器将数据压缩为神经网络可以理解的类型.然而自编码器很少用做这个目的,因为通常存在比它更为有效的手工编写的算法(例如 jpg 压缩). 此外,自编码器还被经常用来执行降噪任务,它能够学会如何重建原始图像. 什么是变分自编码器? 有很多与自编码器相关的有趣应

头一次手写这么长的代码，真累：（

public delegate void DataInputEventHandler(object sender,EventArgs e);//如果你不重载EventArgs,此处不必做委托,用Event就可以了.public class EventSource(){    public event DataInputEventHandler DataInputEvent;    private void OnDataInputEvent(EventArgs e)    {          i

求大神指点下，iOS手写签名的问题

问题描述 求大神指点下,iOS手写签名的问题 求大神们指点下,我写了一个iOS的手写签名,用的touches,但是有时候move动作到一半的时候就直接跳转到end事件了,只要手指没有抬起继续滑动,他都会一直不响应,请大神帮忙看下是什么问题,谢谢 附代码网址:https://github.com/e3moliuzq/CSAutograph

Winform开发中手写签名的实现

由于项目的需要,需要在项目的Winform系统的一个模块中集成手写签名的功能,一开始对这块不是很了解,只是了解他能够替代鼠标进行签名.既然是签名,一般就是需要记录手稿图片,作为一个记录核实的凭证,因为有效的签名是很难模拟的.市场上也存在很多类型的电子签名笔,一时间还真不知道那种适合.本文主要从签名笔的选型以及功能实现等方面来对实现这个需求进行分析介绍,希望能够给有同样际遇的朋友一个参考. 1.电子手写签名介绍 电子手写签名,其实就是模拟真实的笔进行签名的过程,我这里主要是介绍使用外部设备来记录手

保存手写签名

Android 提供了很多丰富.实用而且很有特色的功能.比如,语音识别.手写签名等等.本篇就为你介绍如何在android上进行个性化的手写签名.   首先大致说说需求:这是一个追求时尚.张扬个性的时代,我们希望在签名的地方,签名的是自己手写出来的很有个性的艺术字,而非根据手势识别出来的标准字体.   设计思路如下,在画板上进行签名(其实就是绘制图片),完成后保存为图片.然后将图片按照一定的比率进行缩放并显示在指定的位置.   这里给出一个实例,实例只是一个简单的例子,如有需要可以进行必要的扩展.

代码手写UI，xib和StoryBoard间的博弈，以及Interface Builder的一些小技巧

最近接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问,就是应该如何制作UI界面.iOS应用是非常重视用户体验的,可以说绝大多数的应用成功与否与交互设计以及UI是否漂亮易用有着非常大的关系.而随着iOS开发发展至今,可以说在UI制作上大家逐渐分化为了三种主要流派:使用代码手写UI及布局:使用单个xib文件组织viewController或者view:使用StoryBoard来通过单个或很少的几个(关于这点稍后会进行展开)文件构建全部UI.应该使用哪种方式来制作UI已经是iOS开发中

Mac上如何在PDF中添加手写签名?

  在Mac电脑上如何给PDF文件添加上自己的手写签名?从Mac OS X Lion之后,系统自带的"预览"功能便可以简单几步得为你的PDF文件添加手写签名.下面小编给大家介绍下具体操作步骤: 1.找一张白纸(没有任何花纹)并签上你的名字. 2.打开预览,选择偏好设置 3.偏好设置顶端最后一个"签名",选中点击创建签名 4.这时候会弹出一个相机窗口,将你的签名对准相机,相机预览窗口会有一根蓝色的线,注意,你所有的书写都必须在蓝线之上.这时右侧会出现你的签名预览.调整

android如何使用代码判断使用的中文输入法是笔画、拼音九宫、拼音标准还是手写

问题描述 android如何使用代码判断使用的中文输入法是笔画.拼音九宫.拼音标准还是手写 我想在用户输入的时候判断他是使用的中文输入法,希望可以有一些可供调用的函数和类来实现这个功能, 但是一直不知道该怎么去找有关的方法或类,或许这不是官方api里的内容 解决方案 http://blog.csdn.net/liranke/article/details/21971199