AlloyFinger.js 源碼 學習筆記及原理說明

     此手勢庫利用了手機端touchstart, touchmove, touchend, touchcancel原生事件模擬出了 rotate  touchStart  multipointStart  multipointEnd  pinch  swipe  tap  doubleTap  longTap  singleTap  pressMove  touchMove  touchEnd  touchCancel這14個事件回調給用戶去使用。下面會講述幾個常用的手勢原理實現。

 

先來看一下我對源碼的理解, 注意關於rotate旋轉手勢，我個人覺得可能理解的不對(但是我會把我的筆記放在下面)，希望有人能夠指出我的問題，謝謝了。

 

源碼筆記：

 

/* AlloyFinger v0.1.4
 * By dntzhang
 * Github: https://github.com/AlloyTeam/AlloyFinger
 * Sorrow.X --- 添加注釋,注釋純屬個人理解(關於rotate旋轉手勢,理解的還不透徹)
 */
; (function () {
    // 一些要使用的內部工具函數

    // 2點之間的距離 (主要用來算pinch的比例的, 兩點之間的距離比值求pinch的scale)
    function getLen(v) {
        return Math.sqrt(v.x * v.x + v.y * v.y);
    };

    // dot和getAngle函數用來算兩次手勢狀態之間的夾角, cross函數用來算方向的, getRotateAngle函數算手勢真正的角度的
    function dot(v1, v2) {
        return v1.x * v2.x + v1.y * v2.y;
    };

    // 求兩次手勢狀態之間的夾角
    function getAngle(v1, v2) {
        var mr = getLen(v1) * getLen(v2);
        if (mr === 0) return 0;
        var r = dot(v1, v2) / mr;
        if (r > 1) r = 1;
        return Math.acos(r);
    };

    // 利用cross結果的正負來判斷旋轉的方向(大於0為逆時針, 小於0為順時針)
    function cross(v1, v2) {
        return v1.x * v2.y - v2.x * v1.y;
    };

    // 如果cross大於0那就是逆時針對於屏幕是正角,對於第一象限是負角,所以 角度 * -1, 然后角度單位換算
    function getRotateAngle(v1, v2) {
        var angle = getAngle(v1, v2);
        if (cross(v1, v2) > 0) {
            angle *= -1;
        };
        return angle * 180 / Math.PI;
    };

    // HandlerAdmin構造函數
    var HandlerAdmin = function(el) {
        this.handlers = [];    // 手勢函數集合
        this.el = el;    // dom元素
    };

    // HandlerAdmin原型方法

    // 把fn添加到實例的 handlers數組中
    HandlerAdmin.prototype.add = function(handler) {
        this.handlers.push(handler); 
    };

    // 刪除 handlers數組中的函數
    HandlerAdmin.prototype.del = function(handler) {
        if(!handler) this.handlers = [];    // handler為假值,handlers則賦值為[](參數不傳undefined,其實不管this.handlers有沒有成員函數,都得置空)

        for(var i = this.handlers.length; i >= 0; i--) {
            if(this.handlers[i] === handler) {    // 如果函數一樣
                this.handlers.splice(i, 1);    // 從handler中移除該函數(改變了原數組)
            };
        };
    };

    // 執行用戶的回調函數
    HandlerAdmin.prototype.dispatch = function() {
        for(var i=0, len=this.handlers.length; i<len; i++) {
            var handler = this.handlers[i];    
            if(typeof handler === 'function') handler.apply(this.el, arguments);    // 執行回調this為dom元素, 把觸發的事件對象作為參數傳過去了
        };
    };

    function wrapFunc(el, handler) {
        var handlerAdmin = new HandlerAdmin(el);    // 實例化一個對象
        handlerAdmin.add(handler);

        return handlerAdmin;
    };

    // AlloyFinger構造函數
    var AlloyFinger = function (el, option) {    // el: dom元素/id, option: 各種手勢的集合對象

        this.element = typeof el == 'string' ? document.querySelector(el) : el;    // 獲取dom元素

        // 綁定原型上start, move, end, cancel函數的this對象為 AlloyFinger實例
        this.start = this.start.bind(this);
        this.move = this.move.bind(this);
        this.end = this.end.bind(this);
        this.cancel = this.cancel.bind(this);

        // 給dom元素 綁定原生的 touchstart, touchmove, touchend, touchcancel事件, 默認冒泡
        this.element.addEventListener("touchstart", this.start, false);
        this.element.addEventListener("touchmove", this.move, false);
        this.element.addEventListener("touchend", this.end, false);
        this.element.addEventListener("touchcancel", this.cancel, false);

        this.preV = { x: null, y: null };    // 開始前的坐標
        this.pinchStartLen = null;    // start()方法開始時捏的長度
        this.scale = 1;    // 初始縮放比例為1
        this.isDoubleTap = false;    // 是否雙擊, 默認為false

        var noop = function () { };    // 空函數(把用戶沒有綁定手勢函數默認賦值此函數)

        // 提供了14種手勢函數. 根據option對象, 分別創建一個 HandlerAdmin實例 賦值給相應的this屬性
        this.rotate = wrapFunc(this.element, option.rotate || noop);
        this.touchStart = wrapFunc(this.element, option.touchStart || noop);
        this.multipointStart = wrapFunc(this.element, option.multipointStart || noop);
        this.multipointEnd = wrapFunc(this.element, option.multipointEnd || noop);
        this.pinch = wrapFunc(this.element, option.pinch || noop);
        this.swipe = wrapFunc(this.element, option.swipe || noop);
        this.tap = wrapFunc(this.element, option.tap || noop);
        this.doubleTap = wrapFunc(this.element, option.doubleTap || noop);
        this.longTap = wrapFunc(this.element, option.longTap || noop);
        this.singleTap = wrapFunc(this.element, option.singleTap || noop);
        this.pressMove = wrapFunc(this.element, option.pressMove || noop);
        this.touchMove = wrapFunc(this.element, option.touchMove || noop);
        this.touchEnd = wrapFunc(this.element, option.touchEnd || noop);
        this.touchCancel = wrapFunc(this.element, option.touchCancel || noop);

        this.delta = null;    // 差值 變量增量
        this.last = null;    // 最后數值
        this.now = null;    // 開始時的時間戳
        this.tapTimeout = null;    // tap超時
        this.singleTapTimeout = null;    // singleTap超時
        this.longTapTimeout = null;    // longTap超時(定時器的返回值)
        this.swipeTimeout = null;    // swipe超時
        this.x1 = this.x2 = this.y1 = this.y2 = null;    // start()時的坐標x1, y1, move()時的坐標x2, y2 (相對於頁面的坐標)
        this.preTapPosition = { x: null, y: null };    // 用來保存start()方法時的手指坐標
    };

    // AlloyFinger原型對象
    AlloyFinger.prototype = {

        start: function (evt) {
            if (!evt.touches) return;    // 如果沒有TouchList對象, 直接return掉 (touches: 位於屏幕上的所有手指的列表)

            this.now = Date.now();    // 開始時間戳
            this.x1 = evt.touches[0].pageX;    // 相對於頁面的 x1, y1 坐標
            this.y1 = evt.touches[0].pageY;
            this.delta = this.now - (this.last || this.now);    // 時間戳差值

            this.touchStart.dispatch(evt);    // 調用HandlerAdmin實例this.touchStart上的dispatch方法(用戶的touchStart回調就在此調用的)

            if (this.preTapPosition.x !== null) {    // 開始前tap的x坐標不為空的話(一次沒點的時候必然是null了)
                this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
            };
            this.preTapPosition.x = this.x1;    // 把相對於頁面的 x1, y1 坐標賦值給 this.preTapPosition
            this.preTapPosition.y = this.y1;
            this.last = this.now;    // 把開始時間戳賦給 this.last
            var preV = this.preV,    // 把開始前的坐標賦給 preV變量
                len = evt.touches.length;    // len: 手指的個數

            if (len > 1) {    // 一根手指以上
                this._cancelLongTap();    // 取消長按定時器
                this._cancelSingleTap();    // 取消SingleTap定時器

                var v = {    // 2個手指坐標的差值
                    x: evt.touches[1].pageX - this.x1, 
                    y: evt.touches[1].pageY - this.y1 
                };
                preV.x = v.x;    // 差值賦值給PreV對象
                preV.y = v.y;

                this.pinchStartLen = getLen(preV);    // start()方法中2點之間的距離
                this.multipointStart.dispatch(evt);    // (用戶的multipointStart回調就在此調用的)
            };

            this.longTapTimeout = setTimeout(function () {
                this.longTap.dispatch(evt);    // (用戶的longTap回調就在此調用的)
            }.bind(this), 750);
        },

        move: function (evt) {
            if (!evt.touches) return;    // 如果沒有TouchList對象, 直接return掉 (touches: 位於屏幕上的所有手指的列表)

            var preV = this.preV,    // 把start方法保存的2根手指坐標的差值xy賦給preV變量
                len = evt.touches.length,    // 手指個數
                currentX = evt.touches[0].pageX,    // 第一根手指的坐標(相對於頁面的 x1, y1 坐標)
                currentY = evt.touches[0].pageY;
                console.log(preV);
            this.isDoubleTap = false;    // 移動過程中不能雙擊了

            if (len > 1) {    // 2根手指以上(處理捏pinch和旋轉rotate手勢)

                var v = {    // 第二根手指和第一根手指坐標的差值
                    x: evt.touches[1].pageX - currentX, 
                    y: evt.touches[1].pageY - currentY 
                };

                if (preV.x !== null) {    // start方法中保存的this.preV的x不為空的話

                    if (this.pinchStartLen > 0) {    // 2點間的距離大於0
                        evt.scale = getLen(v) / this.pinchStartLen;    // move中的2點之間的距離除以start中的2點的距離就是縮放比值
                        this.pinch.dispatch(evt);    // scale掛在到evt對象上 (用戶的pinch回調就在此調用的)
                    };

                    evt.angle = getRotateAngle(v, preV);    // 計算angle角度
                    this.rotate.dispatch(evt);    // (用戶的pinch回調就在此調用的)
                };

                preV.x = v.x;    // 把move中的2根手指中的差值賦值給preV, 當然也改變了this.preV
                preV.y = v.y;

            } else {    // 一根手指(處理拖動pressMove手勢)

                if (this.x2 !== null) {    // 一根手指第一次必然為空,因為初始化賦值為null, 下面將會用x2, y2保存上一次的結果

                    evt.deltaX = currentX - this.x2;    // 拖動過程中或者手指移動過程中的差值(當前坐標與上一次的坐標)
                    evt.deltaY = currentY - this.y2;

                } else {
                    evt.deltaX = 0;    // 第一次嘛, 手指剛移動,哪來的差值啊,所以為0唄
                    evt.deltaY = 0;
                };
                this.pressMove.dispatch(evt);    // deltaXY掛載到evt對象上,拋給用戶(用戶的pressMove回調就在此調用的)
            };

            this.touchMove.dispatch(evt);    // evt對象因if語句而不同,掛載不同的屬性拋出去給用戶 (用戶的touchMove回調就在此調用的)

            this._cancelLongTap();    // 取消長按定時器

            this.x2 = currentX;    // 存一下本次的pageXY坐標, 為了下次做差值
            this.y2 = currentY;

            if (len > 1) {    // 2個手指以上就阻止默認事件
                evt.preventDefault();
            };
        },

        end: function (evt) {
            if (!evt.changedTouches) return;    // 位於該元素上的所有手指的列表, 沒有TouchList也直接return掉

            this._cancelLongTap();    // 取消長按定時器

            var self = this;    // 存個實例
            if (evt.touches.length < 2) {    // 手指數量小於2就觸發 (用戶的多點結束multipointEnd回調函數)
                this.multipointEnd.dispatch(evt);
            };

            this.touchEnd.dispatch(evt);    // 觸發(用戶的touchEnd回調函數)

            //swipe 滑動
            if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.preV.y - this.y2) > 30)) {

                evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);    // 獲取上下左右方向中的一個

                this.swipeTimeout = setTimeout(function () {
                    self.swipe.dispatch(evt);    // 立即觸發,加入異步隊列(用戶的swipe事件的回調函數)
                }, 0);

            } else {   // 以下是tap, singleTap, doubleTap事件派遣

                this.tapTimeout = setTimeout(function () {

                    self.tap.dispatch(evt);    // 觸發(用戶的tap事件的回調函數)
                    // trigger double tap immediately
                    if (self.isDoubleTap) {    // 如果滿足雙擊的話

                        self.doubleTap.dispatch(evt);    // 觸發(用戶的doubleTap事件的回調函數)
                        clearTimeout(self.singleTapTimeout);    // 清除singleTapTimeout定時器

                        self.isDoubleTap = false;    // 雙擊條件重置

                    } else {
                        self.singleTapTimeout = setTimeout(function () {
                            self.singleTap.dispatch(evt);    // 觸發(用戶的singleTap事件的回調函數)
                        }, 250);
                    };

                }, 0);    // 加入異步隊列,主線程完成立馬執行
            };

            this.preV.x = 0;    // this.preV, this.scale, this.pinchStartLen, this.x1 x2 y1 y2恢復初始值
            this.preV.y = 0;
            this.scale = 1;
            this.pinchStartLen = null;
            this.x1 = this.x2 = this.y1 = this.y2 = null;
        },

        cancel: function (evt) {
            //清除定時器
            clearTimeout(this.singleTapTimeout);
            clearTimeout(this.tapTimeout);
            clearTimeout(this.longTapTimeout);
            clearTimeout(this.swipeTimeout);
            // 執行用戶的touchCancel回調函數,沒有就執行一次noop空函數
            this.touchCancel.dispatch(evt);
        },

        _cancelLongTap: function () {    // 取消長按定時器
            clearTimeout(this.longTapTimeout);
        },

        _cancelSingleTap: function () {    // 取消延時SingleTap定時器
            clearTimeout(this.singleTapTimeout);
        },

        // 2點間x與y之間的絕對值的差值作比較,x大的話即為左右滑動,y大即為上下滑動,x的差值大於0即為左滑動,小於0即為右滑動
        _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');
        },

        // 給dom添加14種事件中的一種
        on: function(evt, handler) {    
            if(this[evt]) {    // 看看有沒有相應的事件名
                this[evt].add(handler);    // HandlerAdmin實例的add方法
            };
        },

        // 移除手勢事件對應函數
        off: function(evt, handler) {
            if(this[evt]) {
                this[evt].del(handler);    // 從數組中刪除handler方法
            };
        },

        destroy: function() {

            // 關閉所有定時器
            if(this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
            if(this.tapTimeout) clearTimeout(this.tapTimeout);
            if(this.longTapTimeout) clearTimeout(this.longTapTimeout);
            if(this.swipeTimeout) clearTimeout(this.swipeTimeout);

            // 取消dom上touchstart, touchmove, touchend, touchcancel事件
            this.element.removeEventListener("touchstart", this.start);
            this.element.removeEventListener("touchmove", this.move);
            this.element.removeEventListener("touchend", this.end);
            this.element.removeEventListener("touchcancel", this.cancel);

            // 把14個HandlerAdmin實例的this.handlers置為空數組
            this.rotate.del();
            this.touchStart.del();
            this.multipointStart.del();
            this.multipointEnd.del();
            this.pinch.del();
            this.swipe.del();
            this.tap.del();
            this.doubleTap.del();
            this.longTap.del();
            this.singleTap.del();
            this.pressMove.del();
            this.touchMove.del();
            this.touchEnd.del();
            this.touchCancel.del();

            // 實例成員的變量全部置為null
            this.preV = this.pinchStartLen = this.scale = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = null;

            return null;
        }
    };

    // 拋出去
    if (typeof module !== 'undefined' && typeof exports === 'object') {
        module.exports = AlloyFinger;
    } else {
        window.AlloyFinger = AlloyFinger;
    };
})();

 

 使用姿勢：

 

            var af = new AlloyFinger(testDiv, {
                touchStart: function () {
                    html = "";
                    html += "start0<br/>";
                    result.innerHTML = html;
                 
                },
                touchEnd: function () {
                    html += "end<br/>";
                    result.innerHTML = html;
                 
                },
                tap: function () {
                    html += "tap<br/>";
                    result.innerHTML = html;
                },
                singleTap: function() {
                    html += "singleTap<br/>";
                    result.innerHTML = html;
                },
                longTap: function() {
                    html += "longTap<br/>";
                    result.innerHTML = html;
                },
                rotate: function (evt) {
                    html += "rotate [" + evt.angle + "]<br/>";
                    result.innerHTML = html;
                },
                pinch: function (evt) {
                    html += "pinch [" + evt.scale + "]<br/>";
                    result.innerHTML = html;
                },
                pressMove: function (evt) {
                    html += "pressMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
                    result.innerHTML = html;
                    evt.preventDefault();
                },
                touchMove: function (evt) {
                    html += "touchMove [" + evt.deltaX.toFixed(4) + "|" + evt.deltaY.toFixed(4) + "]<br/>";
                    result.innerHTML = html;
                    evt.preventDefault();
                },
                swipe: function (evt) {
                    html += "swipe [" + evt.direction+"]<br/>";
                    result.innerHTML = html;
                }
            });
 
            af.on('touchStart', touchStart1);
            af.on('touchStart', touchStart2);    // 多次添加只會把方法添加到HandlerAdmin實例的handlers數組中,會依次遍歷執行添加的函數

            function touchStart1() {
                html += "start1<br/>";
                result.innerHTML = html;
            };

            function touchStart2() {
                html += "start2<br/>";
                result.innerHTML = html;
            };

            af.off('touchStart', touchStart2);

            af.on('longTap', function(evt) {
                evt.preventDefault();
                af.destroy();
                html += "已銷毀所有事件!<br/>";
                result.innerHTML = html;
            });

 

 

