vue实现页面手写

Vue 实现手写功能

在 Vue 中实现手写功能通常需要使用 HTML5 的 Canvas 元素，结合鼠标或触摸事件来捕捉用户的绘制动作。以下是实现步骤和代码示例：

基础实现步骤

创建一个 Vue 组件，包含 Canvas 元素，并监听鼠标或触摸事件。通过记录鼠标移动路径，在 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>
  </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 = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    },
    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 = '#000000';
      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);
    },
  },
};
</script>

优化手写体验

为了提升手写体验，可以增加以下优化：

• 平滑线条：使用贝塞尔曲线替代直线连接点，使线条更平滑。
• 压力敏感：根据鼠标移动速度调整线条粗细。
• 触摸支持：确保在移动设备上也能正常使用。

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;

  // 计算两点之间的距离，用于动态调整线条粗细
  const distance = Math.sqrt(
    Math.pow(currentX - this.lastX, 2) + 
    Math.pow(currentY - this.lastY, 2)
  );
  const lineWidth = Math.min(10, Math.max(1, distance / 2));

  ctx.beginPath();
  ctx.moveTo(this.lastX, this.lastY);
  // 使用二次贝塞尔曲线平滑线条
  ctx.quadraticCurveTo(
    this.lastX, 
    this.lastY, 
    (currentX + this.lastX) / 2, 
    (currentY + this.lastY) / 2
  );
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = lineWidth;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.stroke();

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

保存手写内容

可以将 Canvas 内容保存为图片，或转换为数据供后续使用。

methods: {
  saveAsImage() {
    const canvas = this.$refs.canvas;
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'signature.png';
    link.href = dataURL;
    link.click();
  },
  getCanvasData() {
    const canvas = this.$refs.canvas;
    return canvas.toDataURL('image/png');
  },
}

响应式调整

确保 Canvas 大小随窗口变化自动调整。

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

通过以上步骤，可以在 Vue 中实现一个功能完整的手写组件，支持绘制、清除和保存操作，并在不同设备上提供良好的用户体验。