是否有可能使用Hammer.js识别对角线刷卡?
我通过自己的文件了,但没有发现任何东西说关于对角线滑动或平移等..
有很多关于姿势信息的一个对象被传递给每Hammer.js事件回调(如所描述的here in the API docs)。
该eventObject.angle
属性是你在找什么。其值介于-180和180(0表示RIGHT,-90装置UP,90意味着DOWN,180指LEFT)。
因此,这里是你如何识别对角线挥笔:
var hammertime = new Hammer(domElement);
hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
hammertime.on("swipe", function(eventObject) {
if(eventObject.angle < -90) {
//UP-LEFT SWIPE...
} else if(eventObject.angle < 0) {
//UP-RIGHT SWIPE...
} else if(eventObject.angle < 90) {
//DOWN-RIGHT SWIPE...
} else {
//DOWN-LEFT SWIPE...
}
});
对于那些谁想要一个8路刷卡(上,下,左,右,上,左,下,左,上,右,下 - 右)使用HammerJS选项。这是值得探讨的范围值的使用角度。左边的选项是唯一聪明的一个......因为它是一个或语句,而不是一个与声明。
var hammertime = new Hammer(domElement);
hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
hammertime.on("swipe", function(e) {
let jResult = '';
switch(true) {
// LEFT
case (e.angle < -157.5 || e.angle > 157.5):
jResult = 'left';
break;
// RIGHT
case (e.angle > -22.5 && e.angle < 22.5):
jResult = 'right';
break;
// UP
case (e.angle < -67.5 && e.angle > -112.5):
jResult = 'up';
break;
// Down
case (e.angle > 67.5 && e.angle < 112.5):
jResult = 'down';
break;
// LEFT-Up
case (e.angle < -112.5 && e.angle > -157.5):
jResult = 'left-Up';
break;
// LEFT-Down
case (e.angle > 112.5 && e.angle < 157.5):
jResult = 'left-Down';
break;
// RIGHT-Up
case (-22.5 > e.angle && e.angle > -67.5):
jResult = 'right-Up';
break;
// RIGHT-Down
case (e.angle > 22.5 && e.angle < 67.5):
jResult = 'right-Down';
break;
default:
// code block
jResult = 'unknown'; // UNKNOWN - what happened?
}
console.log('--00--> Swipe: ' + e.direction + ' -- Dir is: ' + jResult);
this.lastSwipe = jResult;
});
输出显示安慰......你的里程可能会有所不同。