https://github.com/captaincodeman/svelte-signature-pad

Capture smoothed signatures as SVG paths in Svelte
https://github.com/captaincodeman/svelte-signature-pad

signature signature-pad

Last synced: about 1 month ago
JSON representation

Capture smoothed signatures as SVG paths in Svelte

• Host: GitHub
• URL: https://github.com/captaincodeman/svelte-signature-pad
• Owner: CaptainCodeman
• License: mit
• Created: 2023-01-26T16:15:00.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-28T21:37:48.000Z (3 months ago)
• Last Synced: 2024-09-29T12:02:56.703Z (about 2 months ago)
• Topics: signature, signature-pad
• Language: TypeScript
• Homepage: https://captaincodeman.github.io/svelte-signature-pad/
• Size: 83 KB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-signature-pad

Svelte Action to capture smoothed signatures as SVG paths using the excellent [perfect-freehand](https://github.com/steveruizok/perfect-freehand) library.

## Instructions

Install using you package manager of choice:

    pnpm i svelte-signature-pad

Import action into page and pass and object with `ondraw` and `oncomplete` method properties.

Each will receive a path which can be rendered as SVG in your component. `ondraw` fires _while the user is drawing_ and would be the current stroke. `oncomplete` fires when they have finished the line (which could transition to a different color).

## Example

```svelte

  import { signature } from 'svelte-signature-pad'

  let layers: { path: string; width: number; height: number }[] = []

  let width: number

  let height: number

  let preview: string

  const ondraw = (path: string) => (preview = path)

  const oncomplete = (path: string) => {

    preview = ''

    layers = [...layers, { width, height, path }]

  }

  const clear = () => {

    layers = []

  }



  


  
 false}

  >

    {#each layers as layer}

      

        

      

    {/each}


    {#if preview}

      

        

      

    {/if}

  

  Clear



Please sign on the dotted line to indicate that you agree to all the legal terms we all know you didn't read. Thank you!




  {#each layers as layer}

    

      

    

  {/each}



```