手势识别与事件库 Touch.js若干问题及解决方法

Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.
Touch.js的代码已托管于github并开源,希望能帮助国内更多的开发者学习和开发出优秀的App产品.
Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.

极速CDN

<script src="http://code.baidu.com/touch-0.2.14.min.js"></script>

Examples

//swipe example 
touch.on('.target', 'swipeleft swiperight', function(ev){
   
    console.log("you have done", ev.type);
});

向左及向右 滑动更灵活的解决方案

参考牛人博客的代码,据说相当好用。

  1(function(global,doc,factoryFn){
  2     //初始化toucher主方法
  3     var factory = factoryFn(global,doc);
  4     
  5     //提供window.util.toucher()接口
  6     global.util = global.util || {};
  7     global.util.toucher = global.util.toucher || factory;
  8     
  9     //提供CommonJS规范的接口
 10     global.define && define(function(require,exports,module){
 11         //对外接口
 12         return factory;
 13     });
 14 })(this,document,function(window,document){
 15     /**
 16      * 判断是否拥有某个class
 17      */
 18     function hasClass(dom,classSingle){
 19         return dom.className.match(new RegExp('(\\s|^)' + classSingle +'(\\s|$)'));
 20     }
 21 
 22     /**
 23      * @method 向句柄所在对象增加事件监听
 24      * @description 支持链式调用
 25      * 
 26      * @param string 事件名
 27      * @param [string] 事件委托至某个class(可选)
 28      * @param function 符合条件的事件被触发时需要执行的回调函数 
 29      * 
 30      */
 31     function ON(eventStr,a,b){
 32         this._events = this._events || {};
 33         var className,fn;
 34         if(typeof(a) == 'string'){
 35             className = a.replace(/^\./,'');
 36             fn = b;
 37         }else{
 38             className = null;
 39             fn = a;
 40         }
 41         //检测callback是否合法,事件名参数是否存在·
 42         if(typeof(fn) == 'function' && eventStr && eventStr.length){
 43             var eventNames = eventStr.split(/\s+/);
 44             for(var i=0,total=eventNames.length;i<total;i++){
 45             
 46                 var eventName = eventNames[i];
 47                 //事件堆无该事件,创建一个事件堆
 48                 if(!this._events[eventName]){
 49                     this._events[eventName] = [];
 50                 }
 51                 this._events[eventName].push({
 52                     'className' : className,
 53                     'fn' : fn
 54                 });
 55             }
 56         }
 57 
 58         //提供链式调用的支持
 59         return this;
 60     }
 61 
 62     /**
 63      * @method 事件触发器
 64      * @description 根据事件最原始被触发的target,逐级向上追溯事件绑定
 65      * 
 66      * @param string 事件名
 67      * @param object 原生事件对象
 68      */
 69     function EMIT(eventName,e){
 70         this._events = this._events || {};
 71         //事件堆无该事件,结束触发
 72         if(!this._events[eventName]){
 73             return
 74         }
 75     
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
代码一个多月没看,昨晚终于把错误找着了。这个演示程序能识别上下左右、西南、东南、正方形等,识别率很高。在线演示地址是ai-demo.appspot.com。 这个算法原理很好理解,好比老师让学生背诵课文,老师要达到的目的是“学生背过课文”,相对应的,软件要达到的目的是“我们把鼠标向左移动”显示“左”。老师第一次对学生说,你把课文背一遍,学生磕磕绊绊,老师说不通过接着告诉同学背课文的技巧等等,然后学生回到作为继续背课文。下节课,老师又对这个学生说,你把课文背一遍,学生背还是不很流畅,老师又说不通过,然后学生再回去背……,直到最后一次背课文,老师说OK,这就算达到目的了。 同样,软件识别鼠标手势也是一样,“鼠标向左移动手势”输入到算法中,程序检查算法计算结果,如算法输出果结果距离“左”差很远,那么不通过,程序就告诉算法,你要继续改进。如此循环,直到算法输出结果跟输入手势非常接近了,程序说通过了,那么就达到目的了,也就意味着这个算法就可以识别出“左”了!同样,也可以把“右”识别出来。 这个算法在神经网络中叫“有监督的训练方法”也叫“反向传播”。目前我对这个算法就这么些理解了。里边还有很多东西有待研究。但是,能把书中的例子改成 JavaScript版本,我就非常高兴了!有兴趣的也可以看看这本《游戏编程中的人工智能技术》,我自古讨厌数学,而且讨厌公式,而人工只能就需要数学,但这本书讲的确实非常好! 这个程序里边并没有训练方法,我只是把书中训练好的数据提取出来,直接输入到JavaScript写的神经网络里,这样一打开程序就能直接识别,否则还得训练,就现在javascript的执行效率,这不得到猴年马月去了! 程序用了一个js游戏,名字叫jsgamesoup,里边的画图是HTML5语法的,在IE6下支持不太好,在IE8下运行也很顺畅。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值