当前位置：首页 > VUE

vue怎么实现手写协议

2026-02-23 03:33:32VUE

实现手写协议功能的方法

在Vue中实现手写协议功能，可以通过集成手写签名库或利用HTML5的Canvas来实现。以下是两种常见的实现方式：

使用签名库（如signature_pad）

安装signature_pad库：

npm install signature_pad

在Vue组件中使用：

vue怎么实现手写协议

<template>
  <div>
    <canvas ref="signaturePad" width="400" height="200"></canvas>
    <button @click="clearSignature">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad';

export default {
  data() {
    return {
      signaturePad: null
    };
  },
  mounted() {
    const canvas = this.$refs.signaturePad;
    this.signaturePad = new SignaturePad(canvas);
  },
  methods: {
    clearSignature() {
      this.signaturePad.clear();
    },
    saveSignature() {
      const signatureData = this.signaturePad.toDataURL();
      console.log(signatureData); // 可以发送到服务器或保存到本地
    }
  }
};
</script>

使用HTML5 Canvas原生实现

<template>
  <div>
    <canvas 
      ref="canvas" 
      width="400" 
      height="200"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveCanvas">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0
    };
  },
  methods: {
    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.strokeStyle = '#000';
      ctx.lineWidth = 2;
      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);
    },
    saveCanvas() {
      const canvas = this.$refs.canvas;
      const imageData = canvas.toDataURL('image/png');
      console.log(imageData); // 可以发送到服务器或保存到本地
    }
  }
};
</script>