1.1.4 • Published 2 years ago
v-perfect-signature-no-types v1.1.4
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
pnpm add v-perfect-signature
Usage
<script setup>
import { ref } from 'vue';
import VPerfectSignature from 'v-perfect-signature';
const signaturePad = ref();
const strokeOptions = {
size: 16,
thinning: 0.75,
smoothing: 0.5,
streamline: 0.5,
};
function toDataURL() {
const dataURL = signaturePad.value.toDataURL();
console.log(dataURL);
}
</script>
<template>
<VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />
</template>
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) 2022 Robert Soriano