超小Web手勢庫AlloyFinger原理

2022-07-07 19:42:13 字數 2372 閱讀 9294

感興趣的同學可以去github看看:

可以看到hammerjs體積遠遠大於alloyfinger,對於手機qq web載入速度效能追求極致的同學來說,使用hammerjs的大小是不可以接受的!

那麼,為什麼hammerjs這麼大?看下架構設計便可知曉。

其實,hammerjs抽象出的class還沒有列舉全,還有許多。所以過度工程化,導致其體積特別大。

乙個好的設計並不需要把每個邏輯點都抽象出來,區域性過程化,整體oo是可以。如alloyfinger的設計。僅僅只有vector2和alloyfinger,在touchstart、touchmove、touchend是可以trigger出相關的手勢事件的,簡單、直接!hammerjs能支援的手勢,alloyfinger都能支援。

眾所周知,瀏覽器暴露了四個事件給開發者,touchstart touchmove touchend touchcancel,在這四個事件的**函式可以拿到touchevent。

touchevent:

touches:當前位於螢幕上的所有手指動作的列表

targettouches:位於當前 dom 元素上的手指動作的列表

changedtouches:涉及當前事件的手指動作的列表

touchevent裡可以拿到各個手指的座標,那麼可程式設計性就這麼產生了。

移動端click有300毫秒延時,tap的本質其實就是touchend。但是要判斷touchstart的手的座標和touchend時候手的座標x、y方向偏移要小於30。小於30才會去觸發tap。

touchstart開啟乙個750毫秒的settimeout,如果750ms內有touchmove或者touchend都會清除掉該定時器。超過750ms沒有touchmove或者touchend就會觸發longtap

這裡需要注意,當touchstart的手的座標和touchend時候手的座標x、y方向偏移要大於30,判斷swipe,小於30會判斷tap。那麼使用者到底是從上到下,還是從下到上,或者從左到右、從右到左滑動呢?可以根據上面三個判斷得出,具體的**如下:

1 _swipedirection: function

(x1, x2, y1, y2)

pinch捏

這個手勢是使用頻率非常高的,如影象裁剪的時候放大或者縮小,就需要pinch。

如上圖所示,兩點之間的距離比值求pinch的scale。這個scale會掛載在event上,讓使用者反饋給dom的transform或者其他元素的scale屬性。

如上圖所示,利用內積,可以求出兩次手勢狀態之間的夾角θ。但是這裡怎麼求旋轉方向呢?那麼就要使用差乘(vector cross)。

利用cross結果的正負來判斷旋轉的方向。

cross本質其實是面積,可以看下面的推導:

所以,物理引擎裡經常用cross來計算轉動慣量,因為力矩其實要是力乘矩相當於面積:

總結主要的一些事件觸發原理已經在上面講解,還有如multipointstart、doubletap、singletap、multipointend可以看原始碼,不到200行的**應該很容易消化。trigger手勢事件的同時,touchstart、touchmove、touchend和touchcancel同樣也可以監聽。

詳細的vector2和alloyfinger**可以去github上查閱:

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

/issues

手勢資料庫

這個資料庫主要用來檢測車內司機的行為,對車內司機的手 手機 方向盤進行了標註,主要用來分析司機是否在駕駛途中使用手機。11k hands資料集涵蓋了來自190個18 75歲之間的實驗物件的11076幅手部影象 1600 x 1200畫素 每個實驗物件都要張開或是握緊左右手的手指,然後,在統一的白色背...

支援手勢的ImageView庫

專案中有個需求,可以檢視配套資源。該配套資源可以是png,jpg,gif資源 在開發過程中遇到的問題 1.資源可以替換,位址是相同的 2.支援展示gif 方案public class photoviewactivity extends baseactivity final photoviewatta...

微信小程式 手勢鎖詳解

啟動手勢鎖初始化 this.init init this.ctx wx.createcanvascontext this.canvasid,this 初始化中心座標陣列 this.location 初始化繪製圖形圓 this.drawpo 初始化繫結事件 this.bindevent locatio...