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