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

Clean up SVG example scripts.

Browse source
This commit is contained in:
Jürg Lehni 2012-11-05 23:27:17 -08:00
parent ad76e65119
commit c544083a4c
8 changed files with 181 additions and 263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,36 +9,27 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var topLeft = new Point(200, 200);
var size = new Size(150, 100);
function initializePath() { var rectangle = new Rectangle(topLeft, size);
var topLeft = new Point(200, 200); var path = new Path.Oval(rectangle);
var size = new Size(150, 100); path.fillColor = 'black';
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
path.fillColor = 'black';
var topLeft = new Point(5, 400); var topLeft = new Point(5, 400);
var size = new Size(100, 50); var size = new Size(100, 50);
var rectangle = new Rectangle(topLeft, size); var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle); var path = new Path.Oval(rectangle);
path.fillColor = 'yellow'; path.fillColor = 'yellow';
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';
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized: var output = SvgExporter.exportProject(project);
function onResize(event) { console.log(output);
initializePath(); var test = document.getElementById('svg')
} test.innerHTML = "";
test.appendChild (output);
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -9,29 +9,21 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var path = new Path();
path.strokeColor = 'black';
function initializePath() { path.add(new Point(30, 30));
var path = new Path(); path.add(new Point(100, 100));
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)]; var segments = [new Point(30, 90), new Point(100, 150)];
var path2 = new Path(segments); var path2 = new Path(segments);
path2.strokeColor = 'yellow'; path2.strokeColor = 'yellow';
var output = SvgExporter.exportProject(project); var output = SvgExporter.exportProject(project);
console.log(output); console.log(output);
var test = document.getElementById('svg') var test = document.getElementById('svg')
test.innerHTML = ""; test.innerHTML = "";
test.appendChild (output); test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -9,49 +9,36 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var x1 = 5,
x2 = 45,
function initializePath() { y1 = 5,
var x1 = 5, y2 = 45;
x2 = 45, var line1 = new Path.Line([x1, y1], [x2, y2]);
y1 = 5, line1.strokeColor = "blue";
y2 = 45; line1.strokeWidth = "10";
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue"; var x3 = 20,
line1.strokeWidth = "10"; x4 = 99,
y3 = 20,
var x3 = 20, y4 = 77;
x4 = 99, var line2 = new Path.Line([x3, y3], [x4, y4]);
y3 = 20, line2.strokeColor = "red";
y4 = 77; line2.strokeWidth = "2";
var line2 = new Path.Line([x3, y3], [x4, y4]);
line2.strokeColor = "red";
line2.strokeWidth = "2";
var x5 = 50,
x6 = 200,
y5 = 55,
y6 = 300;
var line3 = new Path.Line([x5, y5], [x6, y6]);
line3.strokeColor = "yellow";
line3.strokeWidth = "5";
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
var x5 = 50,
x6 = 200,
// Reposition the path whenever the window is resized: y5 = 55,
function onResize(event) { y6 = 300;
initializePath(); var line3 = new Path.Line([x5, y5], [x6, y6]);
} line3.strokeColor = "yellow";
line3.strokeWidth = "5";
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild(output);
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -9,43 +9,34 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var center = new Point(100, 100);
var sides = 3;
function initializePath() { var radius = 50;
var center = new Point(100, 100); var triangle = new Path.RegularPolygon(center, sides, radius);
var sides = 3; triangle.fillColor = 'black';
var radius = 50; copy = triangle.clone();
var triangle = new Path.RegularPolygon(center, sides, radius); copy.strokeColor = 'blue';
triangle.fillColor = 'black'; copy.rotate(45);
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300); var center = new Point(100, 300);
var sides = 10; var sides = 10;
var radius = 50; var radius = 50;
var decahedron = new Path.RegularPolygon(center, sides, radius); var decahedron = new Path.RegularPolygon(center, sides, radius);
decahedron.fillColor = 'black'; decahedron.fillColor = 'black';
var center = new Point(100, 400); var center = new Point(100, 400);
var points = 6; var points = 6;
var radius1 = 20; var radius1 = 20;
var radius2 = 50; var radius2 = 50;
var path = new Path.Star(center, points, radius1, radius2); var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black'; path.fillColor = 'black';
var output = SvgExporter.exportProject(project); var output = SvgExporter.exportProject(project);
console.log(output); console.log(output);
var test = document.getElementById('svg') var test = document.getElementById('svg')
test.innerHTML = ""; test.innerHTML = "";
test.appendChild (output); test.appendChild(output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -9,59 +9,48 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var point1 = new Point(10, 10);
var size1 = new Size(50, 50);
function initializePath() { var rectangle1 = new Rectangle(point1, size1);
var point1 = new Point(10, 10); var path1 = new Path.Rectangle(rectangle1);
var size1 = new Size(50, 50); path1.strokeColor = 'black';
var rectangle1 = new Rectangle(point1, size1); path1.fillColor = 'red';
var path1 = new Path.Rectangle(rectangle1); path1.id = "square1";
path1.strokeColor = 'black'; path1.strokeCap = "square";
path1.fillColor = 'red'; path1.opacity = ".1";
path1.id = "square1"; path1.dashArray = [5, 2];
path1.strokeCap = "square"; path1.dashOffset = "0";
path1.opacity = ".1";
path1.dashArray = [5, 2]; var point2 = new Point(75, 75);
path1.dashOffset = "0"; var point22 = new Point(100, 100);
var path2 = new Path.Rectangle(point2, point22);
var point2 = new Point(75, 75); path2.strokeColor = 'red';
var point22 = new Point(100, 100); path2.strokeWidth = '4';
var path2 = new Path.Rectangle(point2, point22); path2.fillColor = 'blue';
path2.strokeColor = 'red'; path2.id = "square2";
path2.strokeWidth = '4'; path2.strokeCap = "butt";
path2.fillColor = 'blue'; path2.opacity = "1";
path2.id = "square2";
path2.strokeCap = "butt"; var point3 = new Point(150, 150);
path2.opacity = "1"; var size3 = new Size(50, 50);
var rectangle3 = new Rectangle(point3, size3);
var point3 = new Point(150, 150); var path3 = new Path.Rectangle(rectangle3);
var size3 = new Size(50, 50); path3.strokeColor = 'blue';
var rectangle3 = new Rectangle(point3, size3);
var path3 = new Path.Rectangle(rectangle3); var point4 = new Point(200, 200);
path3.strokeColor = 'blue'; var size4 = new Size(100, 100);
var rectangle4 = new Rectangle(point4, size4);
var point4 = new Point(200, 200); var cornerSize4 = new Size(30, 30);
var size4 = new Size(100, 100); var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
var rectangle4 = new Rectangle(point4, size4); path4.strokeColor= 'yellow';
var cornerSize4 = new Size(30, 30); path4.fillColor='purple';
var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow'; var output = SvgExporter.exportProject(project);
path4.fillColor='purple'; console.log(output);
var test = document.getElementById('svg')
var output = SvgExporter.exportProject(project); test.innerHTML = "";
console.log(output); test.appendChild(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -8,45 +8,31 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500" height="350"></canvas> <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));
function initializePath() { text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(50, 100));
text.fillColor = 'black';
text.content = 'This is a test';
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
radius = 50;
center = new Point(100,100);
var path2 = new Path.Circle(center,radius);
path2.strokeColor = 'black';
point = new Point(120,100);
path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
for (var i in path2.segments) {
var p = path2.segments[i].point;
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
var output = SvgExporter.exportProject(project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
var path2 = new Path.Circle(new Point(100, 100), 50);
path2.strokeColor = 'black';
path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
for (var i in path2.segments) {
var p = path2.segments[i].point;
var c = new Path.Circle(p, 2);
c.fillColor = colors[i];
}
var output = SvgExporter.exportProject(project);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -9,34 +9,24 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
function initializePath() { var clones = 30;
var circlePath = new Path.Circle(new Point(280, 100), 25); var angle = 360 / clones;
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';
var clones = 30; for(var i = 0; i < clones; i++) {
var angle = 360 / clones; var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
for(var i = 0; i < clones; i++) { var output = SvgExporter.exportProject(project);
var clonedPath = circlePath.clone(); console.log(output);
clonedPath.rotate(angle * i, circlePath.bounds.topLeft); var test = document.getElementById('svg')
}; test.innerHTML = "";
test.appendChild (output);
var output = SvgExporter.exportProject(project);
console.log(output);
var test = document.getElementById('svg')
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

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

@ -9,28 +9,20 @@
</head> </head>
<body> <body>
<canvas id="canvas" width="500px" height="500px"></canvas> <canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
initializePath(); var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
function initializePath() { path.style = {
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50)); fillColor: 'white',
path.style = { strokeColor: 'black'
fillColor: 'white', };
strokeColor: 'black' var copy = path.clone();
}; copy.strokeColor = 'red';
var copy = path.clone(); copy.rotate(-45);
copy.strokeColor = 'red'; copy.scale(0.5);
copy.rotate(-45); var output = SvgExporter.exportProject(project);
copy.scale(0.5); var test = document.getElementById('svg')
var output = SvgExporter.exportProject(project); test.innerHTML = "";
var test = document.getElementById('svg') test.appendChild (output);
test.innerHTML = "";
test.appendChild (output);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>