vue3怎么实现通过手势放大缩小移动图片

在Vue 3中，你可以使用一些第三方库或者自定义指令来实现通过手势放大缩小移动图片的功能。下面是一个基本的示例代码：

首先，安装并导入`hammerjs`库，它是一个流行的手势识别库：

npm install hammerjs

import { createApp } from 'vue';
import Hammer from 'hammerjs';
import App from './App.vue';

const app = createApp(App);

app.directive('gesture', {
  mounted(el, binding) {
    const mc = new Hammer(el);
    const { scale, rotate, translate } = binding.value;

    // 设置手势识别的操作
    mc.get('pinch').set({ enable: true });
    mc.get('rotate').set({ enable: true });
    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });

    // 监听手势事件
    mc.on('pinch rotate pan', (event) => {
      el.style.transform = `
        translate(${translate.x}px, ${translate.y}px)
        scale(${scale * event.scale})
        rotate(${rotate + event.rotation}deg)
      `;
    });
  },
});

app.mount('#app');

然后，在你的组件模板中使用自定义指令 `v-gesture` 来绑定手势操作：

<template>
  <div v-gesture="{ scale: 1, rotate: 0, translate: { x: 0, y: 0 } }">
    <img src="your-image.jpg" alt="Image">
  </div>
</template>

这样，你就可以通过手势对图片进行放大缩小、旋转和平移操作了。你可以根据实际需求调整代码，添加更多的手势操作或对手势事件进行处理。