vue实现移动轨迹

Vue 实现移动轨迹

在 Vue 中实现移动轨迹可以通过监听鼠标或触摸事件，记录移动路径并实时渲染。以下是具体实现方法：

监听事件并记录坐标

使用 @mousemove 或 @touchmove 事件监听移动动作，将坐标点存入数组：

<template>
  <div 
    @mousemove="handleMove"
    @touchmove="handleTouchMove"
    ref="container"
  >
    <svg width="100%" height="100%">
      <path :d="pathData" fill="none" stroke="blue" stroke-width="2"/>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      points: [],
      isDrawing: false
    }
  },
  computed: {
    pathData() {
      if (this.points.length < 2) return '';
      return `M ${this.points[0].x} ${this.points[0].y} L ${this.points.map(p => `${p.x} ${p.y}`).join(' L ')}`;
    }
  },
  methods: {
    handleMove(e) {
      if (!this.isDrawing) return;
      const rect = this.$refs.container.getBoundingClientRect();
      this.points.push({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
    },
    handleTouchMove(e) {
      if (!this.isDrawing) return;
      const rect = this.$refs.container.getBoundingClientRect();
      const touch = e.touches[0];
      this.points.push({
        x: touch.clientX - rect.left,
        y: touch.clientY - rect.top
      });
    }
  }
}
</script>

平滑轨迹处理

添加插值算法使轨迹更平滑，例如使用贝塞尔曲线：

computed: {
  pathData() {
    if (this.points.length < 3) return '';
    let path = `M ${this.points[0].x} ${this.points[0].y}`;
    for (let i = 1; i < this.points.length - 2; i++) {
      const xc = (this.points[i].x + this.points[i + 1].x) / 2;
      const yc = (this.points[i].y + this.points[i + 1].y) / 2;
      path += ` Q ${this.points[i].x} ${this.points[i].y}, ${xc} ${yc}`;
    }
    return path;
  }
}

性能优化

对于高频移动事件，使用防抖或节流控制更新频率：

import { throttle } from 'lodash';

methods: {
  handleMove: throttle(function(e) {
    // 处理逻辑
  }, 16), // 约60fps
}

清除轨迹

添加重置功能清除已有轨迹：

methods: {
  clearPath() {
    this.points = [];
  }
}

移动端适配

确保触摸事件正常工作：

<div
  @touchstart="isDrawing = true"
  @touchend="isDrawing = false"
  @touchcancel="isDrawing = false"
></div>

通过以上方法可以实现基本的移动轨迹记录和展示功能，可根据实际需求扩展轨迹样式、存储或分析功能。