当前位置：首页 > VUE

vue实现飞线

2026-03-29 10:34:11VUE

Vue 实现飞线效果

飞线效果通常用于展示两点之间的动态连线，常见于地图、数据可视化等场景。以下是几种实现方式：

使用 SVG 和 CSS 动画

创建 SVG 路径并通过 CSS 或 JavaScript 实现动画效果：

<template>
  <svg width="500" height="300">
    <path 
      :d="pathData" 
      stroke="#ff0000" 
      stroke-width="2" 
      fill="none"
      ref="flyLine"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      startPoint: { x: 50, y: 50 },
      endPoint: { x: 450, y: 250 }
    }
  },
  computed: {
    pathData() {
      const { startPoint, endPoint } = this
      return `M${startPoint.x},${startPoint.y} L${endPoint.x},${endPoint.y}`
    }
  },
  mounted() {
    this.animateLine()
  },
  methods: {
    animateLine() {
      const path = this.$refs.flyLine
      const length = path.getTotalLength()

      path.style.strokeDasharray = length
      path.style.strokeDashoffset = length

      path.animate(
        [{ strokeDashoffset: length }, { strokeDashoffset: 0 }],
        {
          duration: 2000,
          iterations: Infinity
        }
      )
    }
  }
}
</script>

使用 Canvas 实现

通过 Canvas 绘制动态飞线：

<template>
  <canvas ref="canvas" width="500" height="300"></canvas>
</template>

<script>
export default {
  data() {
    return {
      start: { x: 50, y: 50 },
      end: { x: 450, y: 250 },
      progress: 0
    }
  },
  mounted() {
    this.drawLine()
    this.animate()
  },
  methods: {
    drawLine() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

      ctx.clearRect(0, 0, canvas.width, canvas.height)

      const currentX = this.start.x + (this.end.x - this.start.x) * this.progress
      const currentY = this.start.y + (this.end.y - this.start.y) * this.progress

      ctx.beginPath()
      ctx.moveTo(this.start.x, this.start.y)
      ctx.lineTo(currentX, currentY)
      ctx.strokeStyle = '#ff0000'
      ctx.lineWidth = 2
      ctx.stroke()
    },
    animate() {
      const animateFrame = () => {
        this.progress += 0.01
        if (this.progress > 1) {
          this.progress = 0
        }
        this.drawLine()
        requestAnimationFrame(animateFrame)
      }
      animateFrame()
    }
  }
}
</script>

使用第三方库

对于复杂场景，可以考虑使用以下库：

D3.js：强大的数据可视化库，支持各种路径动画
Three.js：3D 飞线效果实现
ECharts：内置飞线图类型

实现曲线飞线

创建贝塞尔曲线实现弧线效果：

vue实现飞线

// 在 SVG 方法中修改 pathData 计算
pathData() {
  const { startPoint, endPoint } = this
  const controlX = (startPoint.x + endPoint.x) / 2
  const controlY = Math.min(startPoint.y, endPoint.y) - 50
  return `M${startPoint.x},${startPoint.y} Q${controlX},${controlY} ${endPoint.x},${endPoint.y}`
}