vue2 手机端照片在指定框内可放大缩小并支持移动照片

在Vue2中实现手机端图片在指定框内可放大缩小并支持移动，你可以结合Hammer.js库来处理触摸事件，以及CSS的transform属性来实现图片的缩放和平移。下面是一个基本的实现步骤：

1. 安装Hammer.js

首先，你需要安装Hammer.js库来处理触摸事件。

npm install hammerjs --save

然后，在你的项目的入口文件（通常是main.js）引入Hammer并将其绑定到Vue原型上：

import Vue from 'vue'
import Hammer from 'hammerjs'

// 绑定Hammer到Vue原型
Vue.prototype.$hammer = Hammer

2. 创建组件

接下来，创建一个Vue组件来实现图片的移动和缩放功能。

<template>
  <div class="image-container" ref="imageContainer">
    <img :src="imageUrl" 
         :style="{ transform: `translate(${translateX}px, ${translateY}px) scale(${scale})` }"
         @touchstart="handleTouchStart"
         @touchmove="handleTouchMove"
         @touchend="handleTouchEnd"
         @touchcancel="handleTouchEnd" />
  </div>
</template>

<script>export default {
   
  data() {
   
    return {
   
      imageUrl: 'your-image-url.jpg',
      scale: 1, // 初始缩放比例
      lastScale: 1, // 上一次的缩放比例，用于计算新的缩放比例
      translateX: 0, // 图片在x轴上的偏移量
      translateY: 0, // 图片在y轴上的偏移量
      startX: 0, // 触摸开始时的x坐标
      startY</