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

Question

使用 fabric js 构建多人涂鸦。

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

Answer 1

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

更新（4.3.1） （感谢@user8555937 ）

const pointer = canvas.getPointer(e);
const options = {pointer, e:{}} // required for Fabric 4.3.1

canvas2.freeDrawingBrush.onMouseDown(pointer, options);

 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; }

 <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>

https://codepen.io/moshfeu/pen/ZEGQEBO?editors=0010