使用跳跃动作检测滑动手势答案

【问题标题】：Detect swipe gesture with leap motion使用跳跃动作检测滑动手势
【发布时间】：2013-10-22 09:42:06
【问题描述】：

我知道如何检测手势左右

this

我想知道如何检测向上、向下和圆圈的手势。

我的英语很差。我觉得你看不懂，请帮帮我。

【问题讨论】：

标签： javascript jquery gesture leap-motion

【解决方案1】：

对于滑动方向，您可以比较 Gesture 对象的方向属性的 x 和 y 坐标。在 Leap Motion JavaScript API 中，向量由 3 元素数组表示。所以：

gesture.direction[0] is the x coordinate (left to right)
gesture.direction[1] is the y coordinate ( up, down)
gesture.direction[2] is the z coordinate (front to back)

您引用的示例仅查看 x 坐标的符号——因此所有滑动都被分类为向右或向左。要将滑动分类为向上或向下，您必须比较 x 和 y 坐标的大小以确定滑动是更水平还是更垂直，然后比较坐标的符号以确定水平滑动是左还是向上或向下向右或垂直滑动。

圆形手势被报告为不同类型的手势，因此您可以查看gesture.type属性。

这里有一些 JavaScript 来说明这一点（改编自 Leap Motion SDK 中包含的 Sample.html 文件）：

// Store frame for motion functions
var previousFrame = null;

// Setup Leap loop with frame callback function
var controllerOptions = {enableGestures: true};

Leap.loop(controllerOptions, function(frame) {

  // Display Gesture object data
  var gestureOutput = document.getElementById("gestureData");
  var gestureString = "";
  if (frame.gestures.length > 0) {
    for (var i = 0; i < frame.gestures.length; i++) {
      var gesture = frame.gestures[i];

      switch (gesture.type) {
        case "circle":
              gestureString += "<br>ID: " + gesture.id + "<br>type: " + gesture.type + ", "
                        + "<br>center: " + vectorToString(gesture.center) + " mm, "
                        + "<br>normal: " + vectorToString(gesture.normal, 2) + ", "
                        + "<br>radius: " + gesture.radius.toFixed(1) + " mm, "
                        + "<br>progress: " + gesture.progress.toFixed(2) + " rotations"
                        + "<br>";
            break;
        case "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";
              }                  
          }
          gestureString += "<br>ID: " + gesture.id + "<br>type: " + gesture.type + ", "
                        + "<br>direction " + swipeDirection
                        + "<br>gesture.direction vector: " + vectorToString(gesture.direction, 2) + ", "
                        + "<br>";
          break;
       }
     }
  }
  gestureOutput.innerHTML = gestureString + gestureOutput.innerHTML;

})

function vectorToString(vector, digits) {
  if (typeof digits === "undefined") {
    digits = 1;
  }
  return "(" + vector[0].toFixed(digits) + ", "
             + vector[1].toFixed(digits) + ", "
             + vector[2].toFixed(digits) + ")";
}

要使用它，请将其放在将要执行的位置，并在 HTML 文档正文中包含一个 id 为 gestureData 的元素：

<div id="gestureData"></div>

【讨论】：

另外，在您的应用程序中混合使用两种不同的手势类型时要小心。当用户尝试执行另一项时，很容易发生其中一项。
你真的给了我很大的帮助。非常感谢。

【解决方案2】：

我的一个朋友正是为此目的制作了一个图书馆。它会检查 6 个不同方向的滑动，并可以判断圆形手势的方向。

https://github.com/L1fescape/curtsy

他的代码也应该很容易阅读，所以如果你想看看他是怎么做的，你可以。

【讨论】：