如何使用 Fabric js 以编程方式免费绘制?
How to programmatically free draw using Fabric js?
使用 fabric js 构建多人涂鸦。
尝试使用 fabric js 实现多人涂鸦,想法是当 U1 在 canvas 上绘制时,我们将点推送到 RTDB 并在两个客户端上获取这些点,并以编程方式在两个客户端中绘制笔画。
例如,您可以将 canvas 的数据保存在 path:created
上(或其他 event) using toJSON()
.
Send it to the server and the other client will load it using 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
之后)
想法是“捕获”“原始”canvas'事件并在第二个事件上触发它们。
因此,您可以将 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>
使用 fabric js 构建多人涂鸦。
尝试使用 fabric js 实现多人涂鸦,想法是当 U1 在 canvas 上绘制时,我们将点推送到 RTDB 并在两个客户端上获取这些点,并以编程方式在两个客户端中绘制笔画。
例如,您可以将 canvas 的数据保存在 path:created
上(或其他 event) using toJSON()
.
Send it to the server and the other client will load it using 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
之后)
想法是“捕获”“原始”canvas'事件并在第二个事件上触发它们。
因此,您可以将 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>