scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Import and export Item#data in SVG as well.

Browse source 
Closes #188.
This commit is contained in:
Jürg Lehni 2013-04-09 17:53:26 -07:00
parent e2a118e43e
commit e9aad895ae
4 changed files with 24 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/SVG Export/Rotated Primitives.html
View file

@ -29,7 +29,21 @@
var rect = new Path.RoundRectangle(250, 20, 200, 300, 40, 20); var rect = new Path.RoundRectangle(250, 20, 200, 300, 40, 20);
rect.fillColor = 'yellow'; rect.fillColor = 'yellow';
rect.rotate(-20); rect.rotate(-20);
rect.data = {
string: '----',
number: 1234,
array: ['a ray', 'some rays'],
bool: true,
nil: null,
point: new Point(12, 34),
size: new Size(12, 34),
rectangle: new Rectangle([12, 34], [56, 78]),
deep: {
deeper: {
deepest: true
}
}
};
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head> </head>

5
examples/SVG Import/Rect Testing.html
View file

@ -6,12 +6,13 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.importSvg(document.getElementById('svg')); var group = project.importSvg(document.getElementById('svg'));
console.log(JSON.stringify(group.children[0].data));
</script> </script>
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" id="svg">
<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" /> <rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" data-paper-data='{"string":"----","number":1234,"array":["a ray","some rays"],"bool":true,"nil":null,"point":["Point",12,34],"size":["Size",12,34],"rectangle":["Rectangle",12,34,56,78],"deep":{"deeper":{"deepest":true}}}' />
<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" /> <rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" /> <rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" /> <rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />

2
src/svg/SvgExport.js
View file

@ -482,6 +482,8 @@ new function() {
function exportSvg(item) { function exportSvg(item) {
var exporter = exporters[item._type], var exporter = exporters[item._type],
node = exporter && exporter(item, item._type); node = exporter && exporter(item, item._type);
if (node && item._data)
node.setAttribute('data-paper-data', JSON.stringify(item._data));
return node && applyStyle(item, node); return node && applyStyle(item, node);
} }

5
src/svg/SvgImport.js
View file

@ -453,10 +453,13 @@ new function() {
function importSvg(node, clearDefs) { function importSvg(node, clearDefs) {
var type = node.nodeName, var type = node.nodeName,
importer = importers[type], importer = importers[type],
item = importer && importer(node, type); item = importer && importer(node, type),
data = node.getAttribute('data-paper-data');
// See importGroup() for an explanation of this filtering: // See importGroup() for an explanation of this filtering:
if (item && item._type !== 'group') if (item && item._type !== 'group')
item = applyAttributes(item, node); item = applyAttributes(item, node);
if (item && data)
item._data = JSON.parse(data);
// Clear definitions at the end of import? // Clear definitions at the end of import?
if (clearDefs) if (clearDefs)
definitions = {}; definitions = {};