paper.js

2025-02-07 16:38:56 +01:00
parent 803e4407f4
commit b1c9f6170b
186 changed files with 178519 additions and 0 deletions
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Circle Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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.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';
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Compound Path</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        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);
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Empty Path Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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 path3 = new Path();
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Gradients</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var stops = [new Color(1, 1, 0, 0), 'red', 'black'];
+
+        var radius = view.bounds.width * 0.4,
+            from = new Point(view.center.x),
+            to = from + [radius, 0];
+
+        var circle = new Path.Circle({
+            center: from,
+            radius: radius,
+            fillColor: {
+                stops: stops,
+                radial: true,
+                origin: from,
+                destination: to
+            },
+            strokeColor: 'black'
+        });
+
+        var from = view.bounds.leftCenter,
+            to = view.bounds.bottomRight;
+
+        var rect = new Path.Rectangle({
+            from: from,
+            to: to,
+            fillColor: {
+                stops: stops,
+                radial: false,
+                origin: from,
+                destination: to
+            },
+            strokeColor: 'black'
+        });
+
+        rect.rotate(45).scale(0.7);
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="300" height="600"></canvas>
+</body>
+</html>
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Group Transform</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        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);
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Line Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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";
+
+        var x5 = 50,
+            x6 = 200,
+            y5 = 55,
+            y6 = 300;
+        var line3 = new Path.Line([x5, y5], [x6, y6]);
+        line3.strokeColor = "yellow";
+        line3.strokeWidth = "5";
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Random Path Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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';
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Rectangle Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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.Rectangle(rectangle4, cornerSize4);
+        path4.strokeColor= 'yellow';
+        path4.fillColor='purple';
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Rotated Primitives</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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.
+        var path = new Path({
+            closed: true,
+            strokeColor: 'black'
+        });
+        path.moveTo(0, 0);
+        path.lineTo(50, 50);
+        path.lineTo(100, 100);
+        path.lineTo(-50, 150);
+        path.position += 100;
+
+        var rect = new Path.Rectangle({
+            point: [200, 100],
+            size: [200, 300],
+            fillColor: 'red'
+        });
+        rect.rotate(40);
+
+        var circle = new Path.Circle({
+            center: [200, 300],
+            radius: 100,
+            fillColor: 'green'
+        });
+        circle.scale(0.5, 1);
+        circle.rotate(40);
+
+        var ellipse = new Path.Ellipse({
+            point: [300, 300],
+            size: [100, 200],
+            fillColor: 'blue'
+        });
+        ellipse.rotate(-40);
+
+        var rect = new Path.Rectangle({
+            point: [250, 20],
+            size: [200, 300],
+            radius: [40, 20],
+            fillColor: 'yellow'
+        });
+        rect.rotate(-20);
+        rect.data = {
+            string: '----',
+            number: 1234,
+            array: ['a ray', 'some rays'],
+            bool: true,
+            nil: null,
+            point: new Point(12, 34),
+            size: new Size(12, 34),
+            rectangle: new Rectangle([12, 34], [56, 78]),
+            deep: {
+                deeper: {
+                    deepest: true
+                }
+            }
+        };
+
+        var parallelogram = new Path({
+            closed: true,
+            segments: [[50, 0], [50, 100], [90, 120], [90, 20]],
+            fillColor: '#99c'
+        });
+
+        document.body.appendChild(project.exportSVG({ matchShapes: true }));
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Shapes</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var rect = new Shape.Rectangle({
+            point: [200, 100],
+            size: [200, 300],
+            fillColor: 'red'
+        });
+        rect.rotate(40);
+
+        var circle = new Shape.Circle({
+            center: [200, 300],
+            radius: 100,
+            fillColor: 'green'
+        });
+        circle.scale(0.5, 1);
+        circle.rotate(40);
+
+        var ellipse = new Shape.Ellipse({
+            point: [300, 300],
+            size: [100, 200],
+            fillColor: 'blue'
+        });
+        ellipse.rotate(-40);
+
+        var rect = new Shape.Rectangle({
+            point: [250, 20],
+            size: [200, 300],
+            radius: [40, 20],
+            fillColor: 'yellow'
+        });
+        rect.rotate(-20);
+        document.body.appendChild(project.exportSVG());
+
+        var prev = null;
+        function onMouseMove(event) {
+            if (prev)
+                prev.selected = false;
+            var result = project.hitTest(event.point);
+            if (result) {
+                var item = result.item;
+                item.selected = true;
+                prev = item;
+            }
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Symbols</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var ellipse = new Path.Ellipse({
+            from: [0, 0],
+            to: [200, 100],
+            fillColor: 'red'
+        });
+        var symbol = new SymbolDefinition(ellipse);
+        var p1 = symbol.place([100, 100]);
+        p1.rotate(45);
+        var p2 = symbol.place([300, 200]);
+        p2.rotate(-30);
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Text Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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';
+        /*
+        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);
+
+        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];
+        }
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Transform Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        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);
+        };
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Rectangle Testing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <!-- IE 9: display inline SVG -->
+    <meta http-equiv="X-UA-Compatible" content="IE=9">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <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);
+
+        document.body.appendChild(project.exportSVG());
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>