scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-29 09:22:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add methods to Item and Project to directly use SvgImporter / Exporter functionality.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-06 12:49:12 -08:00
parent c70948c762
commit 88e6ac09d7
21 changed files with 71 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
examples/SVG Export/Circle Testing.html
View file

@ -25,13 +25,8 @@
var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red';
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

9
examples/SVG Export/Empty Path Testing.html
View file

@ -19,13 +19,8 @@
var path2 = new Path(segments);
path2.strokeColor = 'yellow';
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

9
examples/SVG Export/Line Testing.html
View file

@ -34,13 +34,8 @@
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild(output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

9
examples/SVG Export/Random Path Testing.html
View file

@ -32,13 +32,8 @@
var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild(output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

9
examples/SVG Export/Rect and Attribute Testing.html
View file

@ -46,13 +46,8 @@
path4.strokeColor= 'yellow';
path4.fillColor='purple';
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild(output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

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

@ -34,12 +34,8 @@
rect.fillColor = 'yellow';
rect.rotate(-20);
var output = SvgExporter.exportProject(project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

8
examples/SVG Export/Text Testing.html
View file

@ -38,12 +38,8 @@
c.fillColor = colors[i];
}
var output = SvgExporter.exportProject(project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

9
examples/SVG Export/Transform Test 1.html
View file

@ -22,13 +22,8 @@
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

9
examples/SVG Export/Transform Test 2.html
View file

@ -19,12 +19,9 @@
copy.strokeColor = 'red';
copy.rotate(-45);
copy.scale(0.5);
var output = SvgExporter.exportProject(project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
document.getElementById('svg').appendChild(project.exportSvg());
</script>
<svg id="svg" style="width: 500px; height: 500px">
</svg>
<svg id="svg" style="width: 500px; height: 500px"></svg>
</body>
</html>

7
examples/SVG Import/Circle and Ellipse Testing.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Line Testing.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Multiple Paths Test 1.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Multiple Paths Test 2.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Nested Groups Test.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

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

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Testing.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Text Testing.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

7
examples/SVG Import/Transform Testing.html
View file

@ -6,12 +6,7 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
project.currentStyle = {
// strokeColor: 'black',
// strokeWidth: 2,
// strokeCap: 'round'
};
SvgImporter.importSvg(document.getElementById('svg'));
project.importSvg(document.getElementById('svg'));
</script>
</head>
<body>

12
src/svg/SvgExporter.js
View file

@ -392,3 +392,15 @@ var SvgExporter = this.SvgExporter = new function() {
}
};
};
Item.inject({
exportSvg: function() {
return SvgExporter.exportItem(this);
}
});
Project.inject({
exportSvg: function() {
return SvgExporter.exportProject(this);
}
});

13
src/svg/SvgImporter.js
View file

@ -435,3 +435,16 @@ var SvgImporter = this.SvgImporter = new function() {
}
};
};
Item.inject({
importSvg: function(svg) {
return this.addChild(SvgExporter.importSvg(svg));
}
});
Project.inject({
importSvg: function(svg) {
this.activate();
return SvgImporter.importSvg(svg);
}
});

36
test/tests/SvgImporter.js
View file

@ -30,7 +30,7 @@ test('make an svg line', function() {
shape.setAttribute('x2', x2);
shape.setAttribute('y2', y2);
var importedLine = SvgImporter.importSvg(shape);
var importedLine = project.importSvg(shape);
var line = new Path.Line([x1, y1], [x2, y2]);
@ -45,7 +45,7 @@ test('make an svg line with invalid values', function() {
shape.setAttribute('x2', null);
shape.setAttribute('y2', null);
var importedLine = SvgImporter.importSvg(shape);
var importedLine = project.importSvg(shape);
var line = new Path.Line([0, 0], [0, 0]);
@ -64,7 +64,7 @@ test('compare rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var importedRectangle = SvgImporter.importSvg(shape);
var importedRectangle = project.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -87,7 +87,7 @@ test('compare negative rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var importedRectangle = SvgImporter.importSvg(shape);
var importedRectangle = project.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
var rectangle = new Rectangle(topLeft, size);
@ -106,7 +106,7 @@ test('compare invalid rectangle values', function() {
shape.setAttribute('width', null);
shape.setAttribute('height', null);
var importedRectangle = SvgImporter.importSvg(shape);
var importedRectangle = project.importSvg(shape);
var topLeft = new Point(0, 0);
var size = new Size(0, 0);
@ -132,7 +132,7 @@ test('compare round rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var importedRectangle = SvgImporter.importSvg(shape);
var importedRectangle = project.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -159,7 +159,7 @@ test('compare negative round rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var importedRectangle = SvgImporter.importSvg(shape);
var importedRectangle = project.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -186,7 +186,7 @@ test('compare invalid round rectangle values', function() {
shape.setAttribute('width', width);
shape.setAttribute('height', height);
var importedRectangle = SvgImporter.importSvg(shape);
var importedRectangle = project.importSvg(shape);
var topLeft = new Point(x, y);
var size = new Size(width, height);
@ -209,7 +209,7 @@ test('compare ellipse values', function() {
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var importedEllipse = SvgImporter.importSvg(shape);
var importedEllipse = project.importSvg(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -234,7 +234,7 @@ test('compare negative ellipse values', function() {
shape.setAttribute('rx', rx);
shape.setAttribute('ry', ry);
var importedEllipse = SvgImporter.importSvg(shape);
var importedEllipse = project.importSvg(shape);
var center = new Point(cx, cy);
var offset = new Point(rx, ry);
@ -255,7 +255,7 @@ test('compare invalid ellipse values', function() {
shape.setAttribute('rx', null);
shape.setAttribute('ry', null);
var importedEllipse = SvgImporter.importSvg(shape);
var importedEllipse = project.importSvg(shape);
var center = new Point(0, 0);
var offset = new Point(0, 0);
@ -278,7 +278,7 @@ test('compare circle values', function() {
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var importedCircle = SvgImporter.importSvg(shape);
var importedCircle = project.importSvg(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
@ -296,7 +296,7 @@ test('compare negative circle values', function() {
shape.setAttribute('cy', cy);
shape.setAttribute('r', r);
var importedCircle = SvgImporter.importSvg(shape);
var importedCircle = project.importSvg(shape);
var center = new Point(cx, cy);
var circle = new Path.Circle(center, r);
@ -312,7 +312,7 @@ test('compare invalid circle values', function() {
shape.setAttribute('cy', null);
shape.setAttribute('r', null);
var importedCircle = SvgImporter.importSvg(shape);
var importedCircle = project.importSvg(shape);
var center = new Point(0, 0);
var circle = new Path.Circle(center, 0);
@ -327,7 +327,7 @@ test('compare polygon values', function() {
var svgpoints = "100,10 40,180 190,60 10,60 160,180";
shape.setAttribute('points', svgpoints);
var importedPolygon = SvgImporter.importSvg(shape);
var importedPolygon = project.importSvg(shape);
var poly = new Path();
var points = shape.points;
@ -348,7 +348,7 @@ test('compare negative polygon values', function() {
var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
shape.setAttribute('points', svgpoints);
var importedPolygon = SvgImporter.importSvg(shape);
var importedPolygon = project.importSvg(shape);
var poly = new Path();
var points = shape.points;
@ -369,7 +369,7 @@ test('compare polyline values', function() {
var svgpoints = "5,5 45,45 5,45 45,5";
shape.setAttribute('points', svgpoints);
var importedPolyline = SvgImporter.importSvg(shape);
var importedPolyline = project.importSvg(shape);
var poly = new Path();
var points = shape.points;
@ -390,7 +390,7 @@ test('compare negative polyline values', function() {
var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
shape.setAttribute('points', svgpoints);
var importedPolyline = SvgImporter.importSvg(shape);
var importedPolyline = project.importSvg(shape);
var poly = new Path();
var points = shape.points;