使用 Fabric js 构建多人涂鸦。
尝试使用 Fabric js 实现多人涂鸦，想法是当 U1 在画布上绘制时，我们将点推送到 RTDB 并在客户端上获取这些点，并以编程方式在两个客户端中绘制笔画。
您可以将画布的数据保存在path:created例如（或其他event http://fabricjs.com/docs/fabric.Canvas.html) using toJSON() http://fabricjs.com/docs/fabric.Canvas.html#toJSON.
将其发送到服务器，另一个客户端将使用以下命令加载它loadFromJSON() http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON.
更新（4.3.1）（谢谢@用户8555937 https://stackoverflow.com/users/8555937/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 https://codepen.io/moshfeu/pen/ZEGQEBO?editors=0010
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
