0.2.0 • Published 4 years ago
简易签名板
安装
npm i easy-sign-draw
全局引入
// main.js
import draw from 'easy-sign-draw'
Vue.use(draw)
局部引入
// .vue
import draw from 'easy-sign-draw'
export default {
components: { draw }
}
使用
<!-- template -->
<draw ref="myDraw"></draw>
// JavaScript(vue)
var base64 = this.$refs.myDraw.getImage() //获取画板内容
this.$refs.myDraw.clean() //清空画板
this.$refs.myDraw.reset() //重新获取画板信息
参数
| 参数名 | 描述 | 类型 | 默认值 |
|---|
| id | 画板的id（单页多次使用组件导致重复id时，可更改此参数） | String | "my-draw" |
| isFull | 是否截取完整图像（默认只截取有内容的部分） | Boolean | false |
| border | 是否让画板自带边框（1像素#ddd） | Boolean | false |
| background | 画板背景颜色，为空或“none”时不设置背景色 | String | "" |
| color | 画笔颜色 | String | "#000" |
| size | 画笔粗细 | Number | 3 |
| smooth | 是否开启画笔粗细随速度改变 | Boolean | false |
事件
| 事件名 | 说明 | 参数 |
|---|
| init | 初始化画板完成后触发的事件（返回两个参数，第一个是画板，第二个是画板的剪切版，仅在isFull关闭时有效） | canvas，clipCanvas |
方法
| 方法名 | 说明 | 参数 |
|---|
| reset | 重置画板对象（为防止窗口大小改变但页面不刷新情况，使用此方法重新获取画板对象，同时会再次触发init事件） | - |
| clean | 清空画板 | - |
| getImage | 获取画板图像（返回一个base64图像） | - |