当前位置：首页 > VUE

vue手写签名如何实现

2026-01-12 04:57:46VUE

实现 Vue 手写签名的步骤

使用 canvas 实现基础签名功能

在 Vue 项目中创建一个组件，利用 HTML5 的 canvas 元素实现手写签名功能。通过监听鼠标或触摸事件来捕获用户的绘制路径。

<template>
  <div>
    <canvas
      ref="signatureCanvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing"
    ></canvas>
    <button @click="clearSignature">清除</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.signatureCanvas;
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      this.ctx = canvas.getContext('2d');
      this.ctx.strokeStyle = '#000';
      this.ctx.lineWidth = 2;
      this.ctx.lineCap = 'round';
    },
    startDrawing(e) {
      this.isDrawing = true;
      const canvas = this.$refs.signatureCanvas;
      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.signatureCanvas;
      const rect = canvas.getBoundingClientRect();
      const currentX = e.clientX - rect.left;
      const currentY = e.clientY - rect.top;

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

      this.lastX = currentX;
      this.lastY = currentY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearSignature() {
      const canvas = this.$refs.signatureCanvas;
      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    saveSignature() {
      const canvas = this.$refs.signatureCanvas;
      const dataURL = canvas.toDataURL('image/png');
      console.log(dataURL); // 可以保存或发送到服务器
    },
  },
};
</script>

处理触摸事件支持移动端

为了在移动设备上也能正常使用，需要添加触摸事件的处理逻辑。上述代码已经包含了触摸事件的监听，确保在触摸屏设备上也能正确捕获绘制路径。

优化绘制体验

可以通过调整线条的粗细、颜色和样式来优化绘制体验。例如，根据绘制速度动态调整线条粗细，使签名看起来更自然。

this.ctx.lineWidth = 2; // 可以根据需要调整
this.ctx.strokeStyle = '#000000'; // 黑色线条
this.ctx.lineCap = 'round'; // 线条末端为圆形

保存签名图片

使用 canvas 的 toDataURL 方法将绘制的签名转换为 base64 格式的图片数据，可以保存到本地或上传到服务器。

saveSignature() {
  const canvas = this.$refs.signatureCanvas;
  const dataURL = canvas.toDataURL('image/png');
  // 可以进一步处理，如保存到本地或发送到服务器
  console.log(dataURL);
}

清除签名

通过调用 clearRect 方法清除 canvas 上的绘制内容，实现清除签名的功能。

clearSignature() {
  const canvas = this.$refs.signatureCanvas;
  this.ctx.clearRect(0, 0, canvas.width, canvas.height);
}

响应式调整 canvas 大小

在窗口大小变化时，重新设置 canvas 的宽高，确保签名区域始终适应容器大小。

mounted() {
  this.setupCanvas();
  window.addEventListener('resize', this.setupCanvas);
},
beforeDestroy() {
  window.removeEventListener('resize', this.setupCanvas);
},

使用第三方库简化实现

如果需要更复杂的功能或更简单的实现方式，可以考虑使用第三方库如 vue-signature 或 signature_pad。

vue手写签名如何实现

npm install signature_pad

<template>
  <div>
    <canvas ref="signatureCanvas"></canvas>
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad';

export default {
  mounted() {
    const canvas = this.$refs.signatureCanvas;
    this.signaturePad = new SignaturePad(canvas);
  },
  methods: {
    clear() {
      this.signaturePad.clear();
    },
    save() {
      const dataURL = this.signaturePad.toDataURL();
      console.log(dataURL);
    },
  },
};
</script>