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: 0, // 触摸开始时的y坐标
      pinchStartDistance: null, // 双指触控开始时的距离
    };
  },
 //   写函数
    methods: {
        /**
         * 处理触摸开始事件
         * @param {TouchEvent} e 触摸事件对象
         */
        handleTouchStart(e) {
            if (e.touches.length === 2) {
                // 当两个手指触摸时，计算初始缩放距离
                this.pinchStartDistance = this.getDistance(e.touches[0], e.touches[1]);
            } else {
                // 当一个手指触摸时，记录起始位置
                this.startX = e.touches[0].clientX;
                this.startY = e.touches[0].clientY;
            }
        },
        /**
         * 处理触摸移动事件
         * @param {TouchEvent} e 触摸事件对象
         */
        handleTouchMove(e) {
            e.preventDefault(); // 阻止默认的滚动行为
            if (e.touches.length === 2) {
                // 当两个手指移动时，进行图片缩放
                this.scaleImage(e);
            } else if (e.touches.length === 1) {
                // 当一个手指移动时，进行图片平移
                this.moveImage(e);
            }
        },
        /**
         * 处理触摸结束事件
         */
        handleTouchEnd() {
            this.lastScale = this.scale; // 记录最后一次的缩放比例
        },
        /**
         * 根据两个手指的距离计算并更新图片的缩放比例
         * @param {TouchEvent} e 触摸事件对象
         */
        scaleImage(e) {
            const currentDistance = this.getDistance(e.touches[0], e.touches[1]);
            const newScale = this.lastScale * (currentDistance / this.pinchStartDistance);
            // 限制缩放比例在1到3之间
            this.scale = Math.min(Math.max(newScale, 1), 3); // 缩放范围限制在1到3之间
            this.updateTransformOrigin(e);
        },
        /**
         * 根据手指的移动更新图片的平移位置
         * @param {TouchEvent} e 触摸事件对象
         */
        moveImage(e) {
            // 计算并更新图片的平移距离
            this.translateX += e.touches[0].clientX - this.startX;
            this.translateY += e.touches[0].clientY - this.startY;
            // 更新起始位置为当前手指位置
            this.startX = e.touches[0].clientX;
            this.startY = e.touches[0].clientY;
        },
        /**
         * 计算两个触摸点之间的距离
         * @param {Touch} touch1 第一个触摸点
         * @param {Touch} touch2 第二个触摸点
         * @return {number} 两个触摸点之间的距离
         */
        getDistance(touch1, touch2) {
            return Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
        },
        /**
         * 更新图片的变换原点
         * @param {TouchEvent} e 触摸事件对象
         */
        updateTransformOrigin(e) {
            // 计算两个手指的中心点位置
            const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
            const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
            // 获取图片容器的边界信息
            const containerRect = this.$refs.imageContainer.getBoundingClientRect();
            // 计算变换原点的百分比位置
            const originX = ((centerX - containerRect.left) / containerRect.width) * 100;
            const originY = ((centerY - containerRect.top) / containerRect.height) * 100;
            // 设置图片的变换原点
            this.$refs.image.style.transformOrigin = `${originX}% ${originY}%`;
        },
     
}

</script>


<style scoped>.image-container {
  width: 100%;
  height: 300px; /* 请根据实际情况调整高度 */
  overflow: hidden;
  position: relative;
}
</style>

注意事项
上述代码中，图片的移动和缩放是基于触摸事件处理的。
handleTouchStart, handleTouchMove, 和 handleTouchEnd 分别处理触摸开始、移动和结束的逻辑。
scaleImage 方法用于处理图片的缩放，通过计算两指之间的距离变化来动态调整缩放比例。
moveImage 方法用于图片的移动，通过计算触摸点的位移来更新图片的位置。
为了使图片在缩放时不超出容器，你可能还需要实现额外的逻辑来限制图片的移动范围，确保它始终在指定框内。
请根据实际需求调整样式和逻辑细节。