用fabricjs模拟自由绘图

Emulate free drawing with fabricjs

本文关键字：绘图 自由 模拟 fabricjs      更新时间：2023-09-26

我正在开发具有白板的应用程序。Whiteboard应该像idroo.com一样工作。一个用户正在绘制一些东西，另一个用户应该能够在他的浏览器上实时看到它。我使用fabricjs作为帆布包装，它有我需要的一切。但我无法模仿在画布上自由绘画。我将鼠标位置和笔刷选项发送到远程客户端，并尝试通过触发鼠标移动事件来渲染它们。但这行不通。如果有人有类似的问题，你能帮忙吗?

canvasContainer.on('mousemove', function (e) {      
    var left = canvasContainer.offset().left;
    var top = canvasContainer.offset().top;
    var x = e.pageX - left;
    var y = e.pageY - top;         
    //Send data to remote browser by socket.io or signalr
    //I need to draw on remote browser by these x and y coordinates.
    updateCursor(_connections, x, y);
});

你可以这样做:

var brush = new fabric.PencilBrush(canvas);
var points = [[10,10], [20,20], [25,70],[100,300]];
brush.onMouseDown({x:points[0][0], y:points[0][1]});
for(var i=1;i<points.length;i++) {
  brush.onMouseMove({x:points[i][0], y:points[i][1]});
}

见柱塞:https://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

你可以简化计算x和坐标的代码，这样做:

var point = canvas.getPointer(e);
相关文章：