首页 文章

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

提问于
浏览
0

我知道如何从左右检测手势

this

我想知道如何检测手势向上,向下和圆圈 .

我的英文程度不高 . 我不认为你能理解,但帮助我PLZ .

2 回答

  • 2

    对于滑动方向,您可以比较Gesture对象的direction属性的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>
    
  • 1

    我的一个朋友为此目的 Build 了一个图书馆 . 它会检查6个不同方向的滑动,并可以确定圆形手势的方向 .

    https://github.com/L1fescape/curtsy

    他的代码也应该易于阅读,所以如果你想看看他是如何做到的 .

相关问题