vue实现签名

Vue实现签名功能

在Vue中实现签名功能通常需要结合HTML5的Canvas元素和JavaScript事件监听。以下是一个完整的实现方案：

安装依赖（可选）

若需要更专业的签名库，可安装vue-signature-pad：

npm install vue-signature-pad

基础Canvas实现方案

<template>
  <div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    ></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
      const ctx = canvas.getContext('2d')
      canvas.width = 500
      canvas.height = 300
      ctx.strokeStyle = '#000'
      ctx.lineWidth = 2
      ctx.lineCap = 'round'
    },

    startDrawing(e) {
      this.isDrawing = true
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      this.lastX = e.clientX - rect.left
      this.lastY = e.clientY - rect.top
    },

    draw(e) {
      if (!this.isDrawing) return
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const rect = canvas.getBoundingClientRect()
      const currentX = e.clientX - rect.left
      const currentY = e.clientY - rect.top

      ctx.beginPath()
      ctx.moveTo(this.lastX, this.lastY)
      ctx.lineTo(currentX, currentY)
      ctx.stroke()

      this.lastX = currentX
      this.lastY = currentY
    },

    stopDrawing() {
      this.isDrawing = false
    },

    clearCanvas() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },

    saveSignature() {
      const canvas = this.$refs.canvas
      const dataURL = canvas.toDataURL('image/png')
      // 可以发送到服务器或保存到本地
      console.log(dataURL)
    },

    // 触摸事件处理
    handleTouchStart(e) {
      e.preventDefault()
      const touch = e.touches[0]
      const mouseEvent = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
      })
      this.startDrawing(mouseEvent)
    },

    handleTouchMove(e) {
      e.preventDefault()
      const touch = e.touches[0]
      const mouseEvent = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
      })
      this.draw(mouseEvent)
    },

    handleTouchEnd(e) {
      e.preventDefault()
      const mouseEvent = new MouseEvent('mouseup')
      this.stopDrawing(mouseEvent)
    }
  }
}
</script>

使用vue-signature-pad组件

<template>
  <div>
    <VueSignaturePad 
      ref="signaturePad" 
      width="500px" 
      height="300px"
      :options="{ penColor: '#000' }"
    />
    <button @click="undo">撤销</button>
    <button @click="save">保存</button>
    <button @click="clear">清除</button>
  </div>
</template>

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

export default {
  components: {
    VueSignaturePad
  },
  methods: {
    undo() {
      this.$refs.signaturePad.undoSignature()
    },
    save() {
      const { data } = this.$refs.signaturePad.saveSignature()
      console.log(data) // base64格式图片数据
    },
    clear() {
      this.$refs.signaturePad.clearSignature()
    }
  }
}
</script>

实现要点

• 响应式设计：确保Canvas在不同设备上正确显示
• 抗锯齿处理：可通过调整线宽和样式改善签名质量
• 数据保存：签名通常保存为Base64或Blob格式
• 移动端适配：必须处理触摸事件以确保移动设备可用性

样式优化建议

canvas {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  touch-action: none; /* 防止移动端默认行为干扰 */
}

button {
  margin: 10px 5px;
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

以上方案可根据实际需求进行调整，如添加撤销步骤、设置不同笔刷样式或添加背景网格等辅助功能。