当前位置：首页 > VUE

vue实现笔顺答题

2026-03-09 04:14:52VUE

Vue 实现笔顺答题功能

笔顺答题功能通常需要结合动画演示和用户交互，以下是实现该功能的几种方法：

使用 SVG 和路径动画

通过 SVG 路径和动画库实现笔顺演示，用户可以跟随动画进行答题。

vue实现笔顺答题

<template>
  <div>
    <svg width="200" height="200" ref="svg">
      <path :d="characterPath" fill="none" stroke="black" stroke-width="2"/>
    </svg>
    <button @click="startAnimation">开始演示</button>
  </div>
</template>

<script>
import { animate } from 'popmotion'

export default {
  data() {
    return {
      characterPath: "M10,10 L100,100 L150,50",
      animation: null
    }
  },
  methods: {
    startAnimation() {
      const path = this.$refs.svg.querySelector('path')
      const length = path.getTotalLength()

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

      this.animation = animate({
        from: length,
        to: 0,
        duration: 2000,
        onUpdate: latest => {
          path.style.strokeDashoffset = latest
        }
      })
    }
  },
  beforeDestroy() {
    if (this.animation) this.animation.stop()
  }
}
</script>

使用 Canvas 绘制

Canvas 提供更灵活的绘图控制，适合复杂的笔顺动画。

vue实现笔顺答题

<template>
  <div>
    <canvas ref="canvas" width="200" height="200"></canvas>
    <button @click="drawStroke">开始绘制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      strokes: [
        { points: [{x:10,y:10}, {x:100,y:100}, {x:150,y:50}] }
      ],
      currentStroke: 0
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d')
    this.ctx.lineWidth = 2
  },
  methods: {
    drawStroke() {
      const points = this.strokes[this.currentStroke].points
      let i = 0

      const interval = setInterval(() => {
        if (i >= points.length) {
          clearInterval(interval)
          return
        }

        this.ctx.beginPath()
        if (i === 0) {
          this.ctx.moveTo(points[i].x, points[i].y)
        } else {
          this.ctx.lineTo(points[i].x, points[i].y)
          this.ctx.stroke()
        }
        i++
      }, 100)
    }
  }
}
</script>

使用第三方库

利用专门的中文笔顺库如 Hanzi Writer 简化实现。

<template>
  <div ref="writer"></div>
</template>

<script>
import HanziWriter from 'hanzi-writer'

export default {
  mounted() {
    this.writer = HanziWriter.create(this.$refs.writer, '字', {
      width: 200,
      height: 200,
      showOutline: true,
      strokeAnimationSpeed: 2
    })

    this.writer.animateCharacter()
  }
}
</script>

用户交互验证

增加用户跟随绘制的验证功能，检测笔顺是否正确。

<template>
  <div>
    <canvas 
      ref="canvas" 
      width="200" 
      height="200"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
    ></canvas>
    <div>正确率: {{ accuracy }}%</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      userPath: [],
      correctPath: [{x:10,y:10}, {x:100,y:100}, {x:150,y:50}],
      accuracy: 0
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d')
    this.ctx.lineWidth = 2
    this.drawCorrectPath()
  },
  methods: {
    drawCorrectPath() {
      this.ctx.strokeStyle = 'lightgray'
      this.correctPath.forEach((point, i) => {
        if (i === 0) {
          this.ctx.beginPath()
          this.ctx.moveTo(point.x, point.y)
        } else {
          this.ctx.lineTo(point.x, point.y)
          this.ctx.stroke()
        }
      })
      this.ctx.strokeStyle = 'black'
    },
    startDrawing(e) {
      this.isDrawing = true
      const pos = this.getMousePos(e)
      this.userPath = [{x: pos.x, y: pos.y}]
      this.ctx.beginPath()
      this.ctx.moveTo(pos.x, pos.y)
    },
    draw(e) {
      if (!this.isDrawing) return
      const pos = this.getMousePos(e)
      this.userPath.push({x: pos.x, y: pos.y})
      this.ctx.lineTo(pos.x, pos.y)
      this.ctx.stroke()
    },
    stopDrawing() {
      this.isDrawing = false
      this.calculateAccuracy()
    },
    getMousePos(e) {
      const rect = this.$refs.canvas.getBoundingClientRect()
      return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      }
    },
    calculateAccuracy() {
      // 简化的正确率计算逻辑
      const totalPoints = Math.max(this.userPath.length, this.correctPath.length)
      let matched = 0

      this.userPath.forEach(userPoint => {
        this.correctPath.forEach(correctPoint => {
          const distance = Math.sqrt(
            Math.pow(userPoint.x - correctPoint.x, 2) + 
            Math.pow(userPoint.y - correctPoint.y, 2)
          )
          if (distance < 10) matched++
        })
      })

      this.accuracy = Math.round((matched / totalPoints) * 100)
    }
  }
}
</script>