# easy-sign-draw

**Repository Path**: efdr/easy-sign-draw

## Basic Information

- **Project Name**: easy-sign-draw
- **Description**: 简易（签名）画板工具
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-08-18
- **Last Updated**: 2022-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简易签名板

## 安装
```
npm i easy-sign-draw
```

## 全局引入

```javascript
// main.js
import draw from 'easy-sign-draw'
Vue.use(draw)
```

## 局部引入

```javascript
// .vue
import draw from 'easy-sign-draw'
export default {
  components: { draw }
}
```

## 使用

```html
<!-- template -->
<draw ref="myDraw"></draw>
```

```javascript
// 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图像）                           | -    |