vueh5实现双指操作图片或者内容放大缩小拖动 (hammerjs插件)

可在mounted钩子直接使用

通过使用Hammer.js库来实现手势操作，包括缩放、拖动和双击重置功能

1.在模板中添加了一个<div>元素，并为其设置了ref属性，以便在代码中引用该元素。

2.在mounted生命周期钩子函数中，通过this.$refs.main获取之前设置的<div>元素。

3.创建了一个新的Hammer实例，传入要进行手势操作的元素。

4.启用pinch手势，用于实现缩放功能。

5.监听pinch手势的不同事件，通过计算缩放比例和应用相应的transform样式来实现缩放效果。

6.监听doubletap手势，用于双击重置缩放和位置，将缩放比例和位置重置为初始状态。

7.监听pan手势，通过计算拖动的偏移量和应用相应的transform样式来实现拖动功能。

8.监听panend手势，记录拖动的偏移量，以便在下一次拖动时保持连续性。

引入  
import Hammer from 'hammerjs'
<!-- 在需要实现放大缩小和拖动的内容外部添加一个div，并设置ref属性，以便在代码中引用 -->
<div ref="main">
  <!-- 放置需要实现放大缩小和拖动的内容 -->
</div>

matrix_box(){
    let that = this;
    this.$nextTick(() => {
      let x = 0;
      let y = 0;
      let _node = this.$refs.main; // 获取之前在模板中设置的ref属性
      let hand = new Hammer(_node); // 创建一个新的Hammer实例，传入要进行手势操作的元素

      // 启用pinch手势
      hand.get('pinch').set({ enable: true });

      // 监听pinch手势的不同事件，用于实现缩放功能
      hand.on("pinchmove pinchstart pinchin pinchout", e => {
        if (e.type == "pinchstart") {
          this.scaleIndex = this.scaleCount || 1; // 记录当前的缩放比例
        }
        this.scaleCount = this.scaleIndex * e.scale; // 计算新的缩放比例
        _node.style.transform = "scale(" + (this.scaleIndex * e.scale) + ")"; // 应用缩放效果
      });

      // 监听doubletap手势，用于双击重置缩放和位置
      hand.on('doubletap', (e) => {
        x = 0;
        y = 0;
        this.scaleCount = 1; // 重置缩放比例为1
        _node.style.transform = "translateX(0px) translateY(0px) scale(1)"; // 重置位置和缩放效果
      });

      // 监听pan手势，用于实现拖动功能
      hand.on('panright panleft panup pandown', (e) => {
        _node.style.transform = "translateX(" + (e.deltaX + x) + "px)" + "translateY(" + (e.deltaY + y) + "px)" + "scale(" + (this.scaleCount * e.scale) + ")"; // 应用拖动和缩放效果
      });

      // 监听panend手势，用于记录拖动的偏移量，以便在下一次拖动时保持连续性
      hand.on('panend', (e) => {
        x = e.deltaX + x; // 记录水平方向上的偏移量
        y = e.deltaY + y; // 记录垂直方向上的偏移量
      });
    });
  },