vue手写签名如何实现

实现Vue手写签名的步骤

使用canvas元素

在Vue组件中创建一个canvas元素，用于绘制签名。设置canvas的宽度和高度，确保适应不同设备屏幕。

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

初始化canvas上下文

在mounted钩子中获取canvas的上下文，并设置绘图样式。

mounted() {
  this.ctx = this.$refs.signatureCanvas.getContext('2d');
  this.ctx.strokeStyle = '#000000';
  this.ctx.lineWidth = 2;
}

实现绘图逻辑

添加鼠标事件处理函数，控制绘图的开始、移动和结束。

data() {
  return {
    isDrawing: false,
    lastX: 0,
    lastY: 0,
    ctx: null
  };
},
methods: {
  startDrawing(e) {
    this.isDrawing = true;
    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
  },
  draw(e) {
    if (!this.isDrawing) return;
    this.ctx.beginPath();
    this.ctx.moveTo(this.lastX, this.lastY);
    this.ctx.lineTo(e.offsetX, e.offsetY);
    this.ctx.stroke();
    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
  },
  stopDrawing() {
    this.isDrawing = false;
  }
}

清除和保存功能

添加清除canvas和保存签名的功能。

methods: {
  clearCanvas() {
    this.ctx.clearRect(0, 0, this.$refs.signatureCanvas.width, this.$refs.signatureCanvas.height);
  },
  saveSignature() {
    const dataURL = this.$refs.signatureCanvas.toDataURL('image/png');
    // 可以发送到服务器或本地保存
    console.log(dataURL);
  }
}

响应式设计

确保canvas在不同设备上显示正常，可以监听窗口大小变化调整canvas尺寸。

mounted() {
  this.resizeCanvas();
  window.addEventListener('resize', this.resizeCanvas);
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeCanvas);
},
methods: {
  resizeCanvas() {
    const canvas = this.$refs.signatureCanvas;
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  }
}

触摸屏支持

添加触摸事件支持，使手写签名在移动设备上也能使用。

<canvas 
  ref="signatureCanvas" 
  @mousedown="startDrawing" 
  @mousemove="draw" 
  @mouseup="stopDrawing"
  @touchstart="handleTouchStart"
  @touchmove="handleTouchMove"
  @touchend="handleTouchEnd"
></canvas>

methods: {
  handleTouchStart(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousedown', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.$refs.signatureCanvas.dispatchEvent(mouseEvent);
  },
  handleTouchMove(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.$refs.signatureCanvas.dispatchEvent(mouseEvent);
  },
  handleTouchEnd() {
    const mouseEvent = new MouseEvent('mouseup');
    this.$refs.signatureCanvas.dispatchEvent(mouseEvent);
  }
}

使用第三方库

如果不想从头实现，可以使用现成的Vue签名库如vue-signature-pad。

安装依赖：

npm install vue-signature-pad

使用示例：

<template>
  <VueSignaturePad ref="signaturePad" />
  <button @click="undo">撤销</button>
  <button @click="save">保存</button>
</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);
    }
  }
};
</script>

样式优化

为canvas添加边框和背景色，提升用户体验。

canvas {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  width: 100%;
  height: 200px;
}

通过以上方法，可以在Vue项目中实现手写签名功能，并支持桌面和移动设备。