vue实现画板

Vue 实现画板功能

使用 Vue 实现画板功能可以通过结合 HTML5 的 Canvas API 和 Vue 的响应式特性来完成。以下是一个详细的实现方案：

初始化画板组件

创建一个 Vue 组件，并在模板中放置一个 canvas 元素。通过 ref 获取 canvas 的 DOM 节点以便后续操作。

<template>
  <div class="drawing-board">
    <canvas
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
  </div>
</template>

设置画布大小

在 mounted 钩子中初始化画布大小，确保画布填充父容器。同时获取绘图上下文。

export default {
  data() {
    return {
      isDrawing: false,
      ctx: null,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    this.ctx = canvas.getContext('2d');
  },
};

实现绘图逻辑

添加鼠标事件处理函数来控制绘图过程。startDrawing 在鼠标按下时触发，draw 在鼠标移动时绘制线条，stopDrawing 在鼠标释放时停止绘制。

methods: {
  startDrawing(e) {
    this.isDrawing = true;
    const { offsetX, offsetY } = e;
    this.ctx.beginPath();
    this.ctx.moveTo(offsetX, offsetY);
  },
  draw(e) {
    if (!this.isDrawing) return;
    const { offsetX, offsetY } = e;
    this.ctx.lineTo(offsetX, offsetY);
    this.ctx.stroke();
  },
  stopDrawing() {
    this.isDrawing = false;
  },
},

添加样式

为画布添加基本样式，确保画布可见并具有边框。

.drawing-board {
  width: 100%;
  height: 500px;
}
canvas {
  border: 1px solid #000;
  width: 100%;
  height: 100%;
}

扩展功能

可以根据需求扩展功能，例如添加颜色选择器、画笔粗细调整和清空画布按钮。

<input type="color" v-model="color" @change="updateColor">
<input type="range" v-model="lineWidth" min="1" max="20">
<button @click="clearCanvas">Clear</button>

data() {
  return {
    color: '#000000',
    lineWidth: 5,
  };
},
methods: {
  updateColor() {
    this.ctx.strokeStyle = this.color;
  },
  clearCanvas() {
    this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
  },
},

触摸屏支持

为了支持移动设备，可以添加触摸事件处理。

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

methods: {
  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);
  },
},

通过以上步骤，可以在 Vue 中实现一个功能完整的画板组件，支持鼠标和触摸操作，并具备基本的绘图功能。