我正在尝试使用leapmotion JS API在网站上移动div。
我找到了tutorial并对其进行了一些修改,因为它似乎没有用。
这是我到目前为止所提出的,但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>
答案 0 :(得分:5)
两件事:
1. Leap.js库还原了一次实现的Vector类。因此,矢量(再次)是数组而不是对象。这使得translation[0]
代替translation.x
。
2.您必须检查帧有效性。 Leap Motion API中的对象可能无效,这意味着它们是完全形成的对象,但具有0 /标识属性。这有助于避免大量未定义的对象,但确实有一些问题。在存储框架之前,请尝试检查!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});
});