最近开发遇到了这个需求,使用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实现手势操作放大缩小拖动等》对你有帮助,请点赞、收藏,并留下你的观点哦!