Skip to content
Convert Raphaël paper objects to JSON and back
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
raphael.json.js

README.md

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

<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="raphael.json.js"></script>

<div id="holder"></div>

<script type="text/javascript">
	var paper = Raphael('holder');

	var rect = paper
		.rect(50, 50, 50, 50)
		.attr('fill', '#f00')
		.transform('s2')
		.rotate(10)
		;

	var json = paper.toJSON();

	paper.clear();

	paper = Raphael('holder');

	paper.fromJSON(json);
</script>

Callback

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

var json = paper.toJSON(function(el, data) {
	data.id = el.node.id;

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

	return el;
});

Preserving sets

var paper = Raphael('holder');

// Create a set
var exampleSet = paper.set();

var rect = paper.rect(50, 50, 50, 50)
	.attr({ fill: 'red' })
	;

exampleSet.push(rect);

// Store a unique identifier in each of the set's elements
for ( i in exampleSet ) {
	exampleSet[i].setName = 'exampleSet';
}

// Serialize the paper
var json = paper.toJSON(function(el, data) {
	// Save the set identifier along with the other data
	data.setName = el.setName;

	return data;
});

// Start over
paper.clear();

exampleSet = null;

// Restore the paper to the previous state using serialized data
paper.fromJSON(json, function(el, data) {
	// Recreate the set using the identifier
	if ( !window[data.setName] ) window[data.setName] = paper.set();

	// Place each element back into the set
	window[data.setName].push(el);

	return el;
});

// The set is restored
console.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.

// Save
var json = paper.toJSON(function(el, data) {
    data.ft = {};

    if ( el.freeTransform != null ) {
        data.ft.attrs = el.freeTransform.attrs;

				paper.freeTransform(el).unplug();
    }

    return data;
});

// Start over
paper.clear();

// Load
paper.fromJSON(json, function(el, data) {
    if ( data.ft && data.ft.attrs ) {
        paper.freeTransform(el);

        el.freeTransform.attrs = data.ft.attrs;

        el.freeTransform.apply();
    }

    return el;
});
You can’t perform that action at this time.