Question

如何使用fabricjs在客户端和b客户端之间同步笔刷数据。

现在我可以使用socket.io做那个常见的shaps但是不能做铅笔刷我的示例代码

    client a --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()
        for (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服务器： socket.on（'js_object_redraw'，function（data）{
socket.broadcast.emit（ 'client_js_object_redraw'，数据）

});

=============================================== ==================

pencilBrush 我可以做syc数据喜欢：

当我画线时我将事件发给b

但我无法理解这条线。当我清除线喜欢： var ctx = canvas.getContext（）; ctx.clearRect（x，y，50,50）;

下一个画出锐利，有删除线会显示画布

我该怎么做，在a和b客户端之间同步数据，并可以删除锐利。

非常感谢

Answer 1

RacerJs是多个客户端之间同步数据的不错选择这里是完整示例https://github.com/codeparty/racer

如何使用fabric js在a和b客户端浏览器之间同步数据

1 个答案: