目前AlloyFinger作為騰訊手機(jī)QQ web手勢(shì)解決方案，在各大項(xiàng)目中都發(fā)揮著作用。

感興趣的同學(xué)可以去Github看看：

https://github.com/AlloyTeam/AlloyFinger

在騰訊，如：興趣部落、QQ群、QQ動(dòng)漫、騰訊學(xué)院、TEDxTencent、 AlloyTeam、騰訊CDC等多個(gè)部門、團(tuán)隊(duì)和項(xiàng)目都在使用AlloyFinger。如下圖所示： 

基本上只要有圖像裁剪、圖像查看的地方都會(huì)使用到AlloyFinger。因此AlloyFinger也入選了騰訊code平臺(tái)的精品組件： 

除了國內(nèi)外的項(xiàng)目團(tuán)隊(duì)都在使用AlloyFinger，國內(nèi)外的各大IT網(wǎng)站也進(jìn)行了轉(zhuǎn)載報(bào)道，作為超級(jí)小的手勢(shì)庫，騰訊的web項(xiàng)目為什么不選擇hammerjs而選擇AlloyFinger?下面從各個(gè)角度、架構(gòu)、原理上進(jìn)行一下分析。

體積 

可以看到hammerjs體積遠(yuǎn)遠(yuǎn)大于AlloyFinger，對(duì)于手機(jī)QQ web加載速度性能追求***的同學(xué)來說，使用hammerjs的大小是不可以接受的!那么，為什么hammerjs這么大?看下架構(gòu)設(shè)計(jì)便可知曉。

架構(gòu)設(shè)計(jì) 

其實(shí)，hammerjs抽象出的Class還沒有列舉全，還有許多。所以過度工程化，導(dǎo)致其體積特別大。一個(gè)好的設(shè)計(jì)并不需要把每個(gè)邏輯點(diǎn)都抽象出來，局部過程化，整體OO是可以。如AlloyFinger的設(shè)計(jì)。僅僅只有Vector2和AlloyFinger，在touchstart、touchmove、touchend是可以trigger出相關(guān)的手勢(shì)事件的，簡(jiǎn)單、直接!hammerjs能支持的手勢(shì)，AlloyFinger都能支持。

具體實(shí)現(xiàn)

眾所周知，瀏覽器暴露了四個(gè)事件給開發(fā)者，touchstart touchmove touchend touchcancel，在這四個(gè)事件的回調(diào)函數(shù)可以拿到TouchEvent。

TouchEvent:

touches：當(dāng)前位于屏幕上的所有手指動(dòng)作的列表

targetTouches：位于當(dāng)前 DOM 元素上的手指動(dòng)作的列表

changedTouches：涉及當(dāng)前事件的手指動(dòng)作的列表

TouchEvent里可以拿到各個(gè)手指的坐標(biāo)，那么可編程性就這么產(chǎn)生了。

Tap點(diǎn)按 

移動(dòng)端click有300毫秒延時(shí)，tap的本質(zhì)其實(shí)就是touchend。但是要判斷touchstart的手的坐標(biāo)和touchend時(shí)候手的坐標(biāo)x、y方向偏移要小于30。小于30才會(huì)去觸發(fā)tap。

longTap長按 

touchstart開啟一個(gè)750毫秒的settimeout，如果750ms內(nèi)有touchmove或者touchend都會(huì)清除掉該定時(shí)器。超過750ms沒有touchmove或者touchend就會(huì)觸發(fā)longTap

swipe劃 

這里需要注意，當(dāng)touchstart的手的坐標(biāo)和touchend時(shí)候手的坐標(biāo)x、y方向偏移要大于30，判斷swipe，小于30會(huì)判斷tap。那么用戶到底是從上到下，還是從下到上，或者從左到右、從右到左滑動(dòng)呢?可以根據(jù)上面三個(gè)判斷得出，具體的代碼如下：

_swipeDirection: function (x1, x2, y1, y2) { 
        return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down') 
}  

pinch捏

這個(gè)手勢(shì)是使用頻率非常高的，如圖像裁剪的時(shí)候放大或者縮小圖片，就需要pinch。 

如上圖所示，兩點(diǎn)之間的距離比值求pinch的scale。這個(gè)scale會(huì)掛載在event上，讓用戶反饋給dom的transform或者其他元素的scale屬性。

rotate旋轉(zhuǎn) 

如上圖所示，利用內(nèi)積，可以求出兩次手勢(shì)狀態(tài)之間的夾角θ。但是這里怎么求旋轉(zhuǎn)方向呢?那么就要使用差乘(Vector Cross)。利用cross結(jié)果的正負(fù)來判斷旋轉(zhuǎn)的方向。 

cross本質(zhì)其實(shí)是面積，可以看下面的推導(dǎo)： 

所以，物理引擎里經(jīng)常用cross來計(jì)算轉(zhuǎn)動(dòng)慣量，因?yàn)榱仄鋵?shí)要是力乘矩相當(dāng)于面積： 

總結(jié)

主要的一些事件觸發(fā)原理已經(jīng)在上面講解，還有如multipointStart、doubleTap、singleTap、multipointEnd可以看源碼，不到200行的代碼應(yīng)該很容易消化。trigger手勢(shì)事件的同時(shí)，touchStart、touchMove、touchEnd和touchCancel同樣也可以監(jiān)聽。

詳細(xì)的Vector2和AlloyFinger代碼可以去Github上查閱：

https://github.com/AlloyTeam/AlloyFinger

任何意見或者建議歡迎提issue：

https://github.com/AlloyTeam/AlloyFinger/issues