Deserialisieren eines JSON-Objekts in Fabric.js

Question

Ich entwickle ein kollaboratives Whiteboard mit fabricjs. Wenn ein Benutzer ein neues Fabric-Objekt erstellt, serialisiere ich es und sende es an alle anderen Benutzer.

Wenn diese Benutzer das serialisierte Objekt erhalten, sollte es deserialisiert und ihrer Zeichenfläche hinzugefügt werden. Was ist der beste Weg, dies zu tun? Ich war nicht in der Lage, eine Funktion zu finden, die ein einzelnes Objekt deserialisiert, nur die ganze Leinwand (loadFromJSON), so dass ich implementiert eine unelegant Lösung:

function drawRoomObjects(roomObjects){ 
    var canvasString = "{\"objects\":["; 
    for(var roomObjectKey in roomObjects){ 
    canvasString += roomObjects[roomObjectKey]; 
    } 
    canvasString += "], \"background\":\"\"}"; 
    var tmpCanvas = new fabric.Canvas(); 
    tmpCanvas.loadFromJSON(canvasString); 
    for(var k in tmpCanvas.getObjects()) { 
    canvas.add(tmpCanvas._objects[k]); 
    } 
    canvas.renderAll(); 
} 

Irgendwelche Vorschläge für eine bessere Art und Weise, es zu tun?

Answer 1

Sie können fabric.util.enlivenObjects zum Deserialisieren von JSON-Objekten verwenden. Nachdem alle Objekte deserialisiert werden müssen Sie sie hinzufügen:

objects.forEach(function(o) { 
    canvas.add(o); 
}); 

die komplette Beispiel ist - ersetzen obj1, obj2 mit Ihren Objekten. Beispiel ist auch verfügbar unter .

fabric.util.enlivenObjects([obj1, obj2], function(objects) { 
    var origRenderOnAddRemove = canvas.renderOnAddRemove; 
    canvas.renderOnAddRemove = false; 

    objects.forEach(function(o) { 
    canvas.add(o); 
    }); 

    canvas.renderOnAddRemove = origRenderOnAddRemove; 
    canvas.renderAll(); 
});