当前位置：首页 > VUE

vue实现曲线

2026-03-27 16:29:00VUE

使用 SVG 绘制曲线

在 Vue 中可以通过 SVG 的 <path> 元素绘制曲线，结合 d 属性定义贝塞尔曲线或二次曲线。

<template>
  <svg width="200" height="200">
    <path 
      d="M10 80 Q 100 10, 200 80" 
      stroke="black" 
      fill="transparent"
    />
  </svg>
</template>

M10 80 表示起点坐标 (10, 80)。
Q 100 10, 200 80 定义二次贝塞尔曲线，控制点为 (100, 10)，终点为 (200, 80)。

使用 Canvas 动态绘制

通过 Vue 的 ref 获取 Canvas 元素，使用 JavaScript 的 CanvasRenderingContext2D 绘制曲线。

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

<script>
export default {
  mounted() {
    const ctx = this.$refs.canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(10, 80);
    ctx.quadraticCurveTo(100, 10, 200, 80);
    ctx.stroke();
  }
}
</script>

quadraticCurveTo(cpx, cpy, x, y) 绘制二次贝塞尔曲线，参数为控制点和终点坐标。

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

对于数据可视化场景，可以集成 Chart.js 绘制平滑曲线图。

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

<script>
import Chart from 'chart.js';

export default {
  mounted() {
    new Chart(this.$refs.chart, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar'],
        datasets: [{
          label: 'Data',
          data: [10, 30, 20],
          borderColor: 'blue',
          tension: 0.4 // 控制曲线平滑度
        }]
      }
    });
  }
}
</script>

tension: 0.4 调整曲线的平滑程度，值范围 0（直线）到 1（最平滑）。

响应式动态更新

结合 Vue 的响应式数据，实现曲线动态更新。

vue实现曲线

<template>
  <svg width="200" height="200">
    <path 
      :d="pathData" 
      stroke="black" 
      fill="transparent"
    />
  </svg>
  <button @click="updateCurve">更新曲线</button>
</template>

<script>
export default {
  data() {
    return {
      controlY: 10
    };
  },
  computed: {
    pathData() {
      return `M10 80 Q 100 ${this.controlY}, 200 80`;
    }
  },
  methods: {
    updateCurve() {
      this.controlY = Math.random() * 100;
    }
  }
};
</script>