magic4

2024-12-03 16:40:54 +08:00
parent 6e6dd6a4fc
commit 9d776c65e9
408 changed files with 498647 additions and 99 deletions
--- a/static/Magic4/paperjs-v0.12.15/examples/Paperjs.org/Chain.html
+++ b/static/Magic4/paperjs-v0.12.15/examples/Paperjs.org/Chain.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Chain</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        // Adapted from the following Processing example:
+        // http://processing.org/learning/topics/follow3.html
+
+        // The amount of points in the path:
+        var points = 25;
+
+        // The distance between the points:
+        var length = 35;
+
+        var path = new Path({
+            strokeColor: '#E4141B',
+            strokeWidth: 20,
+            strokeCap: 'round'
+        });
+
+        var start = view.center / [10, 1];
+        for (var i = 0; i < points; i++)
+            path.add(start + new Point(i * length, 0));
+
+        function onMouseMove(event) {
+            path.firstSegment.point = event.point;
+            for (var i = 0; i < points - 1; i++) {
+                var segment = path.segments[i];
+                var nextSegment = segment.next;
+                var vector = segment.point - nextSegment.point;
+                vector.length = length;
+                nextSegment.point = segment.point - vector;
+            }
+            path.smooth({ type: 'continuous' });
+        }
+
+        function onMouseDown(event) {
+            path.fullySelected = true;
+            path.strokeColor = '#e08285';
+        }
+
+        function onMouseUp(event) {
+            path.fullySelected = false;
+            path.strokeColor = '#e4141b';
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>