下面會講述幾個很常用的手勢原理：

 

tap點按:

    移動端click有300毫秒延時，tap的本質其實就是touchend。

但是要(244行)判斷touchstart的手的坐標和touchend時候手的坐標x、y方向偏移要小於30。小於30才會去觸發tap。

 

longTap長按:

    touchstart開啟一個750毫秒的settimeout，如果750ms內有touchmove或者touchend都會清除掉該定時器。

超過750ms沒有touchmove或者touchend就會觸發longTap

swipe划動:

    當touchstart的手的坐標和touchend時候手的坐標x、y方向偏移要大於30，判斷swipe，小於30會判斷tap。

那么用戶到底是從上到下，還是從下到上，或者從左到右、從右到左滑動呢？

2點間x與y之間的絕對值的差值作比較,x大的話即為左右滑動,y大即為上下滑動,x的差值大於0即為左滑動,小於0即為右滑動，

y的差值大於0為上，小於0為下.

 

pinch捏:

    這個就是start()時2個手指間的距離和move()時2個手指的距離的比值就是scale。這個scale會掛載在event上拋給用戶。

 

rotate旋轉:

    這個還真沒怎么弄明白，先看一下原作者的原理解釋：

    

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

cross本質其實是面積，可以看下面的推導：

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

反正我沒怎么理解最后一張圖了。他的推導公式，我是這么化簡的，如下：

我的c向量使用的是(y2, -x2),其實還有一個是(-y2, x2)。如果使用(-y2, x2)這個求出來的面試公式就和上面的公式就差了一個負號了。在getRotateAngle函數中，判斷條件也要相應的改成

if (cross(v1, v2) < 0) {
    angle *= -1;
};

這樣才行了，好吧暫時先這么理解rotate旋轉的公式吧。

 

 

ps: 很不錯的一個手機端的手勢庫，代碼簡潔,功能強悍。

github地址： https://github.com/AlloyTeam/AlloyFinger