项目说明

基于https://github.com/yinhui1129754/elesigncode的代码，二次处理 目前适用vue下的一个电子签名插件 vue-ele-sign

安装依赖命令

 npm i vue-ele-sign --save-dev

使用例子

<vue-ele-sign ref="VueEleSign" :color="color" :bgImg="bgImg" :readOnly="readOnly" />
    ...
import VueEleSign from 'vue-ele-sign'
components: { VueEleSign }
    ...

运行项目

 npm install
 npm run serve

构建npm包

 npm run build-bundle

 .更新包版本
 npm publish

class

我们这个类所需要的的所有类

data 数据类
draw 绘制类
event 事件类
image 图片类
line 线段类
main 核心类
point 点类

core

我们这个类的中心脚本

untils

各种方法和工具

config.js 默认配置项

struct.js 没有使用到，结构字典表

untils.js 工具方法类

在vue-cli中使用我们的组件

详细可以看在vue中使用此组件

实例对象的时候可传入的参数

|属性名称|描述|默认| |:-|-:|-:| |ele|要挂载的节点|null| |color|签名的颜色|'#333333'| |lineWidth|签名的线宽|4| |bgColor|签名的背景颜色|-1| |pen|签名的笔类型可选择的值：'default' 'writing'|'default'| |writingMaxLine|当笔是writing的时候我们来设置最大线宽|20| |writingMinLine|当笔是writing的时候我们来设置最小线宽|10| |bgImg|背景图片|''| |imgType|输出图片类型|'jpg'| |readOnly|是否只读|false| |vsConsole|是否显示打印信息|false| |datas|canvas笔迹轨迹json数据|null| |direction|画布方向，用于横屏（可选择的值：'left' ，'right' ，'bottom'）|无|

对象主要方法说明

|方法名称|描述|参数|返回值| |:-|-:|-:|-:| |init|初始化方法|无|无| |moutedEle|挂载到节点下|ele:传入的节点|无| |resize|重置签名canvas节点大小到挂载节点的大小，一般可以和resize混合使用|无|无| |resizeWithNumber|重置签名canvas节点大小到传入的宽度和高度|w:宽度,h:高度|无| |destory|销毁对象:实例的对象的所有属性没有了事件取消绑定,canvas节点从挂载节点移出|无|无| |drawEle|强制重新绘制数据|无|无| |undo|撤销方法|无|无| |redo|重做方法|无|无| |toJson|将当前实例签名的数据转化为json|无|无| |jsonTo|将传入的json数据转化到当前对象|json|无| |imgTo|将传入的img地址显示在图层|string|无| |toPng|获取当前签名的base64位数据png类型|无|无| |toJpeg|获取当前签名的base64位数据jpeg类型|无|无| |setColor|设置签名的颜色|color:颜色字符串rgb hex均可以|无| |setLineWidth|设置线宽|lineWidth:线宽|无| |setBgColor|设置背景颜色|bgColor:颜色字符串rgb hex均可以|无| |setBgImg|设置背景图片|无|无| |setPen|设置笔的类型|name:'default' 'writing'|无| |clear|清除全部|无|无| |clearSign|清除签名|无|无| |getImg|获取图片地址|无|无| |getFile|获取file数据|filename:文件名|无| |getData|获取全部数据|filename:文件名|file：file文件，url：图片地址，datas：笔迹json数据| |setReadOnly|设置只读|type:是否只读|无|

|isEmpty|获取是否签名了|无|返回true表示是没有签名，返回false表示签名了| |addPen|新增笔的类型可以看这个文档addPen|name:笔的名称url:笔需要的图片地址penCall:笔需要的绘制回调loadCall:笔需要的图片加载完成的回调函数start:鼠标按下回调move:鼠标移动回调函数end:结束回调函数|无|