fabricjsでフリー描画をエミュレート

Question

ホワイトボードを持つアプリケーションを開発中です。ホワイトボードはidroo.comのように動作するはずです。 1人のユーザが、別のユーザがブラウザ上でリアルタイムに見ることができるべきものを描いている。私はキャンバスラッパーとしてfabricjsを使用し、それは私が必要とeverithingしています。しかし、私はキャンバスで自由な絵をエミュレートすることはできません。私はマウスの位置とブラシのオプションをリモートクライアントに送り、マウスの移動イベントを発生させてレンダリングしようとします。しかし、それは動作しません。体がシリアライアルな問題を抱えていると助けてもらえますか？

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

あなたはこのような何か行うことができます：あなたは、xおよび座標を計算するためのコードを簡素化し、このようにそれを行うことができますhttps://plnkr.co/edit/V1c1xkB29tgB2ha99CRQ?p=preview

：

var point = canvas.getPointer(e); 

ここ

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を