mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-29 09:22:22 -05:00
Add a couple of JSON examples.
For now just the old SVG ones ported over, but we do need better ones.
This commit is contained in:
Jürg Lehni
parent
366524d0a7
commit
e477c49d1e
14 changed files with 490 additions and 0 deletions
34
examples/JSON/Circle Testing.html
Normal file
34
examples/JSON/Circle Testing.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Circle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var topLeft = new Point(200, 200);
|
||||
var size = new Size(150, 100);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Ellipse(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.Ellipse(rectangle);
|
||||
path.fillColor = 'yellow';
|
||||
|
||||
var path = new Path.Circle(new Point(50, 50), 25);
|
||||
path.fillColor = 'red';
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
25
examples/JSON/Compound Path.html
Normal file
25
examples/JSON/Compound Path.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Compound Path</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
project.currentStyle.fillColor = 'black';
|
||||
var path1 = new Path.Rectangle([200, 200], [100, 100]);
|
||||
var path2 = new Path.Rectangle([50, 50], [200, 200]);
|
||||
var path3 = new Path.Rectangle([0, 0], [400, 400]);
|
||||
new CompoundPath(path1, path2, path3);
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
31
examples/JSON/Empty Path Testing.html
Normal file
31
examples/JSON/Empty Path Testing.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Empty Path Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
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 path3 = new Path();
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
27
examples/JSON/Gradients.html
Normal file
27
examples/JSON/Gradients.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Gradients</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
var gradient = new Gradient([ 'yellow', 'red', 'black'], 'radial');
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
path.strokeColor = 'black';
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
28
examples/JSON/Group Transform.html
Normal file
28
examples/JSON/Group Transform.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Group Transform</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var circle1 = new Path.Circle(new Point(100, 100), 50);
|
||||
circle1.fillColor = 'red';
|
||||
var circle2 = new Path.Circle(new Point(200, 100), 50);
|
||||
circle2.fillColor = 'blue';
|
||||
var group = new Group(circle1, circle2);
|
||||
group.translate([100, 100]);
|
||||
group.scale(0.5);
|
||||
group.rotate(10);
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
44
examples/JSON/Line Testing.html
Normal file
44
examples/JSON/Line Testing.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Line Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
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";
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
42
examples/JSON/Random Path Testing.html
Normal file
42
examples/JSON/Random Path Testing.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Random Path Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
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';
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
29
examples/JSON/Raster.html
Normal file
29
examples/JSON/Raster.html
Normal file
File diff suppressed because one or more lines are too long
56
examples/JSON/Rect and Attribute Testing.html
Normal file
56
examples/JSON/Rect and Attribute Testing.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
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';
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
44
examples/JSON/Rotated Primitives.html
Normal file
44
examples/JSON/Rotated Primitives.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Rotated Primitives</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
// This "arbitrary" shape triggered rectangles in the original code,
|
||||
// since point2 is as far from point0 as point3 is from point1.
|
||||
var path = new Path();
|
||||
path.moveTo(0, 0);
|
||||
path.lineTo(50, 50);
|
||||
path.lineTo(100, 100);
|
||||
path.lineTo(-50, 150);
|
||||
path.closed = true;
|
||||
path.strokeColor = 'black';
|
||||
path.position += 100;
|
||||
|
||||
var rect = new Path.Rectangle(200, 100, 200, 300);
|
||||
rect.fillColor = 'red';
|
||||
rect.rotate(40);
|
||||
|
||||
var circle = new Path.Circle(200, 300, 100);
|
||||
circle.fillColor = 'green';
|
||||
circle.scale(0.5, 1);
|
||||
circle.rotate(40);
|
||||
|
||||
var rect = new Path.RoundRectangle(250, 20, 200, 300, 40, 20);
|
||||
rect.fillColor = 'yellow';
|
||||
rect.rotate(-20);
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
30
examples/JSON/Symbols.html
Normal file
30
examples/JSON/Symbols.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Symbols</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var ellipse = new Path.Ellipse({
|
||||
from: [0, 0],
|
||||
to: [200, 100],
|
||||
fillColor: 'red'
|
||||
});
|
||||
var symbol = new Symbol(ellipse);
|
||||
var p1 = symbol.place([100, 100]);
|
||||
p1.rotate(45);
|
||||
var p2 = symbol.place([300, 200]);
|
||||
p2.rotate(-30);
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
38
examples/JSON/Text Testing.html
Normal file
38
examples/JSON/Text Testing.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Text Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
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';
|
||||
/*
|
||||
text.scale(5);
|
||||
text.translate(15, 15);
|
||||
text.rotate(20);
|
||||
text.shear(20, 5);
|
||||
*/
|
||||
text.rotate(45);
|
||||
text.shear(.85, .15);
|
||||
text.scale(.85, 2);
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
32
examples/JSON/Transform Test 1.html
Normal file
32
examples/JSON/Transform Test 1.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Transform Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
var circlePath = new Path.Circle(new Point(280, 100), 25);
|
||||
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);
|
||||
};
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
30
examples/JSON/Transform Test 2.html
Normal file
30
examples/JSON/Transform Test 2.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Rectangle Testing</title>
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<script type="text/javascript" src="../../dist/paper.js"></script>
|
||||
<script type="text/paperscript" canvas="canvas1">
|
||||
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);
|
||||
|
||||
window._json = project.toJson();
|
||||
console.log(window._json);
|
||||
</script>
|
||||
<script type="text/paperscript" canvas="canvas2">
|
||||
Base.fromJson(window._json);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="canvas1" width="500" height="500"></canvas>
|
||||
<canvas id="canvas2" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue