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

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);
path.fillColor = 'red';
document.getElementById('svg').appendChild(project.exportSVG());
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body>
</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 path3 = new Path.Rectangle([0, 0], [400, 400]);
new CompoundPath(path1, path2, path3);
document.getElementById('svg').appendChild(project.exportSVG());
document.body.appendChild(project.exportSVG());
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<svg id="svg" width="500" height="500"></svg>
</body>
</html>

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

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

3
examples/SVG Export/Gradients.html
View file

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

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

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

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

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

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

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

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

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

3
examples/SVG Export/Shapes.html
View file

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

3
examples/SVG Export/Symbols.html
View file

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

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

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

3
examples/SVG Export/Tiger.html
View file

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

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

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

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

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

2
examples/Scripts/BlendModes.html
View file

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

6
examples/Scripts/StrokeScaling.html
View file

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