@valor_yang/v-perfect-signature
v0.0.3
Published
Perfect pressure-sensitive signature drawing for Vue 2 and 3
Downloads
6
Readme
v-perfect-signature
Pressure-sensitive signature drawing for Vue 2 and 3 built on top of perfect-freehand.
Demo: https://wobsoriano.github.io/v-perfect-signature
Install
yarn add v-perfect-signature
Usage
<template>
<VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
</template>
<script lang="ts">
import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'
export default Vue.extend({
components: {
VPerfectSignature
},
data: () => ({
strokeOptions: {
size: 16,
thinning: 0.75,
smoothing: 0.5,
streamline: 0.5
} as StrokeOptions
}),
methods: {
toDataURL() {
const dataURL = this.$refs.signaturePad.toDataURL()
console.log(dataURL)
}
}
})
</script>
Props
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
width
| String | 100%
| Set canvas width |
height
| String | 100%
| Set canvas height |
backgroundColor
| String | rgba(0,0,0,0)
| Canvas background color |
penColor
| String | #000
| Canvas pen color |
strokeOptions
| Object | Reference | Perfect freehand options |
Methods
Name | Argument Type | Description |
------ | ------ | ------ |
toDataURL(type)
| String | Returns signature image as data URL |
fromDataURL(dataUri)
| String | Draws signature image from data URL |
toData
| - | Returns signature image as an array of array of input points |
fromData(data)
| Array | Draws signature image from array of array of input points |
clear()
| - | Clears the canvas |
isEmpty()
| - | Returns true if canvas is empty |
resizeCanvas(shouldClear)
| Boolean
| Resizes and recalculate dimensions |
Note: Like signature_pad, fromDataURL
does not populate internal data structure. Thus, after using fromDataURL
, toData
won't work properly.
Events
Name | Type | Default | Description |
------ | ------ | ------ | ------ |
onBegin
| Function | - | Fired when stroke begin |
onEnd
| Function | - | Fired when stroke end |
Credits
- perfect-freehand - Draw perfect pressure-sensitive freehand strokes.
- signature_pad - HTML 5 canvas based smooth signature drawing.
- vue-signature-pad - Vue wrapper of signature_pad.
- vue-demi - Creates Universal Library for Vue 2 & 3
License
MIT - Copyright (c) 2021 Robert Soriano