在HTML5的canvas元素中使用Zigfu(kinect)
Using Zigfu (kinect) in canvas element of HTML5
我在Zigfu的网站上完成了制作用户雷达的初始教程。我无法让这个雷达在画布元素中工作。
我想在画布中使用绘图方法,所以我不希望它在容器中。
这是我到目前为止直接从教程中获取的代码。非常感谢您的阅读!
function loaded() {
var radardiv = document.getElementById('container');
var radar = {
onuserfound: function (user) {
var userdiv = document.createElement('div');
userdiv.className = 'user';
user.radarelement = userdiv;
radardiv.appendChild(user.radarelement);
},
onuserlost: function (user) {
radardiv.removeChild(user.radarelement);
},
ondataupdate: function (zigdata){
for (var userid in zigdata.users){
var user = zigdata.users[userid];
var pos = user.position;
//console.log(pos);
var el = user.radarelement;
var parentElement = el.parentNode;
var zrange = 2000;
var xrange = 700;
var pixelwidth = parentElement.offsetWidth;
var pixelheight = parentElement.offsetHeight;
var heightscale = pixelheight / zrange;
var widthscale = pixelwidth / xrange;
el.style.left = (((pos[0] / xrange) + 0.5) * pixelwidth - (el.offsetWidth / 2)) + "px";
el.style.top = ((pos[2] / zrange) * pixelheight - (el.offsetHeight / 2)) - 150 + "px";
}
}
};
zig.addListener(radar);
}
document.addEventListener('DOMContentLoaded', loaded, false);
<body>
<div id = 'container'></div>
</body>
</html>
<style>
div#container {
width: 800px;
height: 600px;
border: 1px solid black;
overflow: hidden;
}
div.user {
position: relative;
width: 10px;
height: 10px;
background-color: red;
}
似乎你在javascript周围缺少标签,以及一些用于用户雷达的css。另外 - 您的"容器"div 缺少>
尝试从 http://zigfu.com/en/zdk/tutorials/底部复制代码,或者 - 查看 http://zigfu.com/en/zdk/recipes/#omercy16 以获取更清晰的用户雷达实现。
本教程中使用的雷达利用了 DOMdiv 的放置和定位。
不幸的是,这不能在画布元素中使用。
有一些方法可以覆盖画布和其他解决方法。请参阅:在<画布中放置>
>
画布中放置>
您也可以直接从插件中获取数据并自己绘制到画布上。下面是一个使用三.js和 zigfu 将骨架绘制到画布上的演示:http://blog.kinect.tonkworks.com/post/30569123887/kinect-online-app-javascript-dev-tutorial-1
相关文章:
- 在OpenNI中将Zigfu关节位置从真实世界转换为类似投影的位置
- Kinect V2 javascript joints 对象为空
- Kinect v2 SDK 和基于 JavaScript 的滑动检测
- 在HTML5的canvas元素中使用Zigfu(kinect)
- 使用 Microsoft Kinect 控制 Web 浏览器 JS 组件
- 如何通过 Kinect v2 控制 HTML5 网站
- 从ZigJS访问Kinect RGB图像数据
- Kinect in HTML5
- Kinect SDK的HTML 5 Javascript与人识别4人
- Kinect (One)在浏览器中,结束了NPAPI
- Kinect 中的可拖动图像事件
- 如何为kinect .js制作一个插件?