0

我正在使用画布和 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

无论您调用实际绘图图元的任何地方，您都没有发出绘图消息的任何原因？您要分享的是绘画内容，而不是点击次数？您甚至可以根据相同类型的消息进行自己的绘图（在本地收听相同的消息并仅根据这些消息进行绘图）。

另一件您可能想要做的事情是避免过多的网络流量；将绘图事件捕获到某种队列中，并且仅在收到最后一次添加到队列后至少 1 秒（或其他时间）时才发出（通过网络）消息。

于 2012-06-27T07:46:31.433 回答
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 回答