如何通过Vue实现图片的拖拽和缩放动画？

<template>
  <div class="image-container">
    <img  :src="imageUrl" @mousedown="handleMouseDown" @touchstart="handleTouchStart" ref="image" / alt="如何通过Vue实现图片的拖拽和缩放动画？" >
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path_to_your_image',  // 图片路径
      isDragging: false,  // 是否正在拖拽
      startX: 0,  // 开始拖拽时的横坐标
      startY: 0,  // 开始拖拽时的纵坐标
      currentX: 0,  // 当前的横坐标
      currentY: 0,  // 当前的纵坐标
      scale: 1  // 缩放比例
    };
  },
  methods: {
    handleMouseDown(event) {
      event.preventDefault();
      this.isDragging = true;
      this.startX = event.clientX - this.currentX;
      this.startY = event.clientY - this.currentY;
      document.addEventListener('mousemove', this.handleMouseMove);
      document.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseMove(event) {
      event.preventDefault();
      if (this.isDragging) {
        this.currentX = event.clientX - this.startX;
        this.currentY = event.clientY - this.startY;
        this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;
      }
    },
    handleMouseUp() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.handleMouseMove);
      document.removeEventListener('mouseup', this.handleMouseUp);
    },
    handleTouchStart(event) {
      event.preventDefault();
      this.isDragging = true;
      this.startX = event.changedTouches[0].clientX - this.currentX;
      this.startY = event.changedTouches[0].clientY - this.currentY;
      document.addEventListener('touchmove', this.handleTouchMove);
      document.addEventListener('touchend', this.handleTouchEnd);
    },
    handleTouchMove(event) {
      event.preventDefault();
      if (this.isDragging) {
        this.currentX = event.changedTouches[0].clientX - this.startX;
        this.currentY = event.changedTouches[0].clientY - this.startY;
        this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;
      }
    },
    handleTouchEnd() {
      this.isDragging = false;
      document.removeEventListener('touchmove', this.handleTouchMove);
      document.removeEventListener('touchend', this.handleTouchEnd);
    }
  }
};
</script>

<style scoped>
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  width: 500px;
  overflow: hidden;
}

img {
  user-select: none;
  pointer-events: none;
  max-width: 100%;
  max-height: 100%;
  transform-origin: 0 0;
}
</style>

template:
...
  <div class="zoom-container">
    <button @click="handleZoomIn">Zoom In</button>
    <button @click="handleZoomOut">Zoom Out</button>
  </div>
...

methods:
...
  handleZoomIn() {
    this.scale += 0.1;
    this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;
  },
  handleZoomOut() {
    if (this.scale > 0.1) {
      this.scale -= 0.1;
      this.$refs.image.style.transform = `translate(${this.currentX}px,${this.currentY}px) scale(${this.scale})`;
    }
  }
...