react 移动端签名实现

绘图签名实现

导入插件

import CanvasDraw from 'react-canvas-draw'

使用组件

const signCanvas = React.createRef()

清空画布

const clear = () => {

    signCanvas.current.clear()

    setIsSignState(false)

  }

得到签名并转化为图片

const imgUrl = signCanvas.current.canvas.drawing.toDataURL('image/png')

设置签名组件的属性

 <div className='canvas-area '>
        //签名框
        <CanvasDraw
          className='sign-canvas'
          ref={signCanvas}
          brushColor='#000'
          gridColor='transparent'
          brushRadius={3}
          lazyRadius={0}
          canvasWidth={'100%'}
          canvasHeight={'100%'}
          hideInterface
          onChange={() => setIsSignState(true)}
        />
        //clear按钮
        <Button className='clear-button' onClick={clear}>
          clear
        </Button>
      </div>

实现效果：