当前位置：首页 > VUE

vue实现白板

2026-01-07 23:47:57VUE

Vue实现白板功能

使用Vue实现白板功能可以通过HTML5的Canvas API结合Vue的响应式特性来完成。以下是实现白板功能的关键步骤：

安装依赖 在Vue项目中安装必要的依赖，如vue-drawing-canvas或直接使用原生Canvas API。

npm install vue-drawing-canvas

创建白板组件 创建一个Vue组件，用于渲染Canvas并处理绘图逻辑。

<template>
  <div class="whiteboard">
    <canvas 
      ref="canvas" 
      @mousedown="startDrawing" 
      @mousemove="draw" 
      @mouseup="stopDrawing" 
      @mouseleave="stopDrawing">
    </canvas>
  </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.stroke();

      this.lastX = currentX;
      this.lastY = currentY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
  mounted() {
    const canvas = this.$refs.canvas;
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
  },
};
</script>

<style>
.whiteboard {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
}
canvas {
  width: 100%;
  height: 100%;
}
</style>

实现画笔功能 通过Canvas的lineTo和stroke方法实现画笔功能。可以扩展支持多种画笔颜色和粗细。

changeColor(color) {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  ctx.strokeStyle = color;
}

changeWidth(width) {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = width;
}

实现擦除功能 通过设置globalCompositeOperation为destination-out实现擦除功能。

enableEraser() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'destination-out';
  ctx.lineWidth = 10;
}

disableEraser() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = 'source-over';
}

保存和加载白板内容 使用Canvas的toDataURL方法保存白板内容为图片，或通过putImageData加载内容。

saveCanvas() {
  const canvas = this.$refs.canvas;
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'whiteboard.png';
  link.href = dataURL;
  link.click();
}

loadCanvas(image) {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
  };
  img.src = image;
}

实现多人协作 通过WebSocket或Socket.io实现多人协作功能，同步绘图数据。

// 伪代码示例
socket.on('draw', (data) => {
  const ctx = this.$refs.canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(data.lastX, data.lastY);
  ctx.lineTo(data.currentX, data.currentY);
  ctx.stroke();
});

emitDrawData(data) {
  socket.emit('draw', data);
}

通过以上步骤，可以实现一个基本的Vue白板功能，并支持扩展如画笔设置、擦除、保存和多人协作等高级功能。

vue实现白板