怎么在单vue3+ts页面里使用hammerjs实现对图片的放大缩小和移动

在Vue 3 + TypeScript的单个页面中使用Hammer.js实现对图片的放大缩小和移动，你可以按照以下步骤进行操作：

首先，安装依赖：

npm install hammerjs

然后，在你的组件中引入Hammer.js和样式文件：

<template>
  <div>
    <img ref="image" src="your-image.jpg" alt="Image">
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue';
import Hammer from 'hammerjs';
import 'hammerjs/hammer.css';

export default {
  setup() {
    const image = ref<HTMLImageElement | null>(null);
    let posX = 0;
    let posY = 0;
    let scale = 1;
    let lastPosX = 0;
    let lastPosY = 0;
    let lastScale = 1;

    function applyTransform() {
      if (image.value) {
        const transformString = `translate(${posX}px, ${posY}px) scale(${scale})`;
        image.value.style.transform = transformString;
        image.value.style.webkitTransform = transformString;
      }
    }

    onMounted(() => {
      if (image.value) {
        const mc = new Hammer.Manager(image.value);

        mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
        mc.add(new Hammer.Swipe()).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);

        mc.on('panstart panmove', (e) => {
          posX = lastPosX + e.deltaX;
          posY = lastPosY + e.deltaY;
          applyTransform();
        });

        mc.on('pinchstart pinchmove', (e) => {
          scale = lastScale * e.scale;
          applyTransform();
        });

        mc.on('rotatestart rotatemove', (e) => {
          const rotation = lastRotation + e.rotation;
          if (image.value) {
            image.value.style.transform = `translate(${posX}px, ${posY}px) scale(${scale}) rotate(${rotation}deg)`;
          }
        });

        mc.on('panend', () => {
          lastPosX = posX;
          lastPosY = posY;
        });

        mc.on('pinchend', () => {
          lastScale = scale;
        });
      }
    });

    return {
      image,
    };
  },
};
</script>

在上面的代码中，我们使用了Vue 3的Composition API来创建了一个`image`的引用，通过`ref`函数来引用图片元素。在`onMounted`生命周期钩子中初始化Hammer.js，并添加了Pan（平移）、Pinch（缩放）和Rotate（旋转）手势。然后，我们根据手势事件的变化来改变图片的位置、缩放和旋转。

最后，在组件的模板中，我们使用了`ref="image"`将图片元素与`image`引用进行绑定。

这样，你就可以在Vue 3 + TypeScript的单个页面中使用Hammer.js实现对图片的放大缩小和移动了。记得根据你的实际需求进行调整和样式的修改。