reract hooks实现移动端签名

import React, { useEffect, useState, useRef } from 'react'
// import styles from './lili.scss';
// import HtmlToPdf from './htmlToPdf';
import QRCode  from 'qrcode.react';
function Others() {
  const canvasDom = useRef()
  const [imgSrc, setSrc] = useState('')
  const writing = (
    beginX,
    beginY,
    stopX,
    stopY,
    ctx,
  ) => {
    ctx.beginPath()  // 开启一条新路径
    ctx.globalAlpha = 1  // 设置图片的透明度
    ctx.lineWidth = 3  // 设置线宽
    ctx.strokeStyle = 'red'  // 设置路径颜色
    ctx.moveTo(beginX, beginY)  // 从(beginX, beginY)这个坐标点开始画图
    ctx.lineTo(stopX, stopY)  // 定义从(beginX, beginY)到(stopX, stopY)的线条（该方法不会创建线条）
    ctx.closePath()  // 创建该条路径
    ctx.stroke()  // 实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
  }
 
  useEffect(() => {
    let beginX; let beginY
    const canvas = canvasDom.current
    const ctx = canvas.getContext('2d')
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    canvas.addEventListener('touchstart', function(event) {
      event.preventDefault() // 阻止在canvas画布上签名的时候页面跟着滚动
      beginX = event.touches[0].clientX - this.offsetLeft
      beginY = event.touches[0].pageY - this.offsetTop
    })
    canvas.addEventListener('touchmove', (event) => {
      event.preventDefault() // 阻止在canvas画布上签名的时候页面跟着滚动
      event = event.touches[0]
      const stopX = event.clientX - canvas.offsetLeft
      const stopY = event.pageY - canvas.offsetTop
      writing(beginX, beginY, stopX, stopY, ctx)
      beginX = stopX // 这一步很关键，需要不断更新起点，否则画出来的是射线簇
      beginY = stopY
    })
  }, [])
 
  const clearCanvas = () => {
    const canvas = canvasDom.current
    const ctx = canvas.getContext('2d')
    setSrc('')
    ctx.clearRect(0,0,canvas.width,canvas.height);
  }
 
  const sure = () => {
    const a = canvasDom.current.toDataURL("image/jpeg", 1.0)
    setSrc(a)
  }
 
  const download = () => {
    let img = new Image()
    const url = canvasDom.current.toDataURL("image/jpeg", 1.0)
    img.src = url
    img.onload = () => {
      let href = url
      let a = document.createElement('a');     // 创建一个a节点插入的document
      a.download = 'test.jpeg'  // 设置a节点的download属性值
      a.href = href ;         // 将图片的src赋值给a节点的href
      a.click()
    }
  }
 
  const downPdf = () => {
    // 此方法的封装，见上文的步骤6.下载PDF
    // HtmlToPdf(canvasDom.current)
  }
 
  return (
    <div className={'boxbox'}>
   
      <div className={'set-name'}>
        签名：
        { imgSrc && <img src={imgSrc} width="100" height="60"/> }
      </div>
      <canvas className={'set-canvas'} ref={canvasDom} width="350" height="150"/>
      <button style={{ marginRight: '4px' }} onClick={sure}>确定</button>
      <button style={{ marginRight: '4px' }} onClick={clearCanvas}>重置</button>
      {/* <button style={{ marginRight: '4px' }} onClick={downPdf}>下载PDF</button>
      <button style={{ marginRight: '4px' }} onClick={download}>下载图片</button> */}

<QRCode
      value={'你好'}  // value参数为生成二维码的链接
      size={200}  // 二维码的宽高尺寸
      fgColor="#000000"   // 二维码的颜色
 />
    </div>
  )
}
 
export default Others;

.set-canvas {
  border: 1px solid #000;
  border-radius: 0.05rem;
  /* margin: 0 auto; */
}
.boxbox{
  /* border: 1px solid #000;
  width: 500px; */
  margin: 0 auto;
}
.set-name {
  font-size: 0.32rem;
  text-align: center;
  margin-bottom: 0.2rem;
}
.boxp{
  height: 500px;overflow:auto;padding: 10px;line-height: 2em;font-size: 12px;margin: 0 10px;
}