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

Creating custom touch gestures using javascript

本文关键字:触摸 自定义 javascript 创建 使用      更新时间:2023-09-26

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

目前我正试图通过使用锤子.js自定义手势来实现这一点到目前为止,我可以检测到用户绘制的东西代码看起来像

  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版本的一元单笔画识别器。它可以扩展——你可以在他们的网站上添加你自己的手势——而且JS很容易理解。https://depts.washington.edu/aimgroup/proj/dollar/

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