当前位置：首页 > VUE

vue 实现画图和连线

2026-02-21 07:17:25VUE

实现画图和连线的基本思路

在Vue中实现画图和连线功能通常需要结合HTML5的Canvas或SVG技术。Canvas适合高性能的图形渲染，SVG则更适合需要交互和动态更新的场景。以下是两种常见实现方式。

使用Canvas实现画图和连线

Canvas提供了一套API用于绘制图形和路径。在Vue中，可以通过ref获取Canvas元素并操作其上下文。

vue 实现画图和连线

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

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

      ctx.beginPath();
      ctx.moveTo(this.lastX, this.lastY);
      ctx.lineTo(currentX, currentY);
      ctx.stroke();

      this.lastX = currentX;
      this.lastY = currentY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
  mounted() {
    const canvas = this.$refs.canvas;
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  },
};
</script>

使用SVG实现画图和连线

SVG更适合需要动态更新和交互的场景。可以通过Vue动态生成SVG元素并绑定事件。

vue 实现画图和连线

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

<script>
export default {
  data() {
    return {
      isDrawing: false,
      paths: [],
      currentPath: '',
    };
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      const svg = this.$refs.svg;
      const rect = svg.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      this.currentPath = `M ${x} ${y}`;
    },
    draw(e) {
      if (!this.isDrawing) return;
      const svg = this.$refs.svg;
      const rect = svg.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      this.currentPath += ` L ${x} ${y}`;
    },
    stopDrawing() {
      if (this.currentPath) {
        this.paths.push(this.currentPath);
        this.currentPath = '';
      }
      this.isDrawing = false;
    },
  },
};
</script>

使用第三方库

如果需要更复杂的功能（如拖拽节点、自动布局等），可以使用第三方库如：

jsPlumb：专为连线设计的库，支持拖拽和动态连线。
D3.js：强大的数据可视化库，适合复杂图形和交互。
Konva：基于Canvas的图形库，支持高性能渲染。

以下是使用jsPlumb的示例：

<template>
  <div ref="container">
    <div v-for="node in nodes" :key="node.id" :id="node.id" class="node">{{ node.text }}</div>
  </div>
</template>

<script>
import { jsPlumb } from 'jsplumb';

export default {
  data() {
    return {
      nodes: [
        { id: 'node1', text: 'Node 1' },
        { id: 'node2', text: 'Node 2' },
      ],
    };
  },
  mounted() {
    jsPlumb.ready(() => {
      const instance = jsPlumb.getInstance();
      instance.connect({
        source: 'node1',
        target: 'node2',
        connector: ['Straight'],
      });
    });
  },
};
</script>

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