用fabricjs模拟免费绘图 [英] Emulate free drawing with fabricjs

问题描述

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

I am developing application which has whiteboard. Whiteboard should work like idroo.com. One user is drawing something another user should be able to see it on his browser in real time. I use fabricjs as canvas wrapper and it has everithing I need. But I can't emulate free drawing on canvas. I send mouse position and brush options to remote client and try to render them by firing mouse move events. But it don't work. If some body has simialiar problem can you please help?

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]});
}

在此处查看plunker: https://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

See plunker here: https://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

您可以简化用于计算x和坐标的代码，并像这样进行操作:

You can simplify your code for calculating x and coordinates and do it like this:

var point = canvas.getPointer(e);

这篇关于用fabricjs模拟免费绘图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！