flicker-signature

更好用的电子签名库，适配桌面端与移动端,

功能

1. 适配桌面端与移动端
2. 支持撤销笔画和恢复笔画
3. 支持倒出base64与blob文件
4. 采用二次贝塞尔曲线优化线条平滑性

下载

npm i flicker-signature

例子

使用

基于原生js，适用任何js场景

vue

<template>
    <div>
      <canvas id="myCanvas" ></canvas>
      <button @click="cancelStrokes" > cancelStrokes </button>
    </div>

</template>
<script>
    import FlickerSignature from 'flicker-signature'
    export default {
        data () {
            return {
                fs: null
            }
        },
        mounted () {
            this.initCanvas()
        },
        methods: {
            initCanvas () {
                this.fs = new FlickerSignature(
                       {
                        el: document.getElementById('myCanvas'),
                        options: {
                            backgroundImg: 'grid'
                        }
                      }
                )
            },
            cancelStrokes () {
                this.fs.cancelStrokes()
            }
        }
    }
</script>

react

import React, {  useLayoutEffect, useRef } from 'react';
import FlickerSignature from 'flicker-signature'

const App = () => {

   const canvasRef = useRef(null)

   useLayoutEffect(() => {
    new FlickerSignature(
      {
        el: canvasRef.current!,
        options: {
            backgroundImg: 'grid'
        }
      }
    )
  }, [])

   return (
        <div className="App">
          <canvas id='myCanvas' ref={canvasRef} ></canvas>
        </div>
      );
}

API

flicker-signature的第一个参数是你的canvas节点

第二个参数是配置项

Props（参数）

Fn (flicker-signature实例函数)

最后

若对您提供了帮助，请作者喝杯咖啡吧~