Vue 2/3 压敏签名绘图库 - v-perfect-signature

Vue 2/3 压敏签名绘图库 - v-perfect-signature
插件名称 v-perfect-signature
发布时间 2021年9月2日
插件作者 wobsoriano

Vue 2/3 压敏签名绘图库,基于 Perfect-freehand,可让您绘制完美的压敏手绘笔触。

安装和下载:

# Yarn
$ yarn add v-perfect-signature

# NPM
$ npm i v-perfect-signature --save

使用:

1.安装并导入v-perfect-signature组件。

import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'

2. 将签名板插入模板。

<VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
export default Vue.extend({
  components: {
    VPerfectSignature
  },
  data: () => ({
    strokeOptions: {
      // refer to https://github.com/steveruizok/perfect-freehand#options
    } as StrokeOptions
  }),
  methods: {
    toDataURL() {
      const dataURL = this.$refs.signaturePad.toDataURL()
      console.log(dataURL)
    }
  }
})

3.默认组件道具。

width: {
  type: String,
  required: false,
  default: DEFAULT_WIDTH
},
height: {
  type: String,
  required: false,
  default: DEFAULT_HEIGHT
},
backgroundColor: {
  type: String,
  required: false,
  default: DEFAULT_BACKGROUND_COLOR
},
penColor: {
  type: String,
  required: false,
  default: DEFAULT_PEN_COLOR
},
strokeOptions: {
  type: Object as PropType<StrokeOptions>,
  required: false,
  default: {}
}

4. API 方法。

// 将签名图像转换为数据 URL 
toDataURL(type)

// 从数据 URL 中绘制签名
fromDataURL(dataUri)

// 将签名图像转换为输入点数组
toData

// 从输入点数组中绘制签名图像
fromData(data)

// 清除画布
clear()

// 检查画布是否为空
isEmpty();

// 调整画布大小
resizeCanvas(shouldClear)