0

Zigfu の Web サイトでユーザー レーダーを作成するための最初のチュートリアルを実行しました。このレーダーをキャンバス要素で機能させるのに問題があります。

キャンバスで描画メソッドを使用したいので、コンテナには入れたくありません。

これまでのところ、チュートリアルから直接取得したコードを次に示します。読んでくれてありがとう！

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

2 に答える 2

0

チュートリアルで使用されるレーダーは、DOM div の配置と配置を利用します。
残念ながら、これは canvas 要素内では使用できません。

キャンバスの上に重ねる方法やその他の回避策があります。参照: <div> を <canvas> 内に配置する

プラグインから直接データを取得して、自分でキャンバスに描画することもできます。three.jsと zigfu を使用してスケルトンをキャンバスに描画するデモを次に示します。

于 2012-09-06T04:09:01.100 に答える
0

JavaScript の周りのタグと、ユーザー レーダーの CSSが欠落しているようです。また、「コンテナ」の div に > がありません

http://zigfu.com/en/zdk/tutorials/の下部からコードをコピーしてみてください。または、 http://zigfu.com/en/zdk/recipes/#omercy16をチェックして、ユーザーのよりクリーンな実装を確認してください。レーダー。

于 2012-06-03T15:31:42.053 に答える