最近開發(fā)遇到了這個需求誊抛，使用vue開發(fā)h5加一個手勢放大縮小的功能，移動端的手勢操作用原生的寫法太麻煩剩晴，而且體驗還不好较木，所以從github找到一個hammer.js的一個手勢操作插件。
官方文檔地址：http://hammerjs.github.io/
文檔寫的一般的蔚龙，看的不怎么明白冰评，又從網(wǎng)上查了一些別人做過的案例，這個插件可以實現(xiàn)功能木羹，但是一些邏輯還是得自己寫甲雅。
實現(xiàn)手勢縮放用到了插件的pinch翻譯就是捏的意思，使用也遇到一些坑坑填。
1抛人、首先下載這個插件
cnpm install hammerjs --save
2、然后在使用的組件頁面引入
import Hammer from 'hammerjs'
3脐瑰、初始化插件妖枚，找到指定的dom節(jié)點。手勢縮放默認(rèn)是禁調(diào)的苍在，需要設(shè)置開啟盅惜。
4、手勢縮放在pinch回調(diào)函數(shù)里面的e的對象里面封裝了一個scale的屬性忌穿，就是代表這個縮放大小，但是有一個問題结啼，每次縮放完畢之后掠剑，再次縮放scale就會重置為1所以需要判斷是不是第一次縮放，記錄縮放之后的值郊愧，以相乘的方式進(jìn)行比例縮放朴译，測試之后是可行的。更多功能參考官方文檔属铁。
5眠寿、拖動用到了pan，拖動有向上拖動panup焦蘑，向下拖動pandown盯拱，向左拖動panleft，向右拖動panright，拖動開始panstart狡逢，拖動結(jié)束panend宁舰，拖動通過e.deltaX，e.deltalY來計算移動的距離奢浑，我用的是css3的translate蛮艰，拖動結(jié)束記錄結(jié)束的delatX delatY，在拖動的時候當(dāng)前的的delatX delatY加上記錄的delatX delatY雀彼，這樣就能實現(xiàn)無縫拖動壤蚜。拖動不能影響縮放，已經(jīng)縮放徊哑，在做東的時候也要把縮放加上袜刷。
6，雙擊实柠，連續(xù)點擊兩次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;
})
})
