Передача рисунка fabricjs через WebSocket с помощью каналов django

Я делаю доску и запускаю ее на localhost с разными открытыми окнами браузера.

Я могу отправлять фигуры и textbox, но не могу понять, как сделать так, чтобы freedrawing появился на холсте в других окнах.

Код:

HTML

<button id="pencilBtn">Pencil Off</button>
<canvas id="canvas"></canvas>

JAVASCRIPT

КОД ОТПРАВИТЕЛЯ: Нажмите кнопку, чтобы активировать freedrawing:

var pencilBtn = document.querySelector('#pencilBtn');

pencilBtn.addEventListener('click', pencilDrawing);

function pencilDrawing(e){
  if (e.target.textContent == 'Pencil Off'){
    e.target.textContent = 'Pencil On';
    canvas.freeDrawingBrush = new 
      fabric.PencilBrush(canvas);

    canvas.set('isDrawingMode', true);
    canvas.freeDrawingBrush.width = 10;
    canvas.freeDrawingBrush.color = 'blue';

    // Add some attributes to freeDrawingBrush
    canvas.freeDrawingBrush.brushtype = 'pencil';
    canvas.freeDrawingBrush.user_id = user_id;

    canvas.freeDrawingBrush.toJSON = (function(toJSON){
      return function(){      
        return fabric.util.object.extend(toJSON.call(this), {
          brushtype: this.brushtype,
          user_id: this.user_id
        });
      };
    })(canvas.freeDrawingBrush.toJSON);

  } else {
     e.target.textContent = 'Pencil Off';
        canvas.set('isDrawingMode', false);
  }
}

СОБЫТИЕ МЫШИ ВНИЗ - (я знаю, что мне понадобятся события перемещения и подъема мыши, но я решил, что начну с того, что попробую послать рисунок точки, прежде чем что-то еще)

canvas.on('mouse:down', (ev)=>{
  if (canvas.isDrawingMode == true){

    // Add another attribute to freeDrawingBrush
    canvas.freeDrawingBrush.obj_id = Math.random();

    canvas.freeDrawingBrush.toJSON = (function(toJSON){
      return function(){
        return fabric.util.object.extend(toJSON.call(this), {
          obj_id: this.obj_id
        });
      };
    })(canvas.freeDrawingBrush.toJSON);

    // send freeDrawingBrush over socket
    whiteboardSocket.send(JSON.stringify({
    'canvas_object': {
      'type': 'drawing_mouse_down',
      'color': canvas.freeDrawingBrush.color,
      'width': canvas.freeDrawingBrush.width,
      'mouse_down_pointer': canvas.getPointer(ev),
      'brushtype': canvas.freeDrawingBrush.brushtype,
      'user_id': canvas.freeDrawingBrush.user_id,
      'obj_id': canvas.freeDrawingBrush.obj_id
    }
    }))
  } 
})

КОД ПРИЕМНИКА

var remote_brush = {};

whiteboardSocket.onmessage = function(e) {
  const data = JSON.parse(e.data);
  
  if (data.canvas_object.type === 'drawing_mouse_down'){

    if (data.canvas_object.brushtype == 'pencil') {

      if (!remote_brush[data.canvas_object.user_id]){

        remote_brush[data.canvas_object.user_id] = new fabric.PencilBrush(data.canvas_object);
      }

      const pointer = remote_brush[data.canvas_object.user_id].canvas.mouse_down_pointer;
    
      const options = {pointer, e:{}};

      remote_brush[data.canvas_object.user_id].canvas.onMouseDown(pointer, options);
    }
  }
  canvas.requestRenderAll();
}

РЕЗУЛЬТАТЫ:

Uncaught TypeError: remote_brush[data.canvas_object.user_id].canvas.onMouseDown не является функцией

Данные отправляются; они просто не добавляются на холст удаленного клиента.

Вернуться на верх