检测画布上的变化答案

【问题标题】：detect change on canvas检测画布上的变化
【发布时间】：2012-06-28 14:31:09
【问题描述】：

我正在使用 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);
      });
});

【问题讨论】：

在每次更改时广播整个画布数据可能会使您的应用程序非常慢。您是否考虑过仅在每次更改时传递事件数据，并且接收者可以像处理这些事件数据一样处理他们当地的绘画活动。此外，您可能需要在每次 mousedown、mousemove 和 mouseup 时广播，而不是单击。

标签： jquery html node.js canvas drawing

【解决方案1】：

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

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

【讨论】：

我不担心网络流量，因为我正在为我的朋友创建这个应用程序，我们将在局域网上玩它。所以我不认为这会是一个问题。我已经准备好在这个应用程序中完成所有的补丁工作。因为我还是 node.js 的菜鸟

【解决方案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
    });

【讨论】：