我正在使用 fabricjs 开发协作白板。当用户创建一个新的结构对象时,我将其序列化并将其发送给所有其他用户。
var rect = new fabric.Rect();
canvas.add(rect);
socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users
当这些用户收到序列化对象时,应该将其反序列化并添加到他们的 Canvas 中。做这个的最好方式是什么?我找不到反序列化单个对象的函数,只能反序列化整个 Canvas (loadFromJSON),所以我实现了一个不优雅的解决方案:
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();
}
有什么更好的建议吗?
最佳答案
您可以使用 fabric.util.enlivenObjects
反序列化 json 对象。反序列化所有对象后,您必须添加它们:
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();
});
关于javascript - 在 Fabric.js 中反序列化一个 JSON 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19361971/