Convert back fabric.Group.toJSON() to fabric.Group

问题

I'v seen so many tutorials on internet how to do canvas.loadFromJSON() which the parameter is using JSON.stringify(canvas).

But what if i want to make a fabric.Object by some function which using a JSON data as parameter which produced by fabric.Object.toJSON(). Is it possible? if it is not possible, so what is the purpose of fabric.Object.toJSON(), can't find it so useful on the official fabricjs documentation.

Basically i just need to saving each object of fabric.Group, complete with it properties as a row record at database table, and restore them to a fabricjs canvas on browser open. In my mind by using canvas.add(object_converted_back_from_JSON).

EDIT:

Actualy i am partially succeeded in achieve those goal. Using following code:

fabric.util.enlivenObjects(JSONData, function(objects){
    objects.forEach(function(o) {
    App.viewer.fabricjsOverlay().fabricCanvas().add(o);
    });
    App.viewer.fabricjsOverlay().fabricCanvas().renderAll();
});

However the objects restored became black. Seem to me it can't create object with type of fabric.Group based a JSON data. Because when i am trying to make the Objects as a single fabric.Rect, the object is created properly as i want.

Here is the JSON Data of 2 fabric.Group object which i am trying to convert as fabric.Group

var JSONData=[
  {"type":"group","originX":"left","originY":"top","left":5631.51,"top":1333.78,"width":4150.54,"height":2964.96,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","objects":[{"type":"rect","originX":"left","originY":"top","left":-2074.77,"top":-1481.98,"width":4149.54,"height":2963.96,"fill":"rgba(255,0,0,0.5)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"text","originX":"left","originY":"top","left":-2064.77,"top":-1471.98,"width":1661,"height":524.32,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Test text 1","fontSize":400,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""}]},
  {"type":"group","originX":"left","originY":"top","left":12448.61,"top":1407.88,"width":6447.6,"height":4817.43,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","objects":[{"type":"rect","originX":"left","originY":"top","left":-3223.3,"top":-2408.21,"width":6446.6,"height":4816.43,"fill":"rgba(255,0,0,0.5)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"text","originX":"left","originY":"top","left":-3213.3,"top":-2398.21,"width":1661,"height":524.32,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Test text 2","fontSize":400,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""}]}
]

FIXED:

The problem actually about the fabricjs i have used. It was version 1.5.0 which i were thought as stable. But when i change to newest version of release candidate (v1.6.0-rc.1). It is works as i expected. This 2 fiddle url with same code give different result: https://jsfiddle.net/bayucandra/32rr6xry/3/ and https://jsfiddle.net/bayucandra/gp92h8Lh/2/. The last url with fabricjs v1.6.0-rc.1 works as i expected.

来源：https://stackoverflow.com/questions/36026471/convert-back-fabric-group-tojson-to-fabric-group

标签

fabricjs