当前位置：首页 > VUE

vue实现画图和连线

2026-02-22 10:54:52VUE

Vue 实现画图和连线的方法

使用 SVG 实现基础绘图

在 Vue 中可以通过 SVG 实现基础的绘图功能。SVG 是矢量图形标准，适合实现线条、图形等元素的绘制。

<template>
  <svg width="500" height="500" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing">
    <line v-for="(line, index) in lines" :key="index" 
          :x1="line.x1" :y1="line.y1" 
          :x2="line.x2" :y2="line.y2" 
          stroke="black" stroke-width="2"/>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lines: [],
      currentLine: { x1: 0, y1: 0, x2: 0, y2: 0 }
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const rect = e.target.getBoundingClientRect()
      this.currentLine = {
        x1: e.clientX - rect.left,
        y1: e.clientY - rect.top,
        x2: e.clientX - rect.left,
        y2: e.clientY - rect.top
      }
    },
    draw(e) {
      if (!this.isDrawing) return
      const rect = e.target.getBoundingClientRect()
      this.currentLine.x2 = e.clientX - rect.left
      this.currentLine.y2 = e.clientY - rect.top
    },
    stopDrawing() {
      if (this.isDrawing) {
        this.lines.push({...this.currentLine})
        this.isDrawing = false
      }
    }
  }
}
</script>

使用 Canvas 实现高性能绘图

对于需要更高性能或更复杂绘图的场景，可以使用 HTML5 Canvas。

<template>
  <canvas ref="canvas" width="500" height="500" 
          @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      startX: 0,
      startY: 0
    }
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      this.startX = e.clientX - rect.left
      this.startY = 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 x = e.clientX - rect.left
      const y = e.clientY - rect.top

      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.beginPath()
      ctx.moveTo(this.startX, this.startY)
      ctx.lineTo(x, y)
      ctx.stroke()
    },
    stopDrawing() {
      this.isDrawing = false
    }
  }
}
</script>

使用第三方库实现专业绘图

对于更专业的绘图需求，可以使用专门的可视化库：

jsPlumb：专门用于创建连接线和流程图的库
D3.js：强大的数据可视化库，适合复杂图表
Konva：高性能的 2D 绘图库

以 jsPlumb 为例实现连线功能：

<template>
  <div>
    <div v-for="item in items" :key="item.id" :id="'item-'+item.id" class="node">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { jsPlumb } from 'jsplumb'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Node 1' },
        { id: 2, name: 'Node 2' }
      ],
      plumb: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.plumb = jsPlumb.getInstance()
      this.plumb.connect({
        source: 'item-1',
        target: 'item-2',
        connector: ['Straight'],
        anchors: ['Right', 'Left']
      })
    })
  }
}
</script>

<style>
.node {
  width: 100px;
  height: 50px;
  border: 1px solid #ccc;
  margin: 20px;
  display: inline-block;
}
</style>

实现拖拽连线功能

结合拖拽和连线功能可以创建更交互式的绘图体验：

<template>
  <div>
    <div ref="container" class="container">
      <div v-for="item in items" :key="item.id" 
           :id="'item-'+item.id" class="node" 
           @mousedown="startDrag($event, item.id)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from 'jsplumb'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Node 1' },
        { id: 2, name: 'Node 2' }
      ],
      plumb: null,
      draggingId: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.plumb = jsPlumb.getInstance({
        Container: this.$refs.container
      })

      this.plumb.draggable('item-1')
      this.plumb.draggable('item-2')

      this.plumb.connect({
        source: 'item-1',
        target: 'item-2',
        connector: ['Bezier', { curviness: 50 }],
        anchors: ['Right', 'Left'],
        endpoint: 'Dot'
      })
    })
  },
  methods: {
    startDrag(e, id) {
      this.draggingId = id
    }
  }
}
</script>

这些方法提供了从基础到高级的 Vue 绘图和连线实现方案，可以根据项目需求选择合适的方案。对于简单需求，原生 SVG 或 Canvas 足够；对于复杂交互式图表，专业库如 jsPlumb 或 D3.js 能提供更强大的功能。

vue实现画图和连线