最近開發遇到了這個需求，使用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实现手势操作放大缩小拖动等的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。