Fabric.js

Question

में एक JSON ऑब्जेक्ट को Deserialize मैं fabricjs का उपयोग कर एक सहयोगी व्हाइटबोर्ड विकसित कर रहा हूँ। जब कोई उपयोगकर्ता एक नई कपड़े वस्तु बनाता है, तो मैं इसे क्रमबद्ध करता हूं और इसे अन्य सभी उपयोगकर्ताओं को भेजता हूं।

var rect = new fabric.Rect(); 
canvas.add(rect); 
socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users 

जब उन उपयोगकर्ताओं को क्रमबद्ध वस्तु प्राप्त होती है, तो इसे deserialized और उनके कैनवास में जोड़ा जाना चाहिए। इसे करने का बेहतरीन तरीका क्या है? मैं एक समारोह है कि एक वस्तु, केवल पूरे कैनवास (loadFromJSON) deserializes ढूँढने में सक्षम नहीं था, इसलिए मैं एक unelegant समाधान लागू: यह करने के लिए एक बेहतर तरीका के लिए

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

कोई सुझाव?

Answer 1

आप जेसन ऑब्जेक्ट्स को deserialize करने के लिए fabric.util.enlivenObjects का उपयोग कर सकते हैं। बाद सभी वस्तुओं deserialized कर रहे हैं आप उन्हें जोड़ने के लिए:

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

यहाँ पूरा उदाहरण है - अपनी वस्तुओं के साथ obj1 की जगह, obj2। उदाहरण jsfiddle पर भी उपलब्ध है।

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