更新时间：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
更新说明：加入了新的配置参数
| 属性名称 | 描述 | 默认 |
|---|---|---|
| bgImg | 背景图片元素 只能传Image对象 img节点 canvas节点 | null |
| bgImgDrawCall | 绘制的回调函数回调参数 ctx,img,main | null |
更新时间：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
更新说明：
新增构造函数的参数
| pen | 签名的笔类型可选择的值：'default' 'writing' | 'default' |
| writingMaxLine | 当笔是writing的时候我们来设置最大线宽 | 20 |
| writingMinLine | 当笔是writing的时候我们来设置最小线宽 | 10 |
新增笔的概念
开放api可以让用户自定义笔
新增笔的详细说明可以看这个文档:
1 |
内置了两种笔
一种的默认笔 一种是毛笔类型
| setPen | 设置笔的类型 | name:'default' 'writing' | 无 |
| addPen | 新增笔的类型可以看这个文档addPen | name:笔的名称url:笔需要的图片地址penCall:笔需要的绘制回调loadCall:笔需要的图片加载完成的回调函数start:鼠标按下回调move:鼠标移动回调函数end:结束回调函数 | 无 |
更新时间：2020-03-02 23:46:00
项目说明 elesigncode
一个支持多终端的电子签名插件
webpack开发环境使用该插件
安装包
1 | npm i elesigncode --save-dev |
js代码
1 2 3 4 5 | 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代码
1 2 3 4 | 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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $.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 对象的时候可传入的参数
| 属性名称 | 描述 |
|---|---|
| ele | 要挂载的节点 |
| color | 签名的颜色 |
| lineWidth | 签名的线宽 |
| bgColor | 签名的背景颜色 |
EleSign对象主要方法说明
| 方法名称 | 描述 | 参数 | 返回值 |
|---|---|---|---|
| init | 初始化方法 | 无 | 无 |
| moutedEle | 挂载到节点下 | ele:传入的节点 | 无 |
| resize | 重置签名canvas节点大小到挂载节点的大小，一般可以和resize混合使用 | 无 | 无 |
| resizeWithNumber | 重置签名canvas节点大小到传入的宽度和高度 | w:宽度,h:高度 | 无 |
| destory | 销毁对象:实例的对象的所有属性没有了事件取消绑定,canvas节点从挂载节点移出 | 无 | 无 |
| drawEle | 强制重新绘制数据 | 无 | 无 |
| undo | 撤销方法 | 无 | 无 |
| redo | 重做方法 | 无 | 无 |
| toJson | 将当前实例签名的数据转化为json | 无 | 无 |
| jsonTo | 将传入的json数据转化到当前对象 | json | 无 |
| toPng | 获取当前签名的base64位数据png类型 | 无 | 无 |
| toJpeg | 获取当前签名的base64位数据jpeg类型 | 无 | 无 |
| setColor | 设置签名的颜色 | color:颜色字符串rgb hex均可以 | 无 |
| setLineWidth | 设置线宽 | lineWidth:线宽 | 无 |
| setBgColor | 设置背景颜色 | bgColor:颜色字符串rgb hex均可以 | 无 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： js便签
- 下一个特效： jQuery放大镜插件效果（原创）