当前位置：首页 > VUE

vue实现动态弧线

2026-01-16 04:17:39VUE

Vue 实现动态弧线的方法

动态弧线可以通过 SVG 或 Canvas 实现，以下是两种常见的方法：

使用 SVG 实现动态弧线

SVG 的 <path> 元素可以绘制弧线，结合 Vue 的数据绑定实现动态效果。

<template>
  <svg width="200" height="200" viewBox="0 0 200 200">
    <path :d="arcPath" fill="none" stroke="blue" stroke-width="2" />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      startAngle: 0,
      endAngle: 180,
      radius: 50,
      centerX: 100,
      centerY: 100
    };
  },
  computed: {
    arcPath() {
      const startRad = (this.startAngle * Math.PI) / 180;
      const endRad = (this.endAngle * Math.PI) / 180;
      const x1 = this.centerX + this.radius * Math.cos(startRad);
      const y1 = this.centerY + this.radius * Math.sin(startRad);
      const x2 = this.centerX + this.radius * Math.cos(endRad);
      const y2 = this.centerY + this.radius * Math.sin(endRad);
      const largeArcFlag = this.endAngle - this.startAngle <= 180 ? 0 : 1;
      return `M ${this.centerX},${this.centerY} L ${x1},${y1} A ${this.radius},${this.radius} 0 ${largeArcFlag} 1 ${x2},${y2} Z`;
    }
  },
  mounted() {
    setInterval(() => {
      this.endAngle = (this.endAngle + 1) % 360;
    }, 50);
  }
};
</script>

使用 Canvas 实现动态弧线

Canvas 提供了 arc() 方法绘制弧线，结合 Vue 的响应式特性实现动态效果。

<template>
  <canvas ref="canvas" width="200" height="200"></canvas>
</template>

<script>
export default {
  data() {
    return {
      startAngle: 0,
      endAngle: 0,
      radius: 50,
      centerX: 100,
      centerY: 100
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(
        this.centerX,
        this.centerY,
        this.radius,
        (this.startAngle * Math.PI) / 180,
        (this.endAngle * Math.PI) / 180
      );
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 2;
      ctx.stroke();
      this.endAngle = (this.endAngle + 1) % 360;
      requestAnimationFrame(animate);
    };
    animate();
  }
};
</script>

使用第三方库（如 D3.js）

D3.js 提供了强大的弧线绘制功能，可以与 Vue 结合使用。

vue实现动态弧线

<template>
  <svg ref="svg" width="200" height="200"></svg>
</template>

<script>
import * as d3 from 'd3';
export default {
  mounted() {
    const svg = d3.select(this.$refs.svg);
    const arcGenerator = d3.arc()
      .innerRadius(0)
      .outerRadius(50)
      .startAngle(0)
      .endAngle(Math.PI);
    svg.append('path')
      .attr('d', arcGenerator())
      .attr('fill', 'none')
      .attr('stroke', 'blue')
      .attr('transform', 'translate(100,100)');
  }
};
</script>