目前AlloyFinger作為騰訊手機(jī)QQ web手勢解決方案，在各大項(xiàng)目中都發(fā)揮著作用。
感興趣的同學(xué)可以去Github看看：https://github.com/AlloyTeam/AlloyFinger

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

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

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

體積

可以看到hammerjs體積遠(yuǎn)遠(yuǎn)大于AlloyFinger，對于手機(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)的手勢事件的，簡單、直接！hammerjs能支持的手勢，AlloyFinger都能支持。

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

眾所周知，瀏覽器暴露了四個(gè)事件給開發(fā)者，touchstart touchmove touchend touchcancel，在這四個(gè)事件的回調(diào)函數(shù)可以拿到TouchEvent。
TouchEvent:
touches：當(dāng)前位于屏幕上的所有手指動作的列表
targetTouches：位于當(dāng)前 DOM 元素上的手指動作的列表
changedTouches：涉及當(dāng)前事件的手指動作的列表
TouchEvent里可以拿到各個(gè)手指的坐標(biāo)，那么可編程性就這么產(chǎn)生了。

Tap點(diǎn)按

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

longTap長按

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

swipe劃

這里需要注意，當(dāng)touchstart的手的坐標(biāo)和touchend時(shí)候手的坐標(biāo)x、y方向偏移要大于30，判斷swipe，小于30會判斷tap。那么用戶到底是從上到下，還是從下到上，或者從左到右、從右到左滑動呢？可以根據(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í)候放大或者縮小圖片，就需要pinch。

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

rotate旋轉(zhuǎn)

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

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

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

總結(jié)

主要的一些事件觸發(fā)原理已經(jīng)在上面講解，還有如multipointStart、doubleTap、singleTap、multipointEnd可以看源碼，不到200行的代碼應(yīng)該很容易消化。trigger手勢事件的同時(shí)，touchStart、touchMove、touchEnd和touchCancel同樣也可以監(jiān)聽。
詳細(xì)的Vector2和AlloyFinger代碼可以去Github上查閱：
https://github.com/AlloyTeam/AlloyFinger
任何意見或者建議歡迎提issue：
https://github.com/AlloyTeam/AlloyFinger/issues