当前位置：首页 > VUE

vue实现动态连线

2026-02-20 12:49:16VUE

动态连线实现方法

在Vue中实现动态连线通常需要结合Canvas或SVG技术，以下是两种常见方案的实现思路：

基于Canvas的实现

使用HTML5 Canvas绘制动态线条，适合需要高性能渲染的场景：

<template>
  <canvas ref="canvas" @mousemove="handleMouseMove"></canvas>
</template>

<script>
export default {
  data() {
    return {
      points: [],
      isDrawing: false
    }
  },
  methods: {
    handleMouseMove(e) {
      if (!this.isDrawing) return;
      const rect = this.$refs.canvas.getBoundingClientRect();
      this.points.push({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
      this.drawLines();
    },
    drawLines() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.beginPath();
      this.points.forEach((point, i) => {
        if (i === 0) ctx.moveTo(point.x, point.y);
        else ctx.lineTo(point.x, point.y);
      });
      ctx.stroke();
    }
  },
  mounted() {
    const canvas = this.$refs.canvas;
    canvas.width = canvas.parentElement.clientWidth;
    canvas.height = canvas.parentElement.clientHeight;
  }
}
</script>

基于SVG的实现

使用SVG更适合需要DOM操作和动画的场景：

<template>
  <svg ref="svg" @mousemove="handleMouseMove">
    <path :d="pathData" stroke="black" fill="none"/>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      points: []
    }
  },
  computed: {
    pathData() {
      if (this.points.length < 2) return '';
      let d = `M ${this.points[0].x} ${this.points[0].y}`;
      for (let i = 1; i < this.points.length; i++) {
        d += ` L ${this.points[i].x} ${this.points[i].y}`;
      }
      return d;
    }
  },
  methods: {
    handleMouseMove(e) {
      const rect = this.$refs.svg.getBoundingClientRect();
      this.points.push({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
    }
  }
}
</script>

使用第三方库

对于复杂连线场景，推荐使用专门库：

jsPlumb：提供拖拽连接、锚点等功能
LeaderLine：专门用于创建连接线
Konva：基于Canvas的图形库

安装示例（以LeaderLine为例）：

npm install leader-line

使用示例：

import LeaderLine from 'leader-line';

export default {
  mounted() {
    new LeaderLine(
      document.getElementById('start'),
      document.getElementById('end')
    );
  }
}

动态响应式连线

结合Vue响应式特性实现数据驱动的连线：

vue实现动态连线

<template>
  <svg>
    <path v-for="(line, i) in lines" :key="i" 
          :d="generatePath(line)" stroke="blue"/>
  </svg>
</template>

<script>
export default {
  data() {
    return {
      lines: [
        { from: { x: 10, y: 10 }, to: { x: 100, y: 100 } },
        { from: { x: 50, y: 50 }, to: { x: 200, y: 50 } }
      ]
    }
  },
  methods: {
    generatePath(line) {
      return `M ${line.from.x} ${line.from.y} L ${line.to.x} ${line.to.y}`;
    }
  }
}
</script>