jquery - Creating custom touch gestures using javascript -
i need create custom gestures different shapes square, circle etc. in other words need detect when user draws square or circle on touch device using javascript.
currently i'm trying achieve using hammer.js custom gestures far can detect whenever user draws , code looks like
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);
however not able make accurate gestures square using this. (major problem being slight change in axis trigger event in direction)
is there other plugins that'll helpful achieving this? great if can point me in right direction..
there pure javascript version of one-dollar single-stroke recognizer. open expansion - u can add own gestures on website - , js pretty easy understand. https://depts.washington.edu/aimgroup/proj/dollar/
another option jquery-based fancy gestures recognizer: http://anantgarg.com/2009/05/21/jquery-fancy-gestures/
Comments
Post a Comment