Add PathEditing example, which shows of hit-testing of paths.

2024-12-29 09:22:22 -05:00 · 2011-07-17 17:57:44 +02:00 · 2011-07-17 17:57:44 +02:00 · 61fa298780
commit 61fa298780
parent f7711fab57
1 changed files with 100 additions and 0 deletions
--- a/examples/Tools/PathEditing.html
+++ b/examples/Tools/PathEditing.html
@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Path Editing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var values = {
+			paths: 100,
+			minPoints: 5,
+			maxPoints: 15,
+			minRadius: 30,
+			maxRadius: 90
+		};
+
+		var hitOptions = {
+			segments: true,
+			stroke: true,
+			fill: true,
+			tolerance: 5
+		};
+
+		var radiusDelta = values.maxRadius - values.minRadius;
+		var pointsDelta = values.maxPoints - values.minPoints;
+		for (var i = 0; i < values.paths; i++) {
+			var radius = values.minRadius + Math.random() * radiusDelta;
+			var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
+			var path = createBlob(view.size * Point.random(), radius, points);
+			var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
+			var hue = Math.random() * 360;
+			path.style = {
+				fillColor: new HSLColor(hue, 1, lightness)
+			};
+		};
+
+		function createBlob(center, maxRadius, points) {
+			var path = new Path();
+			path.closed = true;
+			for (var i = 0; i < points; i++) {
+				var delta = new Point({
+					length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
+					angle: (360 / points) * i
+				});
+				path.add(center + delta);
+			}
+			path.smooth();
+			return path;
+		}
+
+		var segment, path;
+		var movePath = false;
+		function onMouseDown(event) {
+			segment = path = null;
+			var hitResult = project.hitTest(event.point, hitOptions);
+
+			if (event.modifiers.shift) {
+				if (hitResult.type == 'segment') {
+					hitResult.segment.remove();
+				};
+				return;
+			}
+
+			if (hitResult) {
+				path = hitResult.item;
+				if (hitResult.type == 'segment') {
+					segment = hitResult.segment;
+				} else if (hitResult.type == 'stroke') {
+					var location = hitResult.location;
+					segment = path.insert(location.index + 1, event.point);
+					path.smooth();
+				}
+			}
+			movePath = hitResult.type == 'fill';
+			if (movePath)
+				project.activeLayer.addChild(hitResult.item);
+		}
+
+		function onMouseMove(event) {
+			var hitResult = project.hitTest(event.point, hitOptions);
+			project.activeLayer.selected = false;
+			if (hitResult && hitResult.item)
+				hitResult.item.selected = true;
+		}
+
+		function onMouseDrag(event) {
+			if (segment) {
+				segment.point = event.point;
+				path.smooth();
+			}
+
+			if (movePath)
+				path.position += event.delta;
+		}
+	</script>
+</head>
+<body style="background:black">
+	<canvas id="canvas" resize></canvas>
+</body>
+</html>