使用Leap Motion检测滑动手势方向
Detecting swipe gesture direction with Leap Motion
我正在尝试使用javascript API通过Leap Motion简单地获取滑动手势的方向。我的代码是:
$(document).ready(function() {
controller = new Leap.Controller("ws://localhost:6437/");
listener = new Leap.Listener();
listener.onFrame = function(controller) {
var frame = controller.frame();
var hands = frame.hands();
var pointables = frame.pointables();
var gestures = frame.gestures();
$("#rotationAxis").text(pointables.length);
$("#gestureDetected").text(gestures[0]);
}
controller.addListener(listener);
controller.enableGesture("swipe", true);
listener.onConnect = function(controller) {
// calibrate = new Leap.Calibrate(controller);
// calibrate.onComplete = function(screen){
// }
}
});
我可以从数组中获取当前手势,但无法获取类型或方向。有什么想法吗?
谢谢。
如果你关心向右、向左、向上或向下,你可以比较滑动方向向量的水平和垂直坐标的绝对值,看看滑动是更垂直还是更水平(然后将相关坐标比较为零,看看滑动是否向右或向左,或向上或向下):
// Setup Leap loop with frame callback function
var controllerOptions = {enableGestures: true};
Leap.loop(controllerOptions, function(frame) {
if (frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
if (gesture.type == "swipe") {
//Classify swipe as either horizontal or vertical
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
//Classify as right-left or up-down
if(isHorizontal){
if(gesture.direction[0] > 0){
swipeDirection = "right";
} else {
swipeDirection = "left";
}
} else { //vertical
if(gesture.direction[1] > 0){
swipeDirection = "up";
} else {
swipeDirection = "down";
}
}
}
}
}
})
通过稍微复杂一点的比较,你也可以将滑动分为向前或向后。
带enableGestures:true和var手势=frame.signatures[i];
// detect swipe
if (gesture.direction[0] > gesture.direction[2]) {
console.log('swipe left')
}
这是我自己做的,tbh我不能记住它是左还是右,但这不是一个很长的调整的过程
经过快速分析,我找到了您要查找的信息:
var gestureType = frame.gestures[0].type;
if (gestureType === "swipe")
{
if (frame.gestures[0].direction[0] > 0)
console.log(">>> swipe >>>");
else
console.log("<<< swipe <<<");
}
框架对象只有在有手势时才有手势。一个帧可以包含0只手、0个手指或0个手势。您必须检查是否存在手势,然后检索所需的信息。
var frame = controller.frame();
if (frame.gestures.length > 0)
{
for (var i = 0; i < frame.gestures.length; i++)
{
var gesture = frame.gestures[i];
var type = gesture.type;
var direction = gesture.direction;
}
}
这里有一个非常适合我的代码示例:
var controller = new Leap.Controller({enableGestures: true});
controller.on('gesture', function (gesture){
console.log(gesture);
if(gesture.type === 'swipe'){
handleSwipe(gesture);
}
});
function handleSwipe (swipe){
var startFrameID;
if(swipe.state === 'stop'){
if (swipe.direction[0] > 0){
//this means that the swipe is to the right direction
moveRight();
}else{
//this means that the swipe is to the left direction
moveLeft();
}
}
}
controller.connect();
相关文章:
- ng映射方向备选方案
- RubyonRails——构建交互式接口应该朝哪个方向发展
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 我怎样才能知道用户滑动的方向
- 使用谷歌地图API和phonegap显示当前位置+方向
- 用真或假初始化变量是否在 Javascript 中建立了内容的方向
- 带有自定义标记的谷歌地图方向APIv3
- 在角度方向的元素之前插入
- 更改D3方向力图中箭头标记的方向
- fullpage.js在滚动时更改滚动方向
- 基于谷歌地图API方向服务构建的替代路线
- 如何将字符串地址传递到传单路由机,以根据字符串地址获得方向
- 在画布中以相反方向移动矩形
- .show()不会改变效果或方向
- JavaScript位置/方向计算
- ng按角度方向重复
- 谷歌地图API-从方向的原点检索定位
- 当鼠标停止或改变方向时获取鼠标坐标
- 使用Leap Motion检测滑动手势方向