vue实现签字

实现签字功能的方法

在Vue中实现签字功能通常需要使用第三方库或自定义画布组件。以下是几种常见的实现方式：

使用vue-signature-pad库

安装vue-signature-pad库：

npm install vue-signature-pad

在Vue组件中使用：

<template>
  <div>
    <vue-signature-pad
      ref="signaturePad"
      :options="options"
      width="500px"
      height="300px"
    />
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

<script>
import VueSignaturePad from 'vue-signature-pad'

export default {
  components: {
    VueSignaturePad
  },
  data() {
    return {
      options: {
        penColor: "#000000",
        backgroundColor: "#ffffff"
      }
    }
  },
  methods: {
    clear() {
      this.$refs.signaturePad.clearSignature()
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
      if (!isEmpty) {
        console.log(data) // 获取签名图片数据
      }
    }
  }
}
</script>

使用原生Canvas实现

创建自定义签字组件：

<template>
  <div>
    <canvas
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing"
    ></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    }
  },
  mounted() {
    this.setupCanvas()
  },
  methods: {
    setupCanvas() {
      const canvas = this.$refs.canvas
      canvas.width = 500
      canvas.height = 300
      this.ctx = canvas.getContext('2d')
      this.ctx.strokeStyle = '#000000'
      this.ctx.lineWidth = 2
      this.ctx.lineCap = 'round'
      this.ctx.lineJoin = 'round'
    },
    startDrawing(e) {
      this.isDrawing = true
      const pos = this.getPosition(e)
      this.lastX = pos.x
      this.lastY = pos.y
    },
    draw(e) {
      if (!this.isDrawing) return
      const pos = this.getPosition(e)
      this.ctx.beginPath()
      this.ctx.moveTo(this.lastX, this.lastY)
      this.ctx.lineTo(pos.x, pos.y)
      this.ctx.stroke()
      this.lastX = pos.x
      this.lastY = pos.y
    },
    stopDrawing() {
      this.isDrawing = false
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
    },
    saveSignature() {
      const dataUrl = this.$refs.canvas.toDataURL('image/png')
      console.log(dataUrl) // 获取签名图片数据
    },
    getPosition(e) {
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      return {
        x: (e.clientX || e.touches[0].clientX) - rect.left,
        y: (e.clientY || e.touches[0].clientY) - rect.top
      }
    }
  }
}
</script>

移动端适配注意事项

对于移动设备，需要添加以下样式确保触摸事件正常工作：

canvas {
  touch-action: none;
  -ms-touch-action: none;
}

保存签名为图片

无论是使用库还是自定义实现，都可以将画布内容转换为图片：

// 获取PNG格式的Base64编码
const imageData = canvas.toDataURL('image/png')

// 或者获取Blob对象
canvas.toBlob(blob => {
  // 处理Blob对象
}, 'image/png')

优化性能的建议

在移动设备上，使用requestAnimationFrame优化绘制性能：

draw(e) {
  if (!this.isDrawing) return
  requestAnimationFrame(() => {
    const pos = this.getPosition(e)
    this.ctx.beginPath()
    this.ctx.moveTo(this.lastX, this.lastY)
    this.ctx.lineTo(pos.x, pos.y)
    this.ctx.stroke()
    this.lastX = pos.x
    this.lastY = pos.y
  })
}

以上方法提供了在Vue中实现签字功能的不同途径，可以根据项目需求选择适合的方案。