用hammer.js和vue2写一个图片双指放大

好的，我可以为您提供一些代码示例，但是在开始之前，请确保您已经安装了Vue2和Hammer.js。下面是实现双指放大的代码示例：

首先，在您的Vue组件中引入Hammer.js和图片：

<template>
  <div>
    <img ref="image" src="/path/to/image.jpg"/>
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const image = this.$refs.image;
    const mc = new Hammer.Manager(image);

    mc.add(new Hammer.Pinch());

    let currentScale = 1;
    let lastScale;
    let posX = 0;
    let posY = 0;
    let lastPosX = 0;
    let lastPosY = 0;
    let maxPosX = 0;
    let maxPosY = 0;
    let transform = '';

    mc.on('pinchstart', (event) => {
      lastScale = currentScale;
    });

    mc.on('pinchmove', (event) => {
      currentScale = Math.max(1, lastScale * event.scale);

      posX = (event.center.x - lastPosX) * currentScale / lastScale + lastPosX;
      posY = (event.center.y - lastPosY) * currentScale / lastScale + lastPosY;

      maxPosX = Math.ceil((currentScale - 1) * image.width / 2);
      maxPosY = Math.ceil((currentScale - 1) * image.height / 2);
      posX = Math.min(Math.max(-maxPosX, posX), maxPosX);
      posY = Math.min(Math.max(-maxPosY, posY), maxPosY);

      transform = `translate3d(${posX}px, ${posY}px, 0) scale3d(${currentScale}, ${currentScale}, 1)`;

      image.style.transform = transform;
    });

    mc.on('pinchend', (event) => {
      lastScale = currentScale;
      lastPosX = posX;
      lastPosY = posY;
    });
  }
}
</script>

在这个示例中，我们使用了Hammer.Manager和Hammer.Pinch来处理双指捏合手势。我们跟踪了当前的缩放比例，以及图片的位置。我们还确保图像不会超出缩放的边界。

最后，我们使用transform样式来应用变换，实现图片的缩放和移动。

希望这个示例对您有所帮助！