2013-10-14 2 views
10

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.Deserialisieren eines JSON-Objekts in Fabric.js

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?

Antwort

15

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(); 
}); 
+2

Das hat wie ein Charme funktioniert. Ich musste einfach 'JSON.parse()' auf meinen JSON-Strings aufrufen, bevor ich 'enlivenObjects' einsetzte – stropitek

Verwandte Themen