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

Question

使用fabric js构建多人游戏涂鸦。

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

Answer 1

您可以使用.
将其发送到服务器，其他客户端将使用loadFromJSON()toJSON()将其加载到path:created

上。更新 (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