使用javascript创建自定义触摸手势
Creating custom touch gestures using javascript
我需要为不同的形状创建自定义手势,如正方形,圆形等。换句话说,我需要检测用户何时使用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/
相关文章:
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery自定义验证比较多个输入的序列
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 在wordpress一定时间后更改自定义字段
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 自定义函数中的光标位置
- 用于检查数组中是否存在元素的javascript自定义方法
- cocos2d-js:C++中的自定义触摸处理程序
- 煎茶触摸 2 - 从商店自定义模型种群
- 自定义计算函数煎茶触摸
- 自定义容器煎茶触摸上的事件处理
- 触摸怎么会被拦截,某些元素会执行一些自定义动作,而其他元素会发生通常的行为
- Sencha触摸azure移动服务自定义登录如何设置用户
- js:有没有一种方法可以在不使用锤子管理器的情况下添加自定义触摸识别器?
- 自定义可拖拽插件不适用于触摸事件
- 在Javascript中自定义多点触摸手势
- 自定义滚动条在触摸设备上不起作用
- 猫头鹰旋转木马2 -触摸自定义动画
- 使用javascript创建自定义触摸手势