HTML5의 캔버스 요소에 지그 후 (kinect) 사용

나는 지그 푸의 웹 사이트에서 사용자 레이더를 만들기위한 초기 자습서를 읽었습니다. 이 레이더가 캔버스 요소에서 작동하는 데 문제가 있습니다.HTML5의 캔버스 요소에 지그 후 (kinect) 사용

캔버스에서 드로잉 메서드를 사용하고 싶습니다. 컨테이너에 그리기를 원하지 않습니다.

지금까지 자습서에서 직접 작성한 코드입니다. 독서에 대해 너무 고마워!

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

출처

2012-06-02 Zach

당신이 자바 스크립트 주위 태그뿐만 아니라 사용자의 레이더에 대한 몇 가지 CSS를 누락 보인다. 또한 '컨테이너'div가 누락되었습니다.>

http://zigfu.com/en/zdk/tutorials/ 하단의 코드를 복사 해 보거나 사용자 레이더를 더 깨끗하게 구현하려면 http://zigfu.com/en/zdk/recipes/#omercy16을 확인하십시오.

출처

2012-06-03 15:31:42

미안하지만 분명하지 않았습니다. 나는 이미 레이더를위한 튜토리얼을 가지고있다. 난 그냥 일반 div 대신 캔버스 요소에 있어야합니다. – Zach

튜토리얼에서 사용 된 레이더는 DOM div 배치 및 위치 지정을 사용합니다.
캔버스 요소 내부에서는 사용할 수 없습니다.

캔버스와 다른 해결 방법을 오버레이하는 방법이 있습니다. 참고 : Placing a <div> within a <canvas>

또한 플러그인에서 직접 데이터를 가져 와서 캔버스에 직접 그릴 수 있습니다. 캔버스에 skeleton을 그릴 때 three.js와 zigfu를 사용하는 데모는 다음과 같습니다. http://blog.kinect.tonkworks.com/post/30569123887/kinect-online-app-javascript-dev-tutorial-1

출처

2012-09-06 04:09:01 KevinD

HTML5의 캔버스 요소에 지그 후 (kinect) 사용

답변

관련 문제