v-perfect-signature

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 ref="signaturePad" :stroke-options="strokeOptions" />
</template>

Props

Methods

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

Events

Nuxt

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

License

MIT