使用fabricjs模拟免费绘图

2016-11-14 154 views 0 likes

我正在开发具有白板的应用程序。白板应该像idroo.com一样工作。一位用户正在绘制一些其他用户应该能够在他的浏览器上实时看到它的内容。我使用fabricjs作为帆布包装，它有我需要的永恒。但我无法模仿画布上的自由绘画。我将鼠标位置和画笔选项发送给远程客户端，并尝试通过触发鼠标移动事件来呈现它们。但它不起作用。如果有些身体有simialiar问题，你可以帮忙吗？使用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); 
});

来源

2016-11-14 Radislav

您是否尝试过从鼠标移动中传递事件，然后使用canvas.trigger来触发事件o在目标画布？ – Ben

是的。我尝试过这个。但是我不能将事件对象序列化为json来发送它。 – Radislav

序列化过程中出了什么问题？ – Ben

回答

你可以做这样的事情：

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

您可以简化代码计算x和坐标，像这样做：

var point = canvas.getPointer(e);

来源

2016-11-16 07:58:56 janusz

感谢您的回复！我会尽力让你知道。 – Radislav

也可能调用brush.onMouseUp（x，y）。所以我想你应该把事件的类型（mousedown，mousemove，mouseup）和x和y坐标一起发送到你的socket.io客户端，并从'brush'调用相应的方法。 – janusz

是的，它的工作原理。但在绘画10-20秒后它开始变慢。和显示器性能显示CPU消耗...你知道为什么吗？ – Radislav

使用fabricjs模拟免费绘图

回答

相关问题