支持多终端的电子签名(原创)

 查看演示  website  立即下载

更新时间：2021-10-29 01:52:00

更新说明：

新增main参数 drawMode

给main加入drawMode绘图模式0 以前的绘制模式 1线段会保留绘制的笔类型，已经绘制的线段不会跟着笔修改而修改

addPen加入参数 opt 这个参数是一个obj类型目前只有一个属性 drawLine 为了兼容drawMode值为1的时候绘制线段的函数

drawLine(c2d,line,main,penObj)函数的回调参数有

c2d绘制上线文,line用户操作的line线段数据,main核心对象main,penObj笔的数据结构

可以直接把以前的penCall里面绘制线段的方法复制到drawLine里面来 penCall保留是drawMode为0的时候绘制的值

在addPen中new Line对象的时候要加上main当前的笔类型 不然无法让笔的数据结构存在json中 这个只针对要使用drawMode为1的使用者并且有能力新增笔类型的开发者

addPen可以结合canvas提供的贝塞尔曲线 可以绘制出更像毛笔绘制的笔迹

更新时间：2021-07-08 00:09:38

更新说明：加入了新的配置参数

更新时间：2020-11-07 23:51:32

更新说明：过新增设置只读的方法setReadOnly 参数为true或者false，true表示只读，false表示不只读

新增判断是否签名的方法isEmpty 返回true表示是没有签名，返回false表示签名了

更新时间：2020-09-19 21:47:19

更新说明：新增clear方法,清除画布.修复获取元素位置的bug

更新时间：2020-08-25 00:26:41

更新说明：修复无法保存配置项的bug toJson无法保存一些配置项修复

更新时间：2020-08-16 22:58:43

更新说明：

新增构造函数的参数

新增笔的概念

开放api可以让用户自定义笔

新增笔的详细说明可以看这个文档:

https://github.com/yinhui1129754/dzqm/blob/master/addPen.md

内置了两种笔

一种的默认笔 一种是毛笔类型

更新时间：2020-03-02 23:46:00

项目说明 elesigncode

一个支持多终端的电子签名插件

webpack开发环境使用该插件

安装包

npm i elesigncode --save-dev

js代码

import EleSign from "elesigncode"
var ele = document.getElement("xxx");
var eleSign = new EleSign(); //实例化对象
eleSign.init(); //初始化
eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中

传统浏览器开发模式

先引入我们release\lib\dzjm.min.js到html页面中

然后js代码

var ele = document.getElement("xxx");
var eleSign = new EleSign(); //实例化对象
eleSign.init(); //初始化
eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中

jq开发模式

首先在html中引入jq的脚本

接着引入我们release\lib\dzjm.min.js到html页面中

然后js代码

$.fn.EleSign = function(option) {
    this.each(function() {
        var eleSign = new EleSign(option); //实例化对象
        eleSign.init(); //初始化
        eleSign.moutedEle(this); //将签名节点放入到传入的element节点中
        //给节点扩展方法好获取电子签名实例对象
        this.getEleSign = function() {
            return eleSign;
        }
    });
    return this;
}
//这样我们就可以使用jq的方法来实例化我们的对象了
$("#xxx").EleSign({
    color: "#ccc"
});

new 对象的时候可传入的参数

EleSign对象主要方法说明

PREVIOUS:
NEXT:
jQuery放大镜插件效果（原创）
js便签