vue怎么实现canvas的触摸滚动画布的功能（提供两种方案）

方法（一）：使用组件内置的getGraph().translate方法

（1）html部分

  <template>
    <div
          class="vfe-chart-main"
          @touchstart.passive="handleTouchStart"
          @touchmove.passive="handleTouchMove"
        >
          <!-- 画布内容 -->
          <flow
            ref="flow"
          />  
      </div>
  </template>

（2）methods方法部分

<script>
  methods:{
   handleTouchStart(event) {
        console.log("handleTouchStart");
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
      },

  handleTouchMove(event) {
        console.log("handleTouchMove");
        const moveX = event.touches[0].clientX - this.startX;
        const moveY = event.touches[0].clientY - this.startY;
        this.$refs.flow.getGraph().translate(moveX, moveY);
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
      },
  }
</script>

方法（二）：在最外层div添加ref属性，利用原生的方法解决

（1）html部分

<template>   
  <div
          class="vfe-chart-main"
          @touchstart.passive="handleTouchStart"
          @touchmove.passive="handleTouchMove"
          ref="flowContainer"
        >
          <!-- 画布内容 -->
          <flow
            ref="flow"
          />
     </div>
</template>

（2）methods方法部分

<script>   
  methods:{
    handleTouchMove(event) {
      console.log("handleTouchMove111");
      // 防止默认的滚动行为
      event.preventDefault();

      // 计算触摸点的当前位置与开始位置之间的差异
      const moveX = event.touches[0].clientX - this.startX;
      const moveY = event.touches[0].clientY - this.startY;

      // 更新组件的位置
      const el = this.$refs.flowContainer;
      const currentTransform = window.getComputedStyle(el).transform;
      let matrix = currentTransform === 'none' 
        ? [1, 0, 0, 1, 0, 0] // 默认矩阵
        : currentTransform.split('(')[1].split(')')[0].split(',');
      const translateX = parseInt(matrix[4]) + moveX;
      const translateY = parseInt(matrix[5]) + moveY;

      el.style.transform = `translate(${translateX}px, ${translateY}px)`;

      // 更新起始坐标为当前坐标，以便下一次计算
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
    },
  }
</script>