Question

我正在使用canvas和node.js创建一个小型绘图应用程序。可以说有很多用户连接到我的应用程序 - 用户A，用户B等。

当用户A在画布上绘制任何内容时，我想让其他用户知道用户A通过在其他用户的画布上输出绘图来绘制内容。

我所获得的是在canvas元素上附加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);
      });
});

Answer 1

您在调用实际绘图基元时是否没有发出绘图消息的原因？这是您要分享的绘图内容，而不是点击次数？你甚至可以根据相同类型的消息做自己的绘图（在本地监听相同的消息，只根据这些消息进行绘制）。

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

Answer 2

我想确认你使用了

在客户端

$("#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
    });

检测画布上的变化

2 个答案: