mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Improve HTML in SVG Exporting examples.
This commit is contained in:
Jürg Lehni
parent
f06701055d
commit
09e5cc2bda
13 changed files with 41 additions and 53 deletions
|
|
@ -5,10 +5,6 @@
|
|||
<title>Circle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var topLeft = new Point(200, 200);
|
||||
var size = new Size(150, 100);
|
||||
|
|
@ -27,6 +23,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Compound Path</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
project.currentStyle.fillColor = 'black';
|
||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||
|
|
@ -17,6 +13,9 @@
|
|||
new CompoundPath(path1, path2, path3);
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Empty Path Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
|
|
@ -23,6 +19,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,13 +2,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<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">
|
||||
<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">
|
||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||
circle1.fillColor = 'red';
|
||||
|
|
@ -20,6 +16,9 @@
|
|||
group.rotate(10);
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Line Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var x1 = 5,
|
||||
x2 = 45,
|
||||
|
|
@ -36,6 +32,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Random Path Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var center = new Point(100, 100);
|
||||
var sides = 3;
|
||||
|
|
@ -34,6 +30,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -5,10 +5,6 @@
|
|||
<title>Rectangle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var point1 = new Point(10, 10);
|
||||
var size1 = new Size(50, 50);
|
||||
|
|
@ -48,6 +44,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Rotated Primitives</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
// This "arbitrary" shape triggered rectangles in the original code,
|
||||
// since point2 is as far from point0 as point3 is from point1.
|
||||
|
|
@ -36,6 +32,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,9 +5,6 @@
|
|||
<title>Symbols</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var ellipse = new Path.Ellipse({
|
||||
from: [0, 0],
|
||||
|
|
@ -21,6 +18,9 @@
|
|||
p2.rotate(-30);
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Text Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var text = new PointText(new Point(50, 100));
|
||||
text.fillColor = 'black';
|
||||
|
|
@ -40,6 +36,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500" height="500"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Transform Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
circlePath.strokeColor = 'black';
|
||||
|
|
@ -24,6 +20,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,10 +5,6 @@
|
|||
<title>Rectangle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<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">
|
||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||
path.style = {
|
||||
|
|
@ -22,6 +18,9 @@
|
|||
|
||||
document.getElementById('svg').appendChild(project.exportSvg());
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<svg id="svg" style="width: 500px; height: 500px"></svg>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue