Skip to content

Instantly share code, notes, and snippets.

@jspies
Created June 12, 2010 02:24
Show Gist options
  • Save jspies/435337 to your computer and use it in GitHub Desktop.
Save jspies/435337 to your computer and use it in GitHub Desktop.
// loop through the 'paper' variable from Raphael JS and build up the JSON object describing all images and paths within it.
loadJSON = function(paper, json) {
var set = paper.set();
$.each(json, function(index, node) {
try {
var el = paper[node.type]().attr(node);
set.push(el);
} catch(e) {}
});
return set;
};
buildJSON = function(paper) {
var svgdata = [];
/*svgdata.push({
width: 390,
height: 400
});*/
for(var node = paper.bottom; node != null; node = node.next) {
if (node && node.type) {
switch(node.type) {
case "image":
var object = {
type: node.type,
width: node.attrs['width'],
height: node.attrs['height'],
x: node.attrs['x'],
y: node.attrs['y'],
src: node.attrs['src'],
transform: node.transformations ? node.transformations.join(' ') : ''
}
break;
case "ellipse":
var object = {
type: node.type,
rx: node.attrs['rx'],
ry: node.attrs['ry'],
cx: node.attrs['cx'],
cy: node.attrs['cy'],
stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
'stroke-width': node.attrs['stroke-width'],
fill: node.attrs['fill']
}
break;
case "rect":
var object = {
type: node.type,
x: node.attrs['x'],
y: node.attrs['y'],
width: node.attrs['width'],
height: node.attrs['height'],
stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
'stroke-width': node.attrs['stroke-width'],
fill: node.attrs['fill']
}
break;
case "text":
var object = {
type: node.type,
font: node.attrs['font'],
'font-family': node.attrs['font-family'],
'font-size': node.attrs['font-size'],
stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
fill: node.attrs['fill'] === 0 ? 'none' : node.attrs['fill'],
'stroke-width': node.attrs['stroke-width'],
x: node.attrs['x'],
y: node.attrs['y'],
text: node.attrs['text'],
'text-anchor': node.attrs['text-anchor']
}
break;
case "path":
var path = "";
$.each(node.attrs['path'], function(i, group) {
$.each(group,
function(index, value) {
if (index < 1) {
path += value;
} else {
if (index == (group.length - 1)) {
path += value;
} else {
path += value + ',';
}
}
});
});
var object = {
type: node.type,
fill: node.attrs['fill'],
opacity: node.attrs['opacity'],
translation: node.attrs['translation'],
scale: node.attrs['scale'],
path: path,
stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
'stroke-width': node.attrs['stroke-width'],
transform: node.transformations ? node.transformations.join(' ') : ''
}
}
if (object) {
svgdata.push(object);
}
}
}
return(JSON.stringify(svgdata));
//$('#output').val(JSON.stringify(svgdata));
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment