使用 javascript 创建自定义触摸手势答案

【问题标题】：Creating custom touch gestures using javascript使用 javascript 创建自定义触摸手势
【发布时间】：2014-03-10 05:42:14
【问题描述】：

我需要为正方形、圆形等不同形状创建自定义手势。换句话说，我需要检测用户何时使用 javascript 在其触摸设备上绘制正方形或圆形。

目前我正在尝试通过使用hammer.js custom gestures 来实现这一目标到目前为止，我可以检测到用户何时绘制某些东西并且代码看起来像

  var obj= { 
name: 'draw',
index: 7,
defaults: {
  max_draw_dur:200,
  min_delta_x:100,
  min_delta_y:200
},
centerX:undefined,
centerY:undefined,
changingDir:false,
changeInDir:0,
startangle:0,
currDir:undefined,
currDX:0,
currDY:0,
handler: function(ev, inst) {
if(Hammer.detection.previous!=undefined) {
     var prev = Hammer.detection.previous;
     var curr = Hammer.detection.current;
     switch (ev.eventType) {
        case Hammer.EVENT_START:
           this.changeInDir=0;
           this.startangle=0;
           this.centerX=curr.startEvent.center.pageX;
           this.centerY=curr.startEvent.center.pageY;
           Hammer.detection.current.name = 'draw'
           inst.trigger(this.name, ev);
           break;
        case Hammer.EVENT_MOVE:

              if (Math.abs(ev.angle-this.startangle)>=45&&Math.abs(ev.angle-this.startangle)<=180) {

                 Hammer.detection.current.name = 'draw'
                 this.startangle=ev.angle;
                 this.changeInDir++;
              }
           break;
        case Hammer.EVENT_END:
        if (curr.name==this.name && this.changeInDir>=2 && this.changeInDir<=7) {
           this.changeInDir=0;
           this.startangle=0;
           inst.trigger(this.name+'Circle', ev);
           // trigger gesture event
        }
        else if (this.changeInDir>=2 && this.changeInDir<=4) {
           this.changeInDir=0;
           this.startangle=0;
           inst.trigger(this.name+'Square', ev);
           // trigger gesture event
        }
        break;
     }      
    } 
  }
}
Hammer.detection.register(obj);

但是我无法使用它做出像正方形这样的准确手势。（主要问题是任何轴的微小变化都会触发该方向的事件）

还有其他插件可以帮助实现这一目标吗？如果有人能指出我正确的方向，那就太好了..

【问题讨论】：

标签： javascript jquery touch gesture-recognition hammer.js

【解决方案1】：

有一个纯 javascript 版本的一美元单笔识别器。它可以扩展——你可以在他们的网站上添加你自己的手势——而且 JS 很容易理解。 https://depts.washington.edu/aimgroup/proj/dollar/

另一个选项是基于 jquery 的精美手势识别器：http://anantgarg.com/2009/05/21/jquery-fancy-gestures/

【讨论】：