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

Simplify SVG export examples.

Browse source
This commit is contained in:
Jürg Lehni 2014-05-14 13:34:36 +02:00
parent f38d3ee674
commit 0060f629ae
19 changed files with 20 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,11 +23,10 @@
var path = new Path.Circle(new Point(50, 50), 25); var path = new Path.Circle(new Point(50, 50), 25);
path.fillColor = 'red'; path.fillColor = 'red';
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

3
examples/SVG Export/Clipping.html
View file

File diff suppressed because one or more lines are too long

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

@ -13,11 +13,10 @@
var path2 = new Path.Rectangle([50, 50], [200, 200]); var path2 = new Path.Rectangle([50, 50], [200, 200]);
var path3 = new Path.Rectangle([0, 0], [400, 400]); var path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3); new CompoundPath(path1, path2, path3);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

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

@ -19,11 +19,10 @@
var path3 = new Path(); var path3 = new Path();
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

3
examples/SVG Export/Gradients.html
View file

@ -43,11 +43,10 @@
rect.rotate(45).scale(0.7); rect.rotate(45).scale(0.7);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="300" height="600"></canvas> <canvas id="canvas" width="300" height="600"></canvas>
<svg id="svg" width="300" height="600"></svg>
</body> </body>
</html> </html>

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

@ -16,11 +16,10 @@
group.translate([100, 100]); group.translate([100, 100]);
group.scale(0.5); group.scale(0.5);
group.rotate(10); group.rotate(10);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

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

@ -32,11 +32,10 @@
line3.strokeColor = "yellow"; line3.strokeColor = "yellow";
line3.strokeWidth = "5"; line3.strokeWidth = "5";
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

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

@ -30,11 +30,10 @@
var path = new Path.Star(center, points, radius1, radius2); var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black'; path.fillColor = 'black';
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

3
examples/SVG Export/Raster.html
View file

File diff suppressed because one or more lines are too long

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

@ -44,11 +44,10 @@
path4.strokeColor= 'yellow'; path4.strokeColor= 'yellow';
path4.fillColor='purple'; path4.fillColor='purple';
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

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

@ -71,11 +71,10 @@
fillColor: '#99c' fillColor: '#99c'
}); });
document.getElementById('svg').appendChild(project.exportSVG({ matchShapes: true })); document.body.appendChild(project.exportSVG({ matchShapes: true }));
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

3
examples/SVG Export/Shapes.html
View file

@ -37,7 +37,7 @@
fillColor: 'yellow' fillColor: 'yellow'
}); });
rect.rotate(-20); rect.rotate(-20);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
var prev = null; var prev = null;
function onMouseMove(event) { function onMouseMove(event) {
@ -54,6 +54,5 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

3
examples/SVG Export/Symbols.html
View file

@ -18,11 +18,10 @@
p1.rotate(45); p1.rotate(45);
var p2 = symbol.place([300, 200]); var p2 = symbol.place([300, 200]);
p2.rotate(-30); p2.rotate(-30);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

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

@ -36,11 +36,10 @@
c.fillColor = colors[i]; c.fillColor = colors[i];
} }
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

3
examples/SVG Export/Tiger.html
View file

@ -13,12 +13,11 @@
project.importJSON(tiger); project.importJSON(tiger);
console.log('Load JSON', Date.now() - start); console.log('Load JSON', Date.now() - start);
var start = Date.now(); var start = Date.now();
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
console.log('Export SVG', Date.now() - start); console.log('Export SVG', Date.now() - start);
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="600" height="600"></canvas> <canvas id="canvas" width="600" height="600"></canvas>
<svg id="svg" width="600" height="600"></svg>
</body> </body>
</html> </html>

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

@ -20,11 +20,10 @@
clonedPath.rotate(angle * i, circlePath.bounds.topLeft); clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
}; };
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

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

@ -18,11 +18,10 @@
copy.rotate(-45); copy.rotate(-45);
copy.scale(0.5); copy.scale(0.5);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="500"></canvas> <canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body> </body>
</html> </html>

2
examples/Scripts/BlendModes.html
View file

@ -63,7 +63,7 @@
all.position = view.center; all.position = view.center;
var svg = project.exportSVG(); var svg = project.exportSVG();
document.getElementById('svg').appendChild(svg); document.body.appendChild(svg);
//console.log(svg, new XMLSerializer().serializeToString(svg)); //console.log(svg, new XMLSerializer().serializeToString(svg));
</script> </script>
</head> </head>

6
examples/Scripts/StrokeScaling.html
View file

@ -6,8 +6,7 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script> <script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
// view._context = new ProxyContext(view._context); view.zoom = 1.5;
// view.zoom = 1.25;
settings.applyMatrix = false; settings.applyMatrix = false;
var path = new Path.Circle({ var path = new Path.Circle({
center: view.center - [0, 140], center: view.center - [0, 140],
@ -56,11 +55,10 @@
hole.position += 15; hole.position += 15;
compound.scale(2, 1); compound.scale(2, 1);
document.getElementById('svg').appendChild(project.exportSVG()); document.body.appendChild(project.exportSVG());
</script> </script>
</head> </head>
<body> <body>
<canvas id="canvas" width="300" height="500"></canvas> <canvas id="canvas" width="300" height="500"></canvas>
<svg id="svg" width="300" height="500"></svg>
</body> </body>
</html> </html>