mit fabricjs freie Zeichnung emulieren

Question

I Anwendung entwickle, die Whiteboard hat. Whiteboard sollte wie idroo.com funktionieren. Ein Benutzer zeichnet etwas, das ein anderer Benutzer in Echtzeit in seinem Browser sehen kann. Ich benutze Fabricjs als Canvas Wrapper und es hat alles was ich brauche. Aber ich kann kein freies Zeichnen auf Leinwand emulieren. Ich sende Mausposition und Pinseloptionen an den Remote-Client und versuche, sie zu rendern, indem ich Mausbewegungsereignisse abfange. Aber es funktioniert nicht. Wenn ein Körper simialiar Problem hat, können Sie bitte helfen?

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

Sie können etwas tun:

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 hier: https://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

Sie Ihren Code für die Berechnung der x und Koordinaten vereinfachen können und tun es wie folgt aus:

var point = canvas.getPointer(e);