how to use fabricjs for synchronizing data between a and b client browers -
how can use fabricjs sync pencilbrush data between client , b client.
now can use socket.io common shaps pencilbrush can't example code
client --send canvas.on('object:modified', function(options){ console.info("object modified",options) socket.emit('js_object_redraw', {id:data.target.id,object:data.target}); },false); client b --recieve socket.on('client_js_object_redraw', function (data) { console.info("client_js_object_redraw:",data) console.info("data.target.type",data.object.type) var ele = canvas.getobjects() (var i=0;i<ele.length;i++) { var cur_object = ele[i] if (data.id == cur_object.id){ canvas.remove(cur_object); draw_object_by_type(data) } } }); function draw_object_by_type(data){ if(data.object.type=="rect"){ draw_rect(data); }else if(data.object.type=="line"){ draw_line(data); } else if(data.object.type=="triangle"){ draw_triangle(data); } ...... } function draw_rect(data){ var id = data.id; var object = data.object var rect = new fabric.rect({ id:id, left : object.left, top :object.top, width : 60, height : 70, scalex: object.scalex, scaley: object.scaley, angle: object.angle, fill : object.fill }); canvas.add(rect); return rect; }
nodejs server: socket.on('js_object_redraw', function (data) {
socket.broadcast.emit('client_js_object_redraw',data)
});
=================================================================
pencilbrush can syc data :
when draw line emit event b
but can't earse line. when clear line like: var ctx = canvas.getcontext(); ctx.clearrect(x, y, 50, 50);
the next draw sharp ,the have remove line show canvas
how can ,sync data between , b client , can remove sharp.
thanks,very much
racerjs option synchronize data between multiple clients here complete example https://github.com/codeparty/racer
Comments
Post a Comment