使用fabricjs模擬免費繪圖

Question

我正在開發具有白板的應用程序。白板應該像idroo.com一樣工作。一位用戶正在繪製一些其他用戶應該能夠在他的瀏覽器上實時看到它的內容。我使用fabricjs作爲帆布包裝，它有我需要的永恆。但我無法模仿畫布上的自由繪畫。我將鼠標位置和畫筆選項發送給遠程客戶端，並嘗試通過觸發鼠標移動事件來呈現它們。但它不起作用。如果有些身體有simialiar問題，你可以幫忙嗎？

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

Answer 1

你可以做這樣的事情：

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