在HTML5的canvas元素中使用Zigfu（kinect）

Question

I went through the initial tutorial for making a user radar on Zigfu's website. 我在Zigfu网站上完成了如何制作用户雷达的初始教程。 I am having trouble getting this radar to work in the canvas element. 我无法让此雷达在canvas元素中正常工作。

I want to using the drawing methods in canvas, so I don't want it in the container. 我想在画布上使用绘图方法，所以我不想在容器中使用它。

Here is my code so far taken directly from the tutorial. 到目前为止，这是我的代码，直接摘自本教程。 Thanks so much for reading! 非常感谢您的阅读！

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;
  }

Answer 1

It seems you are missing 看来你失踪了 tags around the javascript, as well as some css for the users radar. javascript周围的标签，以及一些雷达用户的CSS。 Also - your 'container' div is missing a > 另外-您的“容器” div缺少>

Try copying the code from the bottom of http://zigfu.com/en/zdk/tutorials/ , or - check out http://zigfu.com/en/zdk/recipes/#omercy16 for a cleaner implementation of the users radar. 尝试从http://zigfu.com/zh-cn/zdk/tutorials/的底部复制代码，或者-查看http://zigfu.com/zh-cn/zdk/recipes/#omercy16 ，以实现更干净的用户实施雷达。

Answer 2

The radar used in the tutorial makes use of DOM div placement and positioning. 本教程中使用的雷达利用DOM div的放置和定位。
Unfortunately this can't be used inside the canvas element. 不幸的是，这不能在canvas元素内使用。

There are ways to overlay over the canvas and other workarounds. 有多种方法可以覆盖画布和其他解决方法。 See: Placing a <div> within a <canvas> 请参阅：将<div>放在<canvas>中

You can also take the data directly from the plugin and draw to the canvas yourself. 您也可以直接从插件中获取数据并自己绘制到画布上。 Here is a demo using three.js and zigfu to draw the skeleton onto a canvas: http://blog.kinect.tonkworks.com/post/30569123887/kinect-online-app-javascript-dev-tutorial-1 这是一个使用three.js和zigfu将骨架绘制到画布上的演示： http ://blog.kinect.tonkworks.com/post/30569123887/kinect-online-app-javascript-dev-tutorial-1

在HTML5的canvas元素中使用Zigfu（kinect）

问题描述

2 个解决方案

解决方案1
0 2012-06-03 15:31:42

解决方案2
0 2012-09-06 04:09:01

在HTML5的canvas元素中使用Zigfu（kinect）

问题描述

2 个解决方案

解决方案1 0 2012-06-03 15:31:42

解决方案2 0 2012-09-06 04:09:01

解决方案1
0 2012-06-03 15:31:42

解决方案2
0 2012-09-06 04:09:01