Stringify only one object in Fabric.js

Question

I'm working with fabricJS. It's an awesome library for drawing.

var data = JSON.stringify(canvas);

Above command is used to get all the objects along with their properties in JSON format. However, I want to stringfy only an object.

For eg. Creating a rectangle using fabric

var rec = new fabric.Rect({
    left: mouse_pos.x,
    top: mouse_pos.y,
    width: 75,
    height: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  });
canvas.add(rec);

I want to get the JSON of only this object(rectangle) being added to the canvas and not the JSON of whole of the canvas being rendered. May be something like var data = JSON.stringfy(rec);. Is there any way to do so because I want to send the latest object being added to the canvas over sockets and not the whole canvas object which will in turn consumes unnecessary bandwidth because of the JSON object size.

score 3 · Accepted Answer · answered Oct 28 '13 at 07:07

3

Yes you can! :)

var rect = new fabric.Rect({
    left: mouse_pos.x,
    top: mouse_pos.y,
    width: 75,
    height: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
  });

canvas.add(rect);

// get last item
var obj = canvas.item(canvas.size() - 1);

// stringify only one object
var json = JSON.stringify(obj);

answered Oct 28 '13 at 07:07

Kienz

3,407
22
30

1

Perfection! Thanks a lot @Keinz. Just one thing I would like to share: in order to load this object in future `canvas.loadFromJSON(obj)`,one has to do `obj = '{"objects":['+ obj +']}';` after getting `obj` otherwise fabric will report `length Exception`. – softvar Oct 28 '13 at 08:31
1

Maybe this post helps you: http://stackoverflow.com/a/19364574/2323945 `canvas.loadFromJSON` needs objects property. – Kienz Oct 28 '13 at 08:42
Hey @Kienz, please can you help me on this http://stackoverflow.com/questions/19692334/loadfromdatalessjson-not-providing-the-desired-output-in-fabric-js – softvar Oct 31 '13 at 09:55

score 1 · Answer 2 · answered Oct 27 '13 at 22:47

1

Can't you just turn your options object into JSON? Then you could send it through sockets, get the JSON on your receiver, parse it and apply into the fabric.Rect function to draw your rect there.

var options = {
    left: mouse_pos.x,
    top: mouse_pos.y,
    width: 75,
    height: 50,
    fill: 'white',
    stroke: 'black',
    strokeWidth: 3,
    padding: 10
};

var rec = new fabric.Rect(options);
canvas.add(rec);

var yourData = JSON.stringify(options); // turns your options object into JSON

// ...rest of your code, that sends it through sockets...

answered Oct 27 '13 at 22:47

Guilherme Sehn

6,727
18
35

What in case of `isDrawingMode=true`? The path is automatically rendered to the canvas without even explicitly adding it to the canvas? So, how will I set the options and stringify them ? – softvar Oct 27 '13 at 23:26
Also going by this will overhead the cost of manually updating each option upon any transformation? Isn;t there any predefined thing in fabric to take care of this? – softvar Oct 27 '13 at 23:29
Hmm, I do not know Fabric.js very well. I don't really know what I'd do in this case. – Guilherme Sehn Oct 27 '13 at 23:31

Stringify only one object in Fabric.js

2 Answers2