vps
v-perfect-signature
npm i v-perfect-signature
vps

v-perfect-signature

Pressure-sensitive signature drawing for Vue 2 and 3

by Robert Soriano

1.1.11 (see all)License:MITTypeScript:Built-In
npm i v-perfect-signature
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

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

NameTypeDefaultDescription
widthString100%Set canvas width
heightString100%Set canvas height
backgroundColorStringrgba(0,0,0,0)Canvas background color
penColorString#000Canvas pen color
strokeOptionsObjectReferencePerfect freehand options

Methods

NameArgument TypeDescription
toDataURL(type)StringReturns signature image as data URL
fromDataURL(dataUri)StringDraws signature image from data URL
toData-Returns signature image as an array of array of input points
fromData(data)ArrayDraws signature image from array of array of input points
clear()-Clears the canvas
isEmpty()-Returns true if canvas is empty
resizeCanvas(shouldClear)BooleanResizes and recalculate dimensions

Note: Like signature_pad, fromDataURL does not populate internal data structure. Thus, after using fromDataURL, toData won't work properly.

Events

NameTypeDefaultDescription
onBeginFunction-Fired when stroke begin
onEndFunction-Fired when stroke end

Nuxt

export default defineNuxtConfig({
  build: {
    transpile: ['v-perfect-signature']
  }
})

License

MIT

No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate