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/Animated/AnimatedStar.html
+++ b/static/Magic4/paperjs-v0.12.15/examples/Animated/AnimatedStar.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Animated Star</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var layer = project.activeLayer;
+
+        var values = {
+            count: 34,
+            points: 32
+        };
+
+        for (var i = 0; i < values.count; i++) {
+            var path = new Path({
+                fillColor: i % 2 ? 'red' : 'black',
+                closed: true
+            });
+
+            var offset = new Point(20 + 10 * i, 0);
+            var l = offset.length;
+            for (var j = 0; j < values.points * 2; j++) {
+                offset.angle += 360 / values.points;
+                var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
+                path.add(offset + vector);
+            }
+            path.smooth({ type: 'continuous' });
+            layer.insertChild(0, new Group({
+                children: [path],
+                applyMatrix: false
+            }));
+        }
+
+        function onFrame(event) {
+            for (var i = 0; i < values.count; i++) {
+                var item = layer.children[i];
+                var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
+                item.rotate(angle);
+            }
+        }
+
+        // Reposition the paths whenever the window is resized:
+        function onResize(event) {
+            layer.position = view.center;
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize stats hidpi="off"></canvas>
+</body>
+</html>