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/Tools/BezierTool.html
+++ b/static/Magic4/paperjs-v0.12.15/examples/Tools/BezierTool.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Bezier Tool</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 path;
+        var types = ['point', 'handleIn', 'handleOut'];
+        function findHandle(point) {
+            for (var i = 0, l = path.segments.length; i < l; i++) {
+                for (var j = 0; j < 3; j++) {
+                    var type = types[j];
+                    var segment = path.segments[i];
+                    var segmentPoint = type == 'point'
+                            ? segment.point
+                            : segment.point + segment[type];
+                    var distance = (point - segmentPoint).length;
+                    if (distance < 3) {
+                        return {
+                            type: type,
+                            segment: segment
+                        };
+                    }
+                }
+            }
+            return null;
+        }
+
+        var currentSegment, mode, type;
+        function onMouseDown(event) {
+            if (currentSegment)
+                currentSegment.selected = false;
+            mode = type = currentSegment = null;
+
+            if (!path) {
+                path = new Path();
+                path.fillColor = {
+                    hue: 360 * Math.random(),
+                    saturation: 1,
+                    brightness: 1,
+                    alpha: 0.5
+                };
+            }
+
+            var result = findHandle(event.point);
+            if (result) {
+                currentSegment = result.segment;
+                type = result.type;
+                if (path.segments.length > 1 && result.type == 'point'
+                        && result.segment.index == 0) {
+                    mode = 'close';
+                    path.closed = true;
+                    path.selected = false;
+                    path = null;
+                }
+            }
+
+            if (mode != 'close') {
+                mode = currentSegment ? 'move' : 'add';
+                if (!currentSegment)
+                    currentSegment = path.add(event.point);
+                currentSegment.selected = true;
+            }
+        }
+
+        function onMouseDrag(event) {
+            if (mode == 'move' && type == 'point') {
+                currentSegment.point = event.point;
+            } else if (mode != 'close') {
+                var delta = event.delta.clone();
+                if (type == 'handleOut' || mode == 'add')
+                    delta = -delta;
+                currentSegment.handleIn += delta;
+                currentSegment.handleOut -= delta;
+            }
+        }
+    </script>
+</head>
+<body>
+    <p>
+    An emulation of a vector pen tool.
+    Click and drag to add a points.<br/>
+    Drag segment handles and points to manipulate them.
+    Close the path to start a new one.
+    </p>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>