vue实现绘图工具

Vue 实现绘图工具的基本方法

使用 Vue 实现绘图工具需要结合 HTML5 的 Canvas API 或 SVG 技术。以下是几种常见的实现方式：

基于 Canvas 的实现

创建一个 Vue 组件，通过 Canvas 实现绘图功能：

<template>
  <div>
    <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
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight
    this.ctx = canvas.getContext('2d')
    this.ctx.strokeStyle = '#000000'
    this.ctx.lineWidth = 5
    this.ctx.lineCap = 'round'
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      this.lastX = e.offsetX
      this.lastY = 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 = e.offsetX
      this.lastY = e.offsetY
    },
    stopDrawing() {
      this.isDrawing = false
    }
  }
}
</script>

基于 SVG 的实现

使用 SVG 实现绘图工具：

<template>
  <div>
    <svg 
      ref="svg"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
    >
      <path 
        v-for="(path, index) in paths" 
        :key="index"
        :d="path.d"
        :stroke="path.color"
        :stroke-width="path.width"
        fill="none"
      />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      currentPath: '',
      paths: [],
      currentColor: '#000000',
      currentWidth: 5
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const point = this.getSVGPoint(e)
      this.currentPath = `M${point.x},${point.y}`
    },
    draw(e) {
      if (!this.isDrawing) return
      const point = this.getSVGPoint(e)
      this.currentPath += ` L${point.x},${point.y}`

      if (this.paths.length > 0) {
        this.paths[this.paths.length - 1].d = this.currentPath
      } else {
        this.paths.push({
          d: this.currentPath,
          color: this.currentColor,
          width: this.currentWidth
        })
      }
    },
    stopDrawing() {
      this.isDrawing = false
      this.paths.push({
        d: this.currentPath,
        color: this.currentColor,
        width: this.currentWidth
      })
      this.currentPath = ''
    },
    getSVGPoint(e) {
      const svg = this.$refs.svg
      const pt = svg.createSVGPoint()
      pt.x = e.clientX
      pt.y = e.clientY
      return pt.matrixTransform(svg.getScreenCTM().inverse())
    }
  }
}
</script>

使用第三方库

可以集成成熟的绘图库如 Fabric.js 或 Konva.js：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="addRect">添加矩形</button>
  </div>
</template>

<script>
import { fabric } from 'fabric'

export default {
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas, {
      width: 800,
      height: 600
    })
  },
  methods: {
    addRect() {
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 60,
        height: 60,
        fill: 'red'
      })
      this.canvas.add(rect)
    }
  }
}
</script>

功能扩展建议

1. 添加工具栏组件，包含画笔、橡皮擦、形状工具等
2. 实现颜色选择器和线条粗细调整
3. 添加撤销/重做功能
4. 实现保存和加载绘图数据
5. 添加文字输入功能
6. 实现图层管理

性能优化

1. 对于复杂绘图，考虑使用离屏 Canvas 进行缓冲
2. 实现节流处理鼠标移动事件
3. 对于大量图形，考虑使用 Web Worker 进行计算
4. 实现脏矩形渲染技术，只重绘发生变化的部分

以上方法提供了 Vue 实现绘图工具的基本框架，可以根据具体需求进行扩展和优化。