scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-19 14:10:14 -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);
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
path.fillColor = 'black';
function initializePath() { var topLeft = new Point(5, 400);
var topLeft = new Point(200, 200); var size = new Size(100, 50);
var size = new Size(150, 100); 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 = 'black';
var topLeft = new Point(5, 400); var path = new Path.Circle(new Point(50, 50), 25);
var size = new Size(100, 50); path.fillColor = 'red';
var rectangle = new Rectangle(topLeft, size);
var path = new Path.Oval(rectangle);
path.fillColor = 'yellow';
var path = new Path.Circle(new Point(50, 50), 25); var output = SvgExporter.exportProject(project);
path.fillColor = 'red'; 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>

34
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';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
function initializePath() { var segments = [new Point(30, 90), new Point(100, 150)];
var path = new Path(); var path2 = new Path(segments);
path.strokeColor = 'black'; path2.strokeColor = 'yellow';
path.add(new Point(30, 30));
path.add(new Point(100, 100));
var segments = [new Point(30, 90), new Point(100, 150)]; var output = SvgExporter.exportProject(project);
var path2 = new Path(segments); console.log(output);
path2.strokeColor = 'yellow'; var test = document.getElementById('svg')
test.innerHTML = "";
var output = SvgExporter.exportProject(project); test.appendChild (output);
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>

67
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,
y1 = 5,
y2 = 45;
var line1 = new Path.Line([x1, y1], [x2, y2]);
line1.strokeColor = "blue";
line1.strokeWidth = "10";
function initializePath() { var x3 = 20,
var x1 = 5, x4 = 99,
x2 = 45, y3 = 20,
y1 = 5, y4 = 77;
y2 = 45; var line2 = new Path.Line([x3, y3], [x4, y4]);
var line1 = new Path.Line([x1, y1], [x2, y2]); line2.strokeColor = "red";
line1.strokeColor = "blue"; line2.strokeWidth = "2";
line1.strokeWidth = "10";
var x3 = 20,
x4 = 99,
y3 = 20,
y4 = 77;
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);
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
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);
</script> </script>
<svg id="svg" style="width: 500px; height: 500px"> <svg id="svg" style="width: 500px; height: 500px">
</svg> </svg>

59
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;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
function initializePath() { var center = new Point(100, 300);
var center = new Point(100, 100); var sides = 10;
var sides = 3; var radius = 50;
var radius = 50; var decahedron = new Path.RegularPolygon(center, sides, radius);
var triangle = new Path.RegularPolygon(center, sides, radius); decahedron.fillColor = 'black';
triangle.fillColor = 'black';
copy = triangle.clone();
copy.strokeColor = 'blue';
copy.rotate(45);
var center = new Point(100, 300); var center = new Point(100, 400);
var sides = 10; var points = 6;
var radius = 50; var radius1 = 20;
var decahedron = new Path.RegularPolygon(center, sides, radius); var radius2 = 50;
decahedron.fillColor = 'black'; var path = new Path.Star(center, points, radius1, radius2);
path.fillColor = 'black';
var center = new Point(100, 400); var output = SvgExporter.exportProject(project);
var points = 6; console.log(output);
var radius1 = 20; var test = document.getElementById('svg')
var radius2 = 50; test.innerHTML = "";
var path = new Path.Star(center, points, radius1, radius2); test.appendChild(output);
path.fillColor = 'black';
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>

87
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);
var rectangle1 = new Rectangle(point1, size1);
var path1 = new Path.Rectangle(rectangle1);
path1.strokeColor = 'black';
path1.fillColor = 'red';
path1.id = "square1";
path1.strokeCap = "square";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
function initializePath() { var point2 = new Point(75, 75);
var point1 = new Point(10, 10); var point22 = new Point(100, 100);
var size1 = new Size(50, 50); var path2 = new Path.Rectangle(point2, point22);
var rectangle1 = new Rectangle(point1, size1); path2.strokeColor = 'red';
var path1 = new Path.Rectangle(rectangle1); path2.strokeWidth = '4';
path1.strokeColor = 'black'; path2.fillColor = 'blue';
path1.fillColor = 'red'; path2.id = "square2";
path1.id = "square1"; path2.strokeCap = "butt";
path1.strokeCap = "square"; path2.opacity = "1";
path1.opacity = ".1";
path1.dashArray = [5, 2];
path1.dashOffset = "0";
var point2 = new Point(75, 75); var point3 = new Point(150, 150);
var point22 = new Point(100, 100); var size3 = new Size(50, 50);
var path2 = new Path.Rectangle(point2, point22); var rectangle3 = new Rectangle(point3, size3);
path2.strokeColor = 'red'; var path3 = new Path.Rectangle(rectangle3);
path2.strokeWidth = '4'; path3.strokeColor = 'blue';
path2.fillColor = 'blue';
path2.id = "square2";
path2.strokeCap = "butt";
path2.opacity = "1";
var point3 = new Point(150, 150); var point4 = new Point(200, 200);
var size3 = new Size(50, 50); var size4 = new Size(100, 100);
var rectangle3 = new Rectangle(point3, size3); var rectangle4 = new Rectangle(point4, size4);
var path3 = new Path.Rectangle(rectangle3); var cornerSize4 = new Size(30, 30);
path3.strokeColor = 'blue'; var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
var point4 = new Point(200, 200); var output = SvgExporter.exportProject(project);
var size4 = new Size(100, 100); console.log(output);
var rectangle4 = new Rectangle(point4, size4); var test = document.getElementById('svg')
var cornerSize4 = new Size(30, 30); test.innerHTML = "";
var path4 = new Path.RoundRectangle(rectangle4, cornerSize4); test.appendChild(output);
path4.strokeColor= 'yellow';
path4.fillColor='purple';
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>

56
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));
text.fillColor = 'black';
text.content = 'This is a test';
function initializePath() { var text = new PointText(new Point(100, 150));
text.fillColor = 'red';
text.strokeWidth = '4';
text.content = 'This is also a test';
var text = new PointText(new Point(50, 100)); var path2 = new Path.Circle(new Point(100, 100), 50);
text.fillColor = 'black'; path2.strokeColor = 'black';
text.content = 'This is a test'; path2.shear(.5, .5);
colors = ['red', 'blue', 'green', 'orange'];
var text = new PointText(new Point(100, 150)); for (var i in path2.segments) {
text.fillColor = 'red'; var p = path2.segments[i].point;
text.strokeWidth = '4'; var c = new Path.Circle(p, 2);
text.content = 'This is also a test'; c.fillColor = colors[i];
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: var output = SvgExporter.exportProject(project);
function onResize(event) { var test = document.getElementById('svg')
initializePath(); 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;
var angle = 360 / clones;
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
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();
}
for(var i = 0; i < clones; i++) {
var clonedPath = circlePath.clone();
clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};
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>

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>