Raphaël.JSON

Convert Raphaël 2.0 elements on a paper to JSON and back.

This plugin can be used to save the state of a paper for later re-use. It was originally forked from Jonathan Spies's raphael.serialize and later rewritten from scratch to work with Raphaël 2.0.

Licensed under the MIT license.

Example

<scripttype="text/javascript" src="raphael-min.js"></script><scripttype="text/javascript" src="raphael.json.js"></script><divid="holder"></div><scripttype="text/javascript">varpaper=Raphael('holder');varrect=paper.rect(50,50,50,50).attr('fill','#f00').transform('s2').rotate(10);varjson=paper.toJSON();paper.clear();paper=Raphael('holder');paper.fromJSON(json);</script>

Callback

A callback function can be used to save and restore custom attributes.

varjson=paper.toJSON(function(el,data){data.id=el.node.id;returndata;});

paper.fromJSON(json,function(el,data){el.node.id=data.id;returnel;});

Preserving sets

varpaper=Raphael('holder');// Create a setvarexampleSet=paper.set();varrect=paper.rect(50,50,50,50).attr({fill: 'red'});exampleSet.push(rect);// Store a unique identifier in each of the set's elementsfor(iinexampleSet){exampleSet[i].setName='exampleSet';}// Serialize the papervarjson=paper.toJSON(function(el,data){// Save the set identifier along with the other datadata.setName=el.setName;returndata;});// Start overpaper.clear();exampleSet=null;// Restore the paper to the previous state using serialized datapaper.fromJSON(json,function(el,data){// Recreate the set using the identifierif(!window[data.setName])window[data.setName]=paper.set();// Place each element back into the setwindow[data.setName].push(el);returnel;});// The set is restoredconsole.log(exampleSet);

Raphaël.JSON and Raphaël.FreeTransform

Raphaël.JSON can be used together with Raphaël.FreeTransform to save and load drawings.

// Savevarjson=paper.toJSON(function(el,data){data.ft={};if(el.freeTransform!=null){data.ft.attrs=el.freeTransform.attrs;paper.freeTransform(el).unplug();}returndata;});// Start overpaper.clear();// Loadpaper.fromJSON(json,function(el,data){if(data.ft&&data.ft.attrs){paper.freeTransform(el);el.freeTransform.attrs=data.ft.attrs;el.freeTransform.apply();}returnel;});