当前位置：首页 > VUE

vue实现设计画布

2026-01-17 18:43:15VUE

Vue 实现设计画布的方法

使用 HTML5 Canvas 和 Vue 结合

在 Vue 项目中创建一个画布组件，利用 HTML5 Canvas API 进行绘图操作。这种方法适合需要高性能绘制的场景。

vue实现设计画布

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="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)
  },
  beforeDestroy() {
    window.removeEventListener('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.clientX, e.clientY)
    },
    draw(e) {
      if (!this.isDrawing) return
      this.ctx.lineTo(e.clientX, e.clientY)
      this.ctx.stroke()
    },
    stopDrawing() {
      this.isDrawing = false
    }
  }
}
</script>

使用 SVG 和 Vue 结合

对于需要矢量图形且需要 DOM 操作的场景，可以使用 SVG 与 Vue 结合实现设计画布。

vue实现设计画布

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      currentPath: '',
      paths: []
    }
  },
  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}`
      this.paths = [...this.paths.slice(0, -1), this.currentPath]
    },
    stopDrawing() {
      this.isDrawing = false
      this.paths.push(this.currentPath)
      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

对于需要更复杂功能的画布，可以使用 fabric.js 这样的专业库与 Vue 结合。

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

<script>
import { fabric } from 'fabric'

export default {
  data() {
    return {
      canvas: null
    }
  },
  mounted() {
    this.canvas = new fabric.Canvas(this.$refs.canvas, {
      width: 800,
      height: 600
    })

    // 添加矩形
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 50,
      height: 50
    })
    this.canvas.add(rect)

    // 添加文本
    const text = new fabric.Text('Hello world', {
      left: 200,
      top: 200,
      fill: 'blue'
    })
    this.canvas.add(text)
  },
  beforeDestroy() {
    this.canvas.dispose()
  }
}
</script>

使用 Vue Konva

Vue Konva 是 Konva.js 的 Vue 封装，专门用于复杂画布应用的开发。

<template>
  <v-stage ref="stage" :config="stageConfig">
    <v-layer ref="layer">
      <v-circle :config="circleConfig"></v-circle>
      <v-rect :config="rectConfig"></v-rect>
    </v-layer>
  </v-stage>
</template>

<script>
import Vue from 'vue'
import VueKonva from 'vue-konva'

Vue.use(VueKonva)

export default {
  data() {
    return {
      stageConfig: {
        width: 800,
        height: 600
      },
      circleConfig: {
        x: 100,
        y: 100,
        radius: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      },
      rectConfig: {
        x: 200,
        y: 150,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      }
    }
  }
}
</script>