H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件

H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件

1. npm 下载插件hammerjs

npm install --save hammerjs

2. html 界面

//在界面上展示的图片 路径换成自已的图片路径
<div class="imgWrap">
 <img src="../assets/img/active.jpg" alt="" @click="clickImg">
</div>
// 展示预览的组件  van-icon 是用的vant的icon图标，自己项目里用自己的图标
<van-overlay :show="show">
  <van-icon name="close" size="30" color="#fff" @click="closeFn" v-show="show" style="position:fixed;top:0;right:0;margin:10px;z-index:100"/>
  <div class="imgWrapPop" ref="activeBox" style="">
    <img src="../assets/img/active.jpg" alt="" >
  </div>
</van-overlay>

3. 引用

import Hammer from 'hammerjs';
import { Toast,Popup ,Icon} from 'vant';//要使用vant  ui的icon图标的话需要先下载后按需引入

3. data

data() {
    return {
      show:false,
    };
  },

4. mounted 函数

 mounted() {
   this.matrix_box()
 },

5. methods函数

matrix_box(){
   console.log(123)
   let that = this;
   this.$nextTick(() => {
     let x = 0;
     let y = 0;
     let _node = this.$refs.activeBox; // 获取之前在模板中设置的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; // 记录垂直方向上的偏移量
     });
   });
 },
clickImg(){
 	this.show = true;
},
closeFn(){
  	this.show = false;
}