Vue和Canvas：如何实现手势操作的图片缩放功能

// HTML模板<template>  <canvas ref="canvas" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas></template>// Vue组件<script>import VueTouch from 'vue-touch'export default {  mounted() {    // 使用Vue-Touch插件    VueTouch.registerCustomEvent('doubletap', {      type: 'touchend',      taps: 2    })    this.$el.addEventListener('doubletap', this.handleDoubleTap)  },  data() {    return {      canvas: null, // Canvas对象      ctx: null, // Canvas上下文      image: null, // 图片对象      scaleFactor: 1, // 缩放比例      posX: 0, // 图片X坐标      posY: 0 // 图片Y坐标    }  },  methods: {    handleTouchStart(e) {      // 记录起始位置      this.startX = e.touches[0].pageX      this.startY = e.touches[0].pageY    },    handleTouchMove(e) {      // 计算手指移动的距离      const deltaX = e.touches[0].pageX - this.startX      const deltaY = e.touches[0].pageY - this.startY      // 更新图片位置      this.posX += deltaX      this.posY += deltaY      // 重绘Canvas      this.draw()    },    handleTouchEnd() {      // 清除起始位置      this.startX = null      this.startY = null    },    handleDoubleTap() {      // 双击缩放图片      this.scaleFactor = this.scaleFactor > 1 ? 1 : 2      // 重绘Canvas      this.draw()    },    draw() {      const { canvas, ctx, image, scaleFactor, posX, posY } = this      // 清除Canvas      ctx.clearRect(0, 0, canvas.width, canvas.height)      // 根据缩放比例绘制图片      const width = image.width * scaleFactor      const height = image.height * scaleFactor      ctx.drawImage(image, posX, posY, width, height)    }  },  mounted() {    // 获取Canvas对象和上下文    this.canvas = this.$refs.canvas    this.ctx = this.canvas.getContext('2d')    // 加载图片    this.image = new Image()    this.image.src = 'path/to/image.jpg'    this.image.onload = () => {      // 重绘Canvas      this.draw()    }  }}</script>