如何使用Fabric js以编程方式自由绘制？

Question

使用Fabric js构建多人涂鸦。

[尝试使用Fabric js实现多人涂鸦，其想法是，当U1在画布上绘制时，我们将这些点推到RTDB并在客户端上获取这些点，并以编程方式在两个客户端上绘制笔画。

Answer 1

例如，您可以使用path:created将画布的数据保存在event（或其他toJSON()）上。将其发送到服务器，另一个客户端将使用toJSON()加载它。

loadFromJSON()

loadFromJSON()

var canvas = new fabric.Canvas(document.getElementById('canvasId'))
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#00aeff';

canvas.on('path:created', function(e) {
  e.path.set();
  canvas.renderAll();
  drawOnCanvas(canvas.toJSON());
});

var canvas2 = new fabric.Canvas(document.getElementById('canvasId2'));
function drawOnCanvas(json) {
  canvas2.loadFromJSON(json);
}

可能您可以通过仅发送差异等来优化它，但这是路径的开始

在图形上同步（不仅在

#app {
  display: flex;  
}

canvas {
  border: 1px solid red;
}

之后]

想法是“捕获”“原始”画布事件，并在第二个事件上触发它们。因此，您可以将

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>

<div id="app">
  <canvas id="canvasId" width="400" height="400"></canvas>
  <canvas id="canvasId2" width="400" height="400"></canvas>
</div>

发送到服务器并在其他客户端中触发事件。

path:created

pointer

var canvas = new fabric.Canvas(document.getElementById('canvasId'))
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = '#00aeff';

let isDrawing = false;
canvas.on('mouse:down', function({e}) {
  isDrawing = true;
  onMouseDown(e);
}).on('mouse:up', function({e}) {
  isDrawing = false;
  onMouseUp(e);
}).on('mouse:move', function({e}) {
  if (isDrawing) {
    const pointer = canvas.getPointer(e);
    drawRealTime(e, pointer);
  }
});

var canvas2 = new fabric.Canvas(document.getElementById('canvasId2'));
canvas2.isDrawingMode = true;
canvas2.freeDrawingBrush.width = 5;
canvas2.freeDrawingBrush.color = '#00aeff';

function onMouseDown(e) {
  const pointer = canvas.getPointer(e);
  canvas2.freeDrawingBrush.onMouseDown(pointer);
}

function onMouseUp(e) {
  const pointer = canvas.getPointer(e);
  canvas2.freeDrawingBrush.onMouseUp(pointer);
}

function drawRealTime(e, pointer) {
  canvas2.freeDrawingBrush.onMouseMove(pointer);
}

#app {
  display: flex;  
}

canvas {
  border: 1px solid red;
}