Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 12th, 2012  |  syntax: None  |  size: 3.63 KB  |  hits: 26  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // loop through the 'paper' variable from Raphael JS and build up the JSON object describing all images and paths within it.
  2. loadJSON = function(paper, json) {
  3.   var set = paper.set();
  4.   $.each(json, function(index, node) {
  5.     try {
  6.       var el = paper[node.type]().attr(node);
  7.       set.push(el);
  8.     } catch(e) {}
  9.   });
  10.   return set;
  11. };
  12.  
  13. buildJSON = function(paper) {
  14.     var svgdata = [];
  15.     /*svgdata.push({
  16.         width: 390,
  17.         height: 400
  18.     });*/
  19.  
  20.     for(var node = paper.bottom; node != null; node = node.next) {
  21.       if (node && node.type) {
  22.         switch(node.type) {
  23.           case "image":
  24.             var object = {
  25.               type: node.type,
  26.               width: node.attrs['width'],
  27.               height: node.attrs['height'],
  28.               x: node.attrs['x'],
  29.               y: node.attrs['y'],
  30.               src: node.attrs['src'],
  31.               transform: node.transformations ? node.transformations.join(' ') : ''
  32.             }
  33.             break;
  34.           case "ellipse":
  35.             var object = {
  36.               type: node.type,
  37.               rx: node.attrs['rx'],
  38.               ry: node.attrs['ry'],
  39.               cx: node.attrs['cx'],
  40.               cy: node.attrs['cy'],
  41.               stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
  42.               'stroke-width': node.attrs['stroke-width'],
  43.               fill: node.attrs['fill']
  44.             }
  45.             break;
  46.           case "rect":
  47.             var object = {
  48.               type: node.type,
  49.               x: node.attrs['x'],
  50.               y: node.attrs['y'],
  51.               width: node.attrs['width'],
  52.               height: node.attrs['height'],
  53.               stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
  54.               'stroke-width': node.attrs['stroke-width'],
  55.               fill: node.attrs['fill']
  56.             }
  57.             break;
  58.           case "text":
  59.             var object = {
  60.               type: node.type,
  61.               font: node.attrs['font'],
  62.               'font-family': node.attrs['font-family'],
  63.               'font-size': node.attrs['font-size'],
  64.               stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
  65.               fill: node.attrs['fill'] === 0 ? 'none' : node.attrs['fill'],
  66.               'stroke-width': node.attrs['stroke-width'],
  67.               x: node.attrs['x'],
  68.               y: node.attrs['y'],
  69.               text: node.attrs['text'],
  70.               'text-anchor': node.attrs['text-anchor']
  71.             }
  72.             break;
  73.  
  74.           case "path":
  75.             var path = "";
  76.  
  77.             $.each(node.attrs['path'], function(i, group) {
  78.               $.each(group,
  79.                 function(index, value) {
  80.                   if (index < 1) {
  81.                       path += value;
  82.                   } else {
  83.                     if (index == (group.length - 1)) {
  84.                       path += value;
  85.                     } else {
  86.                      path += value + ',';
  87.                     }
  88.                   }
  89.                 });
  90.             });
  91.  
  92.             var object = {
  93.               type: node.type,
  94.               fill: node.attrs['fill'],
  95.               opacity: node.attrs['opacity'],
  96.               translation: node.attrs['translation'],
  97.               scale: node.attrs['scale'],
  98.               path: path,
  99.               stroke: node.attrs['stroke'] === 0 ? 'none': node.attrs['stroke'],
  100.               'stroke-width': node.attrs['stroke-width'],
  101.               transform: node.transformations ? node.transformations.join(' ') : ''
  102.             }
  103.         }
  104.  
  105.         if (object) {
  106.           svgdata.push(object);
  107.         }
  108.       }
  109.     }
  110.  
  111.     return(JSON.stringify(svgdata));
  112.  
  113.     //$('#output').val(JSON.stringify(svgdata));
  114. };