1

Web サイト上で div を移動するために、leapmotion JS API を使用しようとしています。

チュートリアルを見つけて、動作していないようだったので少し修正しました。

これは私がこれまでに思いついたものですが、コンソールログにtranslation.x表示されています。undefined他の誰かが、leap 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>
4

1 に答える 1

5

2 つのこと: 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});
      });
于 2013-07-25T23:56:29.220 に答える