Question

我正在尝试开发一个菜单，我可以用手将鼠标悬停在图标上，然后使用向前推动单击它们。为了达到这个目的，我在z轴上使用了我的手速度，加上触摸区域和触摸距离，正如你在这段代码中看到的那样。

var controller = new Leap.Controller({ enableGestures: flag });

controller.on('frame', function(frame) {
  if (frame.pointables.length > 0) {
    var pointable = frame.pointables[0];

    // Params used to navigation and touching on menu interfaces
    var touchZone = pointable.touchZone, // None, hovering, or touching
        touchDistance = pointable.touchDistance, // [+1, 0, -1]
        zNotFinger= pointable.tipVelocity[0], // For the case pointable isnn't a hand
        zIndex = pointable.tipVelocity[1], // Index finger velocity on z-axis
        zMiddle = pointable.tipVelocity[2], // Middle finger velocity on z-axis
        x = pointable.tipPosition[0],
        y = pointable.tipPosition[1],

        // Getting highest tipVelocity
        tempVelocity = zIndex >= zNotFinger ? zIndex : zNotFinger,
        velocity = zMiddle > tempVelocity ? zMiddle : tempVelocity;

    // The circle is defined as a gesture to go back to homepage
    if (frame.hands.length === 1 && origin !== 'home' && frame.gestures.length > 0) {
      var gesture = frame.gestures[0],
          hand = frame.hands[0],
          oneExtended = hand.fingers[1].extended && !hand.fingers[3].extended;

      if (gesture.type === 'circle' && oneExtended && gesture.pointableIds.length >= 1) {
        window.open('../html/home.html','_self');
      }
    }

    // Sending data...
    if (origin === 'home') {
      homeHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'bio') {
      bioHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'nature') {
      natureHover(x, y, touchZone, touchDistance, velocity);
    }

  }
});
controller.connect();

}

然后......

if (velocity > 150) {
if ($(".hovered").attr("href") && touchZone === 'touching' && touchDistance <= -0.4) {
  window.location.replace($(".hovered").attr("href"));
}

}

主要问题是在将鼠标悬停在图标上时意外“点击”链接或设置要求太高而难以点击。

有人能帮我一把吗？也许我应该使用新的方法，甚至是完全不同的方法。

OBS：我已经尝试过screenTap和keyTap。

非常感谢！

Answer 1

太难或太容易点击是一个常见问题。内置的水龙头也有同样的问题。

你可以探索stabilTipPosition而不是速度（或者除了速度之外）并让用户在悬停后向前移动预定量。使用stabilipip位置应该使用户更容易向前推进而不会意外地离开目标。仅当运动主要沿z轴点击时，应大大减少意外点击，包括用户移动到目标菜单项时发生的点击以及用户只是移动他们的手时发生的点击（与菜单无关）。

菜单的其他常用方法包括：

悬停以激活 - 光标显示倒计时指示器，用户只需将光标停留在菜单项或按钮上一段必要的时间。它有效，但有点不优雅，当用户已经下定决心要做什么时，会让用户等待每个菜单选项。这是最常用的方法之一，可以在Leap Motion应用商店中的许多应用中看到。
拉出以激活 - 用户将鼠标悬停在菜单项上并将其手指移动到＆＃34;拖动＆＃34;项目到一边激活。您可以在Sculpting应用程序中看到此类菜单的示例。
物理 - 菜单和按钮由＆＃34;触摸＆＃34;激活3D空间中的（碰撞）。这种技术在VR风格的应用程序中运行良好，因为用户具有更好的深度感。它也适用于非VR 3D应用程序（经过精心设计）。你可以做一个混合的2D-3D网络应用程序，其内容基本上是2D，但手是3D并显示在内容之上。

这里有一些菜单设计指南（旧版）：https://developer.leapmotion.com/documentation/javascript/practices/Leap_Menu_Design_Guidelines.html

有几个例子（不是所有菜单）：https://developer.leapmotion.com/gallery/category/javascript

用于触摸跳跃动作的手势更好的方法

1 个答案: