Перемещение DIV с помощью Leapmotion

Я пытаюсь использовать API JS jumpmotion для перемещения div на веб-сайте.

Я нашел руководство и немного изменил его, потому что он не работал.

Это то, что я придумал до сих пор, но translation.x приближается undefined в журнале консоли. Кто-нибудь еще возился с JS API скачка?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf8">
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="leap.js"></script>
  </head>
  <body>
<script>
var controller = new Leap.Controller({enableGestures: true});
var firstValidFrame = null;

      controller.loop(function(frame) {
        if (!firstValidFrame) firstValidFrame = frame;
        var translation = frame.translation(firstValidFrame);
        console.log("X:" + translation.x);
        $('#box').css({marginLeft: translation.x});
      });
</script>

  <div id="box" style="width: 200px; border: 1px solid #666666; padding: 10px 10px 70px 10px; display: inline-block"></div>
  </body>
</html>

javascript leap-motion
person Jako    schedule 25.07.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Две вещи: 1. Библиотека Leap.js вернула класс Vector, который был реализован в какой-то момент. Итак, векторы — это (опять же) массивы, а не объекты. Это делает его translation[0] вместо translation.x. 2. Вы должны проверить достоверность фрейма. Объекты в Leap Motion API могут быть недействительными, что означает, что они являются полностью сформированными объектами, но имеют свойства 0/identity. Это помогает избежать большого количества неопределенных объектов, но имеет несколько подводных камней. Попробуйте проверить !firstValidFrame && frame.valid перед сохранением кадра.

var controller = new Leap.Controller({enableGestures: true});
var firstValidFrame = null;

      controller.loop(function(frame) {
        if (!firstValidFrame && frame.valid) firstValidFrame = frame;
        var translation = frame.translation(firstValidFrame);
        console.log("X:" + translation[0]);
        $('#box').css({marginLeft: translation.x});
      });
person Charles Ward    schedule 25.07.2013