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