最近开发遇到了这个需求，使用vue开发h5加一个手势放大缩小的功能，移动端的手势操作用原生的写法太麻烦，而且体验还不好，所以从github找到一个hammer.js的一个手势操作插件。
官方文档地址：http://hammerjs.github.io/
文档写的一般的，看的不怎么明白，又从网上查了一些别人做过的案例，这个插件可以实现功能，但是一些逻辑还是得自己写。
实现手势缩放用到了插件的pinch翻译就是捏的意思，使用也遇到一些坑。
1、首先下载这个插件
cnpm install hammerjs --save
2、然后在使用的组件页面引入
import Hammer from 'hammerjs'
3、初始化插件，找到指定的dom节点。手势缩放默认是禁调的，需要设置开启。
4、手势缩放在pinch回调函数里面的e的对象里面封装了一个scale的属性，就是代表这个缩放大小，但是有一个问题，每次缩放完毕之后，再次缩放scale就会重置为1所以需要判断是不是第一次缩放，记录缩放之后的值，以相乘的方式进行比例缩放，测试之后是可行的。更多功能参考官方文档。
5、拖动用到了pan，拖动有向上拖动panup，向下拖动pandown，向左拖动panleft，向右拖动panright，拖动开始panstart，拖动结束panend，拖动通过e.deltaX，e.deltalY来计算移动的距离，我用的是css3的translate，拖动结束记录结束的delatX delatY，在拖动的时候当前的的delatX delatY加上记录的delatX delatY，这样就能实现无缝拖动。拖动不能影响缩放，已经缩放，在做东的时候也要把缩放加上。
6，双击，连续点击两次doubletap之后，还原拖动和缩放。
this.$nextTick(()=>{
let x=0;
let y=0;
let _node=this.$refs.main.querySelector('#pageContainer'+PageNumber);
let hand=new Hammer(_node);
hand.get('pinch').set({enable:true});
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)+ ")"
});
hand.on('doubletap',(e)=>{//双击
x=0;
y=0;
this.scaleCount=1;
_node.style.transform = "translateX(0px) translateY(0px) scale(1)";
})
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)+ ")"
})
hand.on('panend',(e)=>{
x=e.deltaX+x;
y=e.deltaY+y;
})
})
如果觉得《html拖拽手势 h5实现手势操作放大缩小拖动等》对你有帮助，请点赞、收藏，并留下你的观点哦！
