Vue 3实现的移动端两指控制图片缩放功能

Vue 3 中实现移动端两指控制图片缩放功能通常涉及使用 HammerJS 这样的手势库来监听用户的触屏事件，特别是 pinch（捏合）动作，它代表了用户同时用两个手指移动或改变触摸点之间的距离，常用于图片的放大缩小操作。

以下是一个简单的步骤指南：

1. **安装依赖**：
首先，你需要在项目中安装 HammerJS 和 Vue 的插件。可以使用 npm 或 yarn 安装：

   npm install hammerjs vue-hammer
   # 或者
   yarn add hammerjs vue-hammer

2. **引入并配置 Hammer实例**：
在 Vue 组件中导入 `vue-hammer` 并创建一个锤击实例：

   import { createHammerInstance } from 'vue-hammer';

   export default {
     setup() {
       const hammertime = createHammerInstance({
         recognizers: [
           ['pinch', new Hammer.Pinch()],
         ],
         preventDefault: true,
         onPinch(e) {
             // 缩放处理逻辑
             if (e.scale > 1) {
               this.scaleImage(+e.scale);
             } else if (e.scale < 1) {
               this.scaleImage(-e.scale);
             }
         },
       });
       return { hammertime };
     },
   };

3. **处理图片缩放**：
在组件中，你可以定义一个方法 `scaleImage(scale)` 来调整图片的大小，比如通过修改 `srcObject` 或 CSS transform 来实现缩放效果。

4. **绑定到元素**：
将锤击实例绑定到需要响应缩放的图片元素上，例如 `<img>` 或者一个自定义的视图容器：

   <template>
     <div :style="{ transform: getTransform() }">
       <img ref="image" @pinchstart="$event.stopPropagation()" />
     </div>
   </template>

   <script>
     export default {
       computed: {
         getTransform() {
           return this.hammertime.gestureCenter || { x: 0, y: 0 };
         },
       },
     };
   </script>

5. **防止默认行为**：
别忘了阻止图片的原生缩放行为，以防冲突：

   onPinch(e) {
     e.preventDefault();
     // ...
   },