Блог

Я пытаюсь сделать доску, используя fabric.js и socket.io. Это работает, но после проведения одной линии он перестает работать. Я считаю, что он зацикливается в функции socket.on, и это заставляет его снова и снова добавлять один и тот же объект, но я не уверен, как это исправить.

 (function() {
  var socket = io();
  var myid = 0;
  var $ = function(id){return document.getElementById(id)};

  var canvas = this.__canvas = new fabric.Canvas('c', {
    isDrawingMode: true
  });
  var now_color="black";
  var now_width = 1;

  fabric.Object.prototype.transparentCorners = false;

  var drawingModeEl = $('drawing-mode'),
      drawingOptionsEl = $('drawing-mode-options'),
      drawingColorEl = $('drawing-color'),
      drawingLineWidthEl = $('drawing-line-width'),
      clearEl = $('clear-canvas');
      eraseModeEl = $('erase-mode');
      selmode = $('select');
      ermode = $('erase');
      dmode = $('draw');

socket.on('draw', function(path) {
  fabric.util.enlivenObjects([path], function(objects) {
      canvas.add(objects[0]);
  });
});

selmode.onclick = function() {
    select.classList.remove('active');erase.classList.remove('active');draw.classList.remove('active');
    select.classList.add('active');
    canvas.isDrawingMode = false;
}
    
ermode.onclick = function() {
    select.classList.remove('active');erase.classList.remove('active');draw.classList.remove('active');
    erase.classList.add('active');
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
    canvas.freeDrawingBrush.width = now_width;
}
    
dmode.onclick = function() {
    select.classList.remove('active');erase.classList.remove('active');draw.classList.remove('active');
    draw.classList.add('active');
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
    canvas.freeDrawingBrush.width = now_width;
    canvas.freeDrawingBrush.color = now_color;
}

var canvasModifiedCallback = function() {

canvas.setActiveObject(canvas.item(myid));
    var what = canvas.getActiveObject();
    socket.emit('draw', what);
    myid  ;
    canvas.discardActiveObject();
};

canvas.on('object:added', canvasModifiedCallback);
})();