Emulate free drawing with 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);
});

回答1:

You can do something like this:

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

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

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

var point = canvas.getPointer(e);

来源：https://stackoverflow.com/questions/40595783/emulate-free-drawing-with-fabricjs