vue3 canvas实现手签功能

记录一下手签功能代码

<template>
  <div class="signName" :style="{ top: 0, left: differ + 'px'}">
    <div class="close" @click="close">X</div>
    <div class="autographBox">
      <div ref="canvasHW">
        <canvas @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" ref="canvasF" />
      </div>
      <p v-if="!isDraw">请本人签名</p>
    </div>
    <div class="btn-box">
      <div @click="overwrite">重签</div>
      <div @click="seaveImages">确定</div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
  name: 'sign-canvas',
  setup(props, cxt) {
    let differ = ref(document.documentElement.clientWidth)
    let canvasF = ref(null)
    let canvasHW = ref(null)
    let canvasTxt = null // 画布
    let points = [] // 记录点
    let isDraw = ref(false) // 签名标记
    let startX = 0 // 开始坐标x
    let startY = 0 // 开始坐标y
    let moveY = 0
    let moveX = 0
    let strDataURI = '' // 保存的canvas图像
    onMounted(() =>{
      let canvas = canvasF.value
      canvas.height = canvasHW.value.offsetHeight
      canvas.width = canvasHW.value.offsetWidth
      canvasTxt = canvas.getContext('2d')
      canvasTxt.strokeStyle = '#333'
      canvasTxt.lineWidth = '3'
    }) 
    const touchStart = (ev) => {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        isDraw.value = true // 签名标记
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value - ev.targetTouches[0].clientX - (differ.value * 0.08)
        } // y的计算值中：document.body.offsetHeight*0.5代表的是除了整个画板signatureBox剩余的高，this.$refs.canvasHW.offsetHeight*0.1是画板中标题的高
        startX = obj.x
        startY = obj.y
        canvasTxt.beginPath() // 开始作画
        points.push(obj) // 记录点
      }
    }
    const touchMove = (ev)=> {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value * 0.08)
        }
        moveY = obj.y
        moveX = obj.x
        canvasTxt.moveTo(startX, startY) // 移动画笔
        canvasTxt.lineTo(obj.x, obj.y) // 创建线条
        canvasTxt.stroke() // 画线
        startY = obj.y
        startX = obj.x
        points.push(obj) // 记录点
      }
    }
    const touchEnd = (ev)=> {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientY,
          y: differ.value- ev.targetTouches[0].clientX - (differ.value * 0.08)
        }
        points.push(obj) // 记录点
        points.push({ x: -1, y: -1 }) // 记录点
        canvasTxt.closePath() // 收笔
        canvasTxt.fill()
      }
    }
    const overwrite = ()=> {
      canvasTxt.clearRect(
        0,
        0,
        canvasF.value.width,
        canvasF.value.height
      )
      points = []
      isDraw.value = false // 签名标记
    }
    function seaveImages() {
      if (isDraw.value) {
        strDataURI = canvasF.value.toDataURL('image/png')
        cxt.emit('autographConfirm', {
          baseCode:strDataURI,
        })
      }
    }
    function close(){
      cxt.emit('close', {
        closeFlag:false,
      });
    }
    return {
      differ,
      canvasF,
      canvasHW,
      isDraw,
      touchStart,
      touchMove,
      touchEnd,
      overwrite,
      seaveImages,
      close
    }
  }
}
</script>
<style scoped lang="scss">
.signName {
  position: fixed;
  height: 100vw;
  width: 100vh;
  background-color: #fff;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform-origin: left top;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 4rem;
    font-weight: bolder;
    color:#436CDF;
    opacity: 0.1;
  }
}
.btn-box {
  height: 12%;
  display: flex;
  align-items: center;
  padding-left: 2rem;
  div {
    width: 5rem;
    height: 60%;
    border: 1px solid #D10021;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D10021;
    border-radius: .4rem;
  }
  div:last-child {
    margin-left: 2rem;
    background: linear-gradient(180deg, #D10021 0%, #AE000E 100%);
    color: #fff;
  }
}
.close {
  width: 100%;
  height: 8%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: right;
  padding-right: 2rem;
}
.autographBox {
  flex: 1;
  background: rgba(227, 227, 227, 1);
  border-top: 4px solid rgba(212, 212, 212, 1);
  border-bottom: 4px solid rgba(212, 212, 212, 1);
  div {
    height: 100%;
  }
}
</style>