npm package: @liuyi_npm/sign
Description: 基于原生 `canvas` 的签字库。
Author: liuyi
Latest version: 2.5.3

# @liuyi_npm/sign

基于原生 `canvas` 的签字库。

## 1.使用方式

可以在 `vue` 项目中作为组件引入。譬如作为全局组件引入：

```js
import Vue from 'vue'
import { SignBoard } from '@liuyi_npm/sign'
import '@liuyi_npm/sign/styles/index.css'

Vue.use(SignBoard)
```

然后在 `template` 中使用：

```html
<SignBoard
	title="请签字"
	toast-confirm-tip
	@confirm="handleConfirm">
</SignBoard>
```

支持的属性和方法有如下几种：

| 名称                | 含义                       | 备注                                                      |
| ------------------- | -------------------------- | --------------------------------------------------------- |
| `title`             | 标题名                     | 默认为**请正楷签字**                                      |
| `signText`          |  签字文案         |  默认为**空字符**，传入文本，会调用 `canvas` 生成背景签字图片 |
| `showSignTip`       | 是否展示签字区域提示 | 默认为 `true` |
| `toast-confirm-tip` | 未签字时，点击确认是否提示 | 默认为 `false`，当设置为`true`后，会调用内置的`toast`方法。 |
| `@unsigned`         | 未签字的回调函数           | `toast-confirm-tip`为`false`时，未签字确认时会触发。      |
| `@confirm`          | 签字完成后的回调函数       | 返回包含`toDataURL` 和 `toBlob` 的`canvas`对象            |

## 2.签名控制

在绘制签名的过程中，也提供了以下属性来控制绘制效果：

| 名称               | 含义                                   | 备注                           |
| ------------------ | -------------------------------------- | ------------------------------ | --- | --- |
| `smooth`           | 签名是否开启`smooth`效果               | 默认为`true`                   |
| `scale`            | 画布缩放比例，可保证高倍屏上图像不失真 | 默认为`window.devicePixelRatio |     | 1`  |
| `color`            | 线条颜色                               | 默认为`black`                  |
| `minWidth`         | 线条最小宽度                           | 默认为`3`                      |
| `maxWidth`         | 线条最大宽度                           | 默认为`12`                     |
| `minSpeed`         | 线条最小速度                           | 默认为`1.5`                    |
| `maxWidthDiffRate` | 差异比率                               | 默认为`20`                     |

譬如：

```html
<SignBoard
	title="请签字"
	toast-confirm-tip
	color="skyblue"
	:min-width="5"
	:max-width="12"
	@confirm="handleConfirm">
</SignBoard>
```

## 3.i18n国际化

**该项目默认只支持 `vue-i18n@6.x` 及更高版本**。

`i18n` 方式参考了[element-ui-i18n](https://element.eleme.cn/#/zh-CN/component/i18n)。

另外，为了简化项目操作，**该项目并未将 `lang` 语言包和 `locale` 方法包抽离打包，而是作为该打包出口的一部分（增添了一个 `locale` 导出参数）**。

具体使用方式有两种：

1. 使用 `Vue.use` 注册。

```js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { SignBoard, locale } from '@liuyi_npm/sign'

Vue.use(VueI18n)

const messages = {
	en: {
		message: 'hello',
		...locale.langs.en
	},
	zh: {
		message: '你好',
		...locale.langs['zh-CN']
	}
}

const i18n = new VueI18n({
	locale: 'en',
	messages
})

Vue.use(SignBoard, {
	i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')
```

2. 手动设置 `locale.i18n` 方法。

```js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { SignBoard, locale } from '@liuyi_npm/sign'

Vue.use(VueI18n)

const messages = {
	en: {
		message: 'hello',
		...locale.langs.en
	},
	zh: {
		message: '你好',
		...locale.langs['zh-CN']
	}
}

const i18n = new VueI18n({
	locale: 'en',
	messages
})

Vue.use(SignBoard)

locale.i18n((key, value) => i18n.t(key, value))

new Vue({ i18n }).$mount('#app')
```