如何使用Fabric JS以编程方式自由绘制? [英] How to programmatically free draw using Fabric js?

问题描述

使用Fabric js构建多人涂鸦.

Building a multiplayer doodle using fabric js.

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

Trying to implement multiplayer doodle using fabric js, the idea is when U1 draws on canvas we push the points to RTDB and get those points on both the client and programmatically draw the stroke in both the clients.

推荐答案

例如，您可以将画布的数据保存在path:created上(或其他 .
将其发送到服务器，另一个客户端将使用

You can save the canvas' data on path:created for example (or other event) using toJSON().
Send it to the server and the other client will load it using 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>

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

Probably you can optimize it by sending only the diffs and so on, but this is the start of the path

在图形上同步(不仅在path:created之后)

Sync on drawing (not only after path:created)

这个想法是要捕获"原始"画布事件，并在第二个事件上触发它们.
因此，您可以将pointer发送到服务器，并在其他客户端中触发事件.

The idea is to "capture" the "original" canvas' events and trigger them on the second one.
So, you can send the pointer to the server and trigger the events in the other clients.

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

这篇关于如何使用Fabric JS以编程方式自由绘制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！