Question

我需要为不同形状（如方形，圆形等）创建自定义手势。换句话说，我需要检测用户何时使用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);

然而，我无法使用此方法制作像方形一样的准确手势。（主要问题是任何轴上的微小变化都会触发该方向的事件）

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

Answer 1

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

另一种选择是基于jquery的花式手势识别器：http://anantgarg.com/2009/05/21/jquery-fancy-gestures/

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

1 个答案: