vue实现涂鸦工具

Vue 实现涂鸦工具的方法

使用 HTML5 Canvas 和 Vue 结合

HTML5 的 <canvas> 元素是实现涂鸦功能的核心，结合 Vue 的数据绑定和事件处理能力，可以轻松构建一个涂鸦工具。

<template>
  <div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
    <button @click="clearCanvas">清除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.resizeCanvas();
    window.addEventListener('resize', this.resizeCanvas);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeCanvas);
  },
  methods: {
    resizeCanvas() {
      const canvas = this.$refs.canvas;
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    },
    startDrawing(e) {
      this.isDrawing = true;
      [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
      [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    },
  },
};
</script>

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

添加画笔颜色和粗细控制

扩展涂鸦工具的功能，允许用户选择画笔颜色和粗细。

<template>
  <div>
    <div>
      <input type="color" v-model="color" @change="updateBrush">
      <input type="range" v-model="lineWidth" min="1" max="50" @change="updateBrush">
    </div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
    ></canvas>
    <button @click="clearCanvas">清除</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      color: '#000000',
      lineWidth: 5,
    };
  },
  methods: {
    updateBrush() {
      this.ctx.strokeStyle = this.color;
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.lineCap = 'round';
      this.ctx.lineJoin = 'round';
    },
    // 其他方法保持不变
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.updateBrush();
    this.resizeCanvas();
  },
};
</script>

支持触摸设备

为了让涂鸦工具在移动设备上也能使用，需要添加触摸事件的支持。

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

<script>
export default {
  methods: {
    handleTouchStart(e) {
      e.preventDefault();
      const touch = e.touches[0];
      const rect = this.$refs.canvas.getBoundingClientRect();
      this.startDrawing({
        offsetX: touch.clientX - rect.left,
        offsetY: touch.clientY - rect.top,
      });
    },
    handleTouchMove(e) {
      e.preventDefault();
      const touch = e.touches[0];
      const rect = this.$refs.canvas.getBoundingClientRect();
      this.draw({
        offsetX: touch.clientX - rect.left,
        offsetY: touch.clientY - rect.top,
      });
    },
    handleTouchEnd() {
      this.stopDrawing();
    },
  },
};
</script>

保存涂鸦结果

添加功能将涂鸦结果保存为图片。

<template>
  <div>
    <button @click="saveImage">保存图片</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveImage() {
      const link = document.createElement('a');
      link.download = 'drawing.png';
      link.href = this.$refs.canvas.toDataURL('image/png');
      link.click();
    },
  },
};
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如 fabric.js 或 konva。

npm install fabric

<template>
  <canvas ref="canvas"></canvas>
</template>

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

export default {
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas, {
      isDrawingMode: true,
    });
  },
};
</script>

通过以上方法，可以在 Vue 中实现一个功能丰富的涂鸦工具，支持绘图、调整画笔属性、触摸操作和保存图片等功能。