使用fabricjs模擬免費繪圖

我正在開發具有白板的應用程序。白板應該像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模擬免費繪圖

回答

相關問題