vue实现函数曲线

Vue 实现函数曲线的方法

在 Vue 中绘制函数曲线可以通过多种方式实现，以下是几种常见的方法：

使用 Canvas 绘制

在 Vue 组件中通过 Canvas API 直接绘制函数曲线：

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

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')

    // 绘制坐标轴
    ctx.beginPath()
    ctx.moveTo(50, 200)
    ctx.lineTo(350, 200)
    ctx.moveTo(200, 50)
    ctx.lineTo(200, 350)
    ctx.stroke()

    // 绘制函数曲线 y = x^2
    ctx.beginPath()
    for(let x = -5; x <= 5; x += 0.1) {
      const y = x * x
      const px = 200 + x * 30
      const py = 200 - y * 5
      if(x === -5) ctx.moveTo(px, py)
      else ctx.lineTo(px, py)
    }
    ctx.strokeStyle = 'red'
    ctx.stroke()
  }
}
</script>

使用 SVG 绘制

利用 Vue 的模板语法直接创建 SVG 元素：

<template>
  <svg width="400" height="400" viewBox="0 0 400 400">
    <!-- 坐标轴 -->
    <line x1="50" y1="200" x2="350" y2="200" stroke="black"/>
    <line x1="200" y1="50" x2="200" y2="350" stroke="black"/>

    <!-- 函数曲线 y = sin(x) -->
    <path :d="sinPath" fill="none" stroke="blue" stroke-width="2"/>
  </svg>
</template>

<script>
export default {
  computed: {
    sinPath() {
      let path = ''
      for(let x = -5; x <= 5; x += 0.1) {
        const y = Math.sin(x)
        const px = 200 + x * 30
        const py = 200 - y * 50
        if(x === -5) path += `M ${px} ${py}`
        else path += ` L ${px} ${py}`
      }
      return path
    }
  }
}
</script>

使用第三方图表库

集成专业图表库如 ECharts 或 Chart.js：

<template>
  <div ref="chart" style="width: 400px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart)

    const xData = []
    const yData = []
    for(let x = -5; x <= 5; x += 0.1) {
      xData.push(x)
      yData.push(Math.exp(x))
    }

    chart.setOption({
      xAxis: { type: 'value' },
      yAxis: { type: 'value' },
      series: [{
        type: 'line',
        data: yData.map((y, i) => [xData[i], y]),
        smooth: true
      }]
    })
  }
}
</script>

使用数学公式渲染库

结合 KaTeX 或 MathJax 显示函数公式：

<template>
  <div>
    <div v-html="formula"></div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
import katex from 'katex'

export default {
  data() {
    return {
      formula: ''
    }
  },
  mounted() {
    this.formula = katex.renderToString(
      'y = \\frac{1}{1 + e^{-x}}', 
      { throwOnError: false }
    )

    // 绘制 sigmoid 函数曲线
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')

    ctx.beginPath()
    for(let x = -5; x <= 5; x += 0.1) {
      const y = 1 / (1 + Math.exp(-x))
      const px = 200 + x * 30
      const py = 200 - y * 100
      if(x === -5) ctx.moveTo(px, py)
      else ctx.lineTo(px, py)
    }
    ctx.strokeStyle = 'green'
    ctx.stroke()
  }
}
</script>

响应式函数曲线

实现动态变化的函数曲线：

<template>
  <div>
    <input v-model="a" type="range" min="1" max="10" step="0.1">
    <span>a = {{a}}</span>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1
    }
  },
  watch: {
    a() {
      this.drawCurve()
    }
  },
  mounted() {
    this.drawCurve()
  },
  methods: {
    drawCurve() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

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

      // 绘制坐标轴
      ctx.beginPath()
      ctx.moveTo(50, 200)
      ctx.lineTo(350, 200)
      ctx.moveTo(200, 50)
      ctx.lineTo(200, 350)
      ctx.stroke()

      // 绘制函数曲线 y = a*sin(x)
      ctx.beginPath()
      for(let x = -5; x <= 5; x += 0.1) {
        const y = this.a * Math.sin(x)
        const px = 200 + x * 30
        const py = 200 - y * 30
        if(x === -5) ctx.moveTo(px, py)
        else ctx.lineTo(px, py)
      }
      ctx.strokeStyle = 'purple'
      ctx.stroke()
    }
  }
}
</script>

每种方法适用于不同场景：Canvas 适合高性能绘图，SVG 适合矢量图形，图表库提供丰富功能，数学库适合显示公式，响应式实现适合交互场景。根据具体需求选择最合适的实现方式。