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

Improve HTML in SVG Exporting examples.

Browse source
This commit is contained in:
Jürg Lehni 2013-02-10 18:45:50 -08:00
parent f06701055d
commit 09e5cc2bda
13 changed files with 41 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,10 +5,6 @@
<title>Circle Testing</title> <title>Circle Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var topLeft = new Point(200, 200); var topLeft = new Point(200, 200);
var size = new Size(150, 100); var size = new Size(150, 100);
@ -27,6 +23,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

7
examples/SVG Export/Compound Path.html
View file

@ -5,10 +5,6 @@
<title>Compound Path</title> <title>Compound Path</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
project.currentStyle.fillColor = 'black'; project.currentStyle.fillColor = 'black';
var path1 = new Path.Rectangle([200, 200], [100, 100]); var path1 = new Path.Rectangle([200, 200], [100, 100]);
@ -17,6 +13,9 @@
new CompoundPath(path1, path2, path3); new CompoundPath(path1, path2, path3);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Empty Path Testing</title> <title>Empty Path Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var path = new Path(); var path = new Path();
path.strokeColor = 'black'; path.strokeColor = 'black';
@ -23,6 +19,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

9
examples/SVG Export/Group Transform.html
View file

@ -2,13 +2,9 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transform Testing</title> <title>Group Transform</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var circle1 = new Path.Circle(new Point(100, 100), 50); var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = 'red'; circle1.fillColor = 'red';
@ -20,6 +16,9 @@
group.rotate(10); group.rotate(10);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Line Testing</title> <title>Line Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var x1 = 5, var x1 = 5,
x2 = 45, x2 = 45,
@ -36,6 +32,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Random Path Testing</title> <title>Random Path Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var center = new Point(100, 100); var center = new Point(100, 100);
var sides = 3; var sides = 3;
@ -34,6 +30,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

9
examples/SVG Export/Raster.html
View file

File diff suppressed because one or more lines are too long

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

@ -5,10 +5,6 @@
<title>Rectangle Testing</title> <title>Rectangle Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var point1 = new Point(10, 10); var point1 = new Point(10, 10);
var size1 = new Size(50, 50); var size1 = new Size(50, 50);
@ -48,6 +44,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Rotated Primitives</title> <title>Rotated Primitives</title>
<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>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
// This "arbitrary" shape triggered rectangles in the original code, // This "arbitrary" shape triggered rectangles in the original code,
// since point2 is as far from point0 as point3 is from point1. // since point2 is as far from point0 as point3 is from point1.
@ -36,6 +32,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

6
examples/SVG Export/Symbols.html
View file

@ -5,9 +5,6 @@
<title>Symbols</title> <title>Symbols</title>
<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>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var ellipse = new Path.Ellipse({ var ellipse = new Path.Ellipse({
from: [0, 0], from: [0, 0],
@ -21,6 +18,9 @@
p2.rotate(-30); p2.rotate(-30);
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Text Testing</title> <title>Text Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var text = new PointText(new Point(50, 100)); var text = new PointText(new Point(50, 100));
text.fillColor = 'black'; text.fillColor = 'black';
@ -40,6 +36,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Transform Testing</title> <title>Transform Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var circlePath = new Path.Circle(new Point(280, 100), 25); var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black'; circlePath.strokeColor = 'black';
@ -24,6 +20,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>

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

@ -5,10 +5,6 @@
<title>Rectangle Testing</title> <title>Rectangle Testing</title>
<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>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50)); var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
path.style = { path.style = {
@ -22,6 +18,9 @@
document.getElementById('svg').appendChild(project.exportSvg()); document.getElementById('svg').appendChild(project.exportSvg());
</script> </script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<svg id="svg" style="width: 500px; height: 500px"></svg> <svg id="svg" style="width: 500px; height: 500px"></svg>
</body> </body>
</html> </html>