0

canvas と node.js を使用して小さな描画アプリを作成しています。多くのユーザーが私のアプリに接続しているとしましょう - ユーザー A、ユーザー B など。

ユーザーAがキャンバスに何かを描いたとき、他のユーザーのキャンバスに絵を出力することで、ユーザーAが何かを描いたことを他のユーザーに知らせたい。

私が達成したのはclick、キャンバス要素にイベントを添付することです。それは機能しますが、問題は、ユーザーがワンクリックで描画を完了した場合にのみ機能することです。ピクセルごとの変更のように、実行時に図面を他のユーザーと共有したい。のようなキャンバスのイベントはあります.canvaschange()か?

クリックイベントの私のコードは -

$("#imageTemp").click(function(){
      var can = document.getElementById("imageView");
      var img = can.toDataURL("image/png");
      socket.emit('emit_draw', img, function (data){
        console.log('Emit Broadcast draw', data);
      });
});
4

2 に答える 2

0

使用したか確認したい

クライアント側で

$("#imageTemp").click(function(){
  var can = document.getElementById("imageView");
  var img = can.toDataURL("image/png");
  socket.emit('emit_draw', img);

}）;

サーバー側

io.sockets.on('connection', function (socket) {
    socket.on('emit_draw',function(img){
         socketioId = socket.id;
         socket.broadcast.emit('drawed',socketioId,img);
    });

クライアント側で各ユーザーのソケットIDを保存し、

   socket.on('drawed',function(friendId,img){
         // handle your picture
    });
于 2012-06-27T09:44:04.277 に答える
0

実際の描画プリミティブを呼び出している場所で、描画メッセージを発行していない理由はありますか? クリックではなく、共有したいのは絵ですよね？同じ種類のメッセージに基づいて独自の描画を行うこともできます (同じメッセージをローカルでリッスンし、それらのメッセージに基づいてのみ描画します)。

そして、過剰なネットワーク トラフィックを避けるために、おそらくやりたいことがもう 1 つあります。描画イベントをある種のキューにキャプチャし、キューへの最後の追加が受信されてから少なくとも 1 秒 (または何でも) 経過したときにのみ (ネットワーク経由で) メッセージを発行します。

于 2012-06-27T07:46:31.433 に答える