mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Clean up SVG example scripts.
This commit is contained in:
Jürg Lehni
parent
ad76e65119
commit
c544083a4c
8 changed files with 181 additions and 263 deletions
|
|
@ -9,36 +9,27 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
|
||||
function 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';
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
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';
|
||||
|
||||
var topLeft = new Point(5, 400);
|
||||
var size = new Size(100, 50);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Oval(rectangle);
|
||||
path.fillColor = 'yellow';
|
||||
var topLeft = new Point(5, 400);
|
||||
var size = new Size(100, 50);
|
||||
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);
|
||||
path.fillColor = 'red';
|
||||
|
||||
var output = SvgExporter.exportProject(project);
|
||||
console.log(output);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild (output);
|
||||
}
|
||||
var path = new Path.Circle(new Point(50, 50), 25);
|
||||
path.fillColor = 'red';
|
||||
|
||||
// Reposition the path whenever the window is resized:
|
||||
function onResize(event) {
|
||||
initializePath();
|
||||
}
|
||||
var output = SvgExporter.exportProject(project);
|
||||
console.log(output);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild (output);
|
||||
</script>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,29 +9,21 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
|
||||
function initializePath() {
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
path.add(new Point(30, 30));
|
||||
path.add(new Point(100, 100));
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path = new Path();
|
||||
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 path2 = new Path(segments);
|
||||
path2.strokeColor = 'yellow';
|
||||
|
||||
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 segments = [new Point(30, 90), new Point(100, 150)];
|
||||
var path2 = new Path(segments);
|
||||
path2.strokeColor = 'yellow';
|
||||
|
||||
var output = SvgExporter.exportProject(project);
|
||||
console.log(output);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild (output);
|
||||
</script>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,49 +9,36 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
|
||||
function 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";
|
||||
|
||||
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);
|
||||
}
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var x1 = 5,
|
||||
x2 = 45,
|
||||
y1 = 5,
|
||||
y2 = 45;
|
||||
var line1 = new Path.Line([x1, y1], [x2, y2]);
|
||||
line1.strokeColor = "blue";
|
||||
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";
|
||||
|
||||
|
||||
|
||||
// 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>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,43 +9,34 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
|
||||
function 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);
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
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);
|
||||
|
||||
var center = new Point(100, 300);
|
||||
var sides = 10;
|
||||
var radius = 50;
|
||||
var decahedron = new Path.RegularPolygon(center, sides, radius);
|
||||
decahedron.fillColor = 'black';
|
||||
|
||||
var center = new Point(100, 400);
|
||||
var points = 6;
|
||||
var radius1 = 20;
|
||||
var radius2 = 50;
|
||||
var path = new Path.Star(center, points, radius1, radius2);
|
||||
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();
|
||||
}
|
||||
var center = new Point(100, 300);
|
||||
var sides = 10;
|
||||
var radius = 50;
|
||||
var decahedron = new Path.RegularPolygon(center, sides, radius);
|
||||
decahedron.fillColor = 'black';
|
||||
|
||||
var center = new Point(100, 400);
|
||||
var points = 6;
|
||||
var radius1 = 20;
|
||||
var radius2 = 50;
|
||||
var path = new Path.Star(center, points, radius1, radius2);
|
||||
path.fillColor = 'black';
|
||||
|
||||
var output = SvgExporter.exportProject(project);
|
||||
console.log(output);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild(output);
|
||||
</script>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,59 +9,48 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
|
||||
function 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";
|
||||
|
||||
var point2 = new Point(75, 75);
|
||||
var point22 = new Point(100, 100);
|
||||
var path2 = new Path.Rectangle(point2, point22);
|
||||
path2.strokeColor = 'red';
|
||||
path2.strokeWidth = '4';
|
||||
path2.fillColor = 'blue';
|
||||
path2.id = "square2";
|
||||
path2.strokeCap = "butt";
|
||||
path2.opacity = "1";
|
||||
|
||||
var point3 = new Point(150, 150);
|
||||
var size3 = new Size(50, 50);
|
||||
var rectangle3 = new Rectangle(point3, size3);
|
||||
var path3 = new Path.Rectangle(rectangle3);
|
||||
path3.strokeColor = 'blue';
|
||||
|
||||
var point4 = new Point(200, 200);
|
||||
var size4 = new Size(100, 100);
|
||||
var rectangle4 = new Rectangle(point4, size4);
|
||||
var cornerSize4 = new Size(30, 30);
|
||||
var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
|
||||
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 type="text/paperscript" canvas="canvas">
|
||||
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";
|
||||
|
||||
var point2 = new Point(75, 75);
|
||||
var point22 = new Point(100, 100);
|
||||
var path2 = new Path.Rectangle(point2, point22);
|
||||
path2.strokeColor = 'red';
|
||||
path2.strokeWidth = '4';
|
||||
path2.fillColor = 'blue';
|
||||
path2.id = "square2";
|
||||
path2.strokeCap = "butt";
|
||||
path2.opacity = "1";
|
||||
|
||||
var point3 = new Point(150, 150);
|
||||
var size3 = new Size(50, 50);
|
||||
var rectangle3 = new Rectangle(point3, size3);
|
||||
var path3 = new Path.Rectangle(rectangle3);
|
||||
path3.strokeColor = 'blue';
|
||||
|
||||
var point4 = new Point(200, 200);
|
||||
var size4 = new Size(100, 100);
|
||||
var rectangle4 = new Rectangle(point4, size4);
|
||||
var cornerSize4 = new Size(30, 30);
|
||||
var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
|
||||
path4.strokeColor= 'yellow';
|
||||
path4.fillColor='purple';
|
||||
|
||||
var output = SvgExporter.exportProject(project);
|
||||
console.log(output);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild(output);
|
||||
</script>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -8,45 +8,31 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500" height="350"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
|
||||
function initializePath() {
|
||||
|
||||
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();
|
||||
}
|
||||
<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';
|
||||
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';
|
||||
|
||||
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>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,34 +9,24 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
circlePath.strokeColor = 'black';
|
||||
circlePath.fillColor = 'white';
|
||||
|
||||
function initializePath() {
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
circlePath.strokeColor = 'black';
|
||||
circlePath.fillColor = 'white';
|
||||
var clones = 30;
|
||||
var angle = 360 / clones;
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
var output = SvgExporter.exportProject(project);
|
||||
console.log(output);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild (output);
|
||||
</script>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -9,28 +9,20 @@
|
|||
</head>
|
||||
<body>
|
||||
<canvas id="canvas" width="500px" height="500px"></canvas>
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
initializePath();
|
||||
function initializePath() {
|
||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||
path.style = {
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
};
|
||||
var copy = path.clone();
|
||||
copy.strokeColor = 'red';
|
||||
copy.rotate(-45);
|
||||
copy.scale(0.5);
|
||||
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();
|
||||
}
|
||||
<script type="text/paperscript" canvas="canvas">
|
||||
var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
|
||||
path.style = {
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
};
|
||||
var copy = path.clone();
|
||||
copy.strokeColor = 'red';
|
||||
copy.rotate(-45);
|
||||
copy.scale(0.5);
|
||||
var output = SvgExporter.exportProject(project);
|
||||
var test = document.getElementById('svg')
|
||||
test.innerHTML = "";
|
||||
test.appendChild (output);
|
||||
</script>
|
||||
<svg id="svg" style="width: 500px; height: 500px">
|
||||
</svg>
|
||||
|
|
|
|||
Loading…
Reference in a new issue