html拖拽手势,h5实现手势操作放大缩小拖动等

最近开发遇到了这个需求，使用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;