vue实现白板

Vue 实现白板功能

在 Vue 中实现白板功能通常需要结合 HTML5 的 Canvas 或第三方库（如 Fabric.js、Konva.js）来实现绘图功能。以下是几种实现方法：

使用原生 Canvas

通过 Vue 封装 Canvas 的绘图 API，实现基础的画线、擦除等功能。

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      canvas: null,
      ctx: null
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  }
}
</script>

使用 Fabric.js

Fabric.js 是一个功能强大的 Canvas 库，支持对象操作、序列化、事件处理等高级功能。

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="clearCanvas">清除</button>
  </div>
</template>

<script>
import { fabric } from 'fabric';

export default {
  data() {
    return {
      canvas: null
    }
  },
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas, {
      isDrawingMode: true
    });
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.canvas.setWidth(window.innerWidth);
      this.canvas.setHeight(window.innerHeight);
    },
    clearCanvas() {
      this.canvas.clear();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  }
}
</script>

使用 Konva.js

Konva.js 是另一个流行的 2D 绘图库，适合需要复杂交互的场景。

<template>
  <div ref="container"></div>
</template>

<script>
import Konva from 'konva';

export default {
  data() {
    return {
      stage: null,
      layer: null
    }
  },
  mounted() {
    this.stage = new Konva.Stage({
      container: this.$ref.container,
      width: window.innerWidth,
      height: window.innerHeight
    });

    this.layer = new Konva.Layer();
    this.stage.add(this.layer);

    let isDrawing = false;
    let lastLine;

    this.stage.on('mousedown touchstart', (e) => {
      isDrawing = true;
      const pos = this.stage.getPointerPosition();
      lastLine = new Konva.Line({
        stroke: '#df4b26',
        strokeWidth: 5,
        globalCompositeOperation: 'source-over',
        points: [pos.x, pos.y]
      });
      this.layer.add(lastLine);
    });

    this.stage.on('mousemove touchmove', () => {
      if (!isDrawing) return;
      const pos = this.stage.getPointerPosition();
      const newPoints = lastLine.points().concat([pos.x, pos.y]);
      lastLine.points(newPoints);
      this.layer.batchDraw();
    });

    this.stage.on('mouseup touchend', () => {
      isDrawing = false;
    });

    window.addEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      this.stage.width(window.innerWidth);
      this.stage.height(window.innerHeight);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  }
}
</script>

功能扩展建议

• 撤销/重做：使用数组记录绘图操作，实现历史记录功能
• 多种工具：添加画笔、形状、文字等不同绘图工具
• 颜色选择：集成颜色选择器支持多种颜色
• 保存/加载：使用 canvas.toDataURL() 实现保存为图片，或序列化绘图数据
• 多人协作：结合 WebSocket 实现实时协作白板

选择哪种方案取决于项目需求复杂度。原生 Canvas 适合简单需求，Fabric.js/Konva.js 更适合需要复杂交互和对象操作的高级白板应用。