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

Question

我在Zigfu网站上完成了如何制作用户雷达的初始教程。 我无法让此雷达在canvas元素中正常工作。

我想在画布上使用绘图方法，所以我不想在容器中使用它。

到目前为止，这是我的代码，直接摘自本教程。 非常感谢您的阅读！

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

看来你失踪了 javascript周围的标签，以及一些雷达用户的CSS。 另外-您的“容器” div缺少>

尝试从http://zigfu.com/zh-cn/zdk/tutorials/的底部复制代码，或者-查看http://zigfu.com/zh-cn/zdk/recipes/#omercy16 ，以实现更干净的用户实施雷达。

Answer 2

本教程中使用的雷达利用DOM div的放置和定位。
不幸的是，这不能在canvas元素内使用。

有多种方法可以覆盖画布和其他解决方法。 请参阅：将<div>放在<canvas>中

您也可以直接从插件中获取数据并自己绘制到画布上。 这是一个使用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