paper.js/examples/Tools/DrawCurves.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Example</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var path, point;

//		var path = new Path([{ point: { x: 846, y: 224 } },{ point: { x: 845, y: 224 } },{ point: { x: 842, y: 224 } },{ point: { x: 838, y: 224 } },{ point: { x: 833, y: 224 } },{ point: { x: 828, y: 224 } },{ point: { x: 821, y: 224 } },{ point: { x: 815, y: 224 } },{ point: { x: 801, y: 224 } },{ point: { x: 796, y: 224 } },{ point: { x: 794, y: 224 } },{ point: { x: 787, y: 225 } },{ point: { x: 782, y: 226 } },{ point: { x: 777, y: 226 } },{ point: { x: 773, y: 226 } },{ point: { x: 768, y: 226 } },{ point: { x: 763, y: 226 } },{ point: { x: 759, y: 226 } }]);
//		var path = new Path([{ point: { x: 1052, y: 227 } },{ point: { x: 1052, y: 228 } },{ point: { x: 1052, y: 229 } },{ point: { x: 1052, y: 230 } },{ point: { x: 1052, y: 231 } },{ point: { x: 1050, y: 231 } },{ point: { x: 1049, y: 231 } },{ point: { x: 1047, y: 231 } },{ point: { x: 1045, y: 231 } },{ point: { x: 1043, y: 231 } },{ point: { x: 1040, y: 231 } },{ point: { x: 1038, y: 231 } },{ point: { x: 1035, y: 231 } },{ point: { x: 1034, y: 231 } },{ point: { x: 1033, y: 231 } },{ point: { x: 1030, y: 231 } },{ point: { x: 1028, y: 231 } },{ point: { x: 1026, y: 231 } },{ point: { x: 1024, y: 231 } },{ point: { x: 1023, y: 231 } },{ point: { x: 1021, y: 231 } },{ point: { x: 1018, y: 231 } },{ point: { x: 1017, y: 231 } },{ point: { x: 1015, y: 231 } },{ point: { x: 1013, y: 231 } },{ point: { x: 1011, y: 231 } },{ point: { x: 1009, y: 231 } },{ point: { x: 1008, y: 231 } },{ point: { x: 1004, y: 231 } },{ point: { x: 1002, y: 230 } },{ point: { x: 999, y: 230 } },{ point: { x: 997, y: 230 } },{ point: { x: 995, y: 230 } },{ point: { x: 994, y: 230 } },{ point: { x: 992, y: 230 } },{ point: { x: 990, y: 230 } },{ point: { x: 988, y: 230 } },{ point: { x: 987, y: 230 } },{ point: { x: 984, y: 230 } },{ point: { x: 981, y: 230 } },{ point: { x: 980, y: 230 } },{ point: { x: 976, y: 230 } },{ point: { x: 974, y: 230 } },{ point: { x: 972, y: 230 } },{ point: { x: 970, y: 230 } },{ point: { x: 969, y: 230 } },{ point: { x: 965, y: 230 } },{ point: { x: 963, y: 230 } },{ point: { x: 961, y: 230 } },{ point: { x: 960, y: 230 } },{ point: { x: 958, y: 230 } },{ point: { x: 956, y: 230 } },{ point: { x: 954, y: 230 } },{ point: { x: 950, y: 230 } },{ point: { x: 948, y: 230 } },{ point: { x: 946, y: 230 } },{ point: { x: 945, y: 230 } },{ point: { x: 944, y: 230 } },{ point: { x: 942, y: 230 } },{ point: { x: 941, y: 230 } },{ point: { x: 940, y: 230 } },{ point: { x: 938, y: 230 } },{ point: { x: 937, y: 230 } },{ point: { x: 936, y: 230 } },{ point: { x: 935, y: 230 } },{ point: { x: 934, y: 230 } },{ point: { x: 933, y: 230 } },{ point: { x: 931, y: 230 } },{ point: { x: 930, y: 230 } },{ point: { x: 929, y: 230 } },{ point: { x: 928, y: 230 } },{ point: { x: 927, y: 230 } },{ point: { x: 925, y: 230 } },{ point: { x: 924, y: 230 } },{ point: { x: 923, y: 230 } },{ point: { x: 923, y: 231 } },{ point: { x: 923, y: 232 } },{ point: { x: 923, y: 233 } },{ point: { x: 923, y: 234 } }]);
//		var path = new Path([{ point: { x: 788, y: 319 } },{ point: { x: 784, y: 320 } },{ point: { x: 777, y: 320 } },{ point: { x: 773, y: 320 } },{ point: { x: 760, y: 320 } },{ point: { x: 752, y: 312 } },{ point: { x: 736, y: 295 } },{ point: { x: 723, y: 268 } },{ point: { x: 700, y: 209 } },{ point: { x: 692, y: 174 } },{ point: { x: 681, y: 132 } },{ point: { x: 663, y: 87 } },{ point: { x: 655, y: 76 } },{ point: { x: 647, y: 66 } },{ point: { x: 640, y: 61 } },{ point: { x: 638, y: 61 } },{ point: { x: 637, y: 61 } }]);
//		path.scale(5);
//		path.strokeColor = 'black';
//		path.pointsToCurves(1);
//		path.selected = true;

		function onMouseDown(event) {
			path = new Path();
			path.strokeColor = 'black';
			path.add(event.point);
		}

		function onMouseDrag(event) {
			path.add(event.point);
			path.fullySelected = true;
		}

		function onMouseUp(event) {
			path.pointsToCurves(10);
			path.fullySelected = true;
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize keepalive="true"></canvas>
</body>
</html>
Add DrawCurves example, to test new Path#pointsToCurves() feature. 2011-06-05 17:10:26 -04:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
			`<title>Example</title>`
			`<link rel="stylesheet" href="../css/style.css">`
Switch from "out" folder for built library to "dist". 2011-06-12 14:03:18 -04:00			`<script type="text/javascript" src="../../dist/paper.js"></script>`
Add DrawCurves example, to test new Path#pointsToCurves() feature. 2011-06-05 17:10:26 -04:00			`<script type="text/paperscript" canvas="canvas">`
			`var path, point;`

			// var path = new Path([{ point: { x: 846, y: 224 } },{ point: { x: 845, y: 224 } },{ point: { x: 842, y: 224 } },{ point: { x: 838, y: 224 } },{ point: { x: 833, y: 224 } },{ point: { x: 828, y: 224 } },{ point: { x: 821, y: 224 } },{ point: { x: 815, y: 224 } },{ point: { x: 801, y: 224 } },{ point: { x: 796, y: 224 } },{ point: { x: 794, y: 224 } },{ point: { x: 787, y: 225 } },{ point: { x: 782, y: 226 } },{ point: { x: 777, y: 226 } },{ point: { x: 773, y: 226 } },{ point: { x: 768, y: 226 } },{ point: { x: 763, y: 226 } },{ point: { x: 759, y: 226 } }]);
			// var path = new Path([{ point: { x: 1052, y: 227 } },{ point: { x: 1052, y: 228 } },{ point: { x: 1052, y: 229 } },{ point: { x: 1052, y: 230 } },{ point: { x: 1052, y: 231 } },{ point: { x: 1050, y: 231 } },{ point: { x: 1049, y: 231 } },{ point: { x: 1047, y: 231 } },{ point: { x: 1045, y: 231 } },{ point: { x: 1043, y: 231 } },{ point: { x: 1040, y: 231 } },{ point: { x: 1038, y: 231 } },{ point: { x: 1035, y: 231 } },{ point: { x: 1034, y: 231 } },{ point: { x: 1033, y: 231 } },{ point: { x: 1030, y: 231 } },{ point: { x: 1028, y: 231 } },{ point: { x: 1026, y: 231 } },{ point: { x: 1024, y: 231 } },{ point: { x: 1023, y: 231 } },{ point: { x: 1021, y: 231 } },{ point: { x: 1018, y: 231 } },{ point: { x: 1017, y: 231 } },{ point: { x: 1015, y: 231 } },{ point: { x: 1013, y: 231 } },{ point: { x: 1011, y: 231 } },{ point: { x: 1009, y: 231 } },{ point: { x: 1008, y: 231 } },{ point: { x: 1004, y: 231 } },{ point: { x: 1002, y: 230 } },{ point: { x: 999, y: 230 } },{ point: { x: 997, y: 230 } },{ point: { x: 995, y: 230 } },{ point: { x: 994, y: 230 } },{ point: { x: 992, y: 230 } },{ point: { x: 990, y: 230 } },{ point: { x: 988, y: 230 } },{ point: { x: 987, y: 230 } },{ point: { x: 984, y: 230 } },{ point: { x: 981, y: 230 } },{ point: { x: 980, y: 230 } },{ point: { x: 976, y: 230 } },{ point: { x: 974, y: 230 } },{ point: { x: 972, y: 230 } },{ point: { x: 970, y: 230 } },{ point: { x: 969, y: 230 } },{ point: { x: 965, y: 230 } },{ point: { x: 963, y: 230 } },{ point: { x: 961, y: 230 } },{ point: { x: 960, y: 230 } },{ point: { x: 958, y: 230 } },{ point: { x: 956, y: 230 } },{ point: { x: 954, y: 230 } },{ point: { x: 950, y: 230 } },{ point: { x: 948, y: 230 } },{ point: { x: 946, y: 230 } },{ point: { x: 945, y: 230 } },{ point: { x: 944, y: 230 } },{ point: { x: 942, y: 230 } },{ point: { x: 941, y: 230 } },{ point: { x: 940, y: 230 } },{ point: { x: 938, y: 230 } },{ point: { x: 937, y: 230 } },{ point: { x: 936, y: 230 } },{ point: { x: 935, y: 230 } },{ point: { x: 934, y: 230 } },{ point: { x: 933, y: 230 } },{ point: { x: 931, y: 230 } },{ point: { x: 930, y: 230 } },{ point: { x: 929, y: 230 } },{ point: { x: 928, y: 230 } },{ point: { x: 927, y: 230 } },{ point: { x: 925, y: 230 } },{ point: { x: 924, y: 230 } },{ point: { x: 923, y: 230 } },{ point: { x: 923, y: 231 } },{ point: { x: 923, y: 232 } },{ point: { x: 923, y: 233 } },{ point: { x: 923, y: 234 } }]);
			// var path = new Path([{ point: { x: 788, y: 319 } },{ point: { x: 784, y: 320 } },{ point: { x: 777, y: 320 } },{ point: { x: 773, y: 320 } },{ point: { x: 760, y: 320 } },{ point: { x: 752, y: 312 } },{ point: { x: 736, y: 295 } },{ point: { x: 723, y: 268 } },{ point: { x: 700, y: 209 } },{ point: { x: 692, y: 174 } },{ point: { x: 681, y: 132 } },{ point: { x: 663, y: 87 } },{ point: { x: 655, y: 76 } },{ point: { x: 647, y: 66 } },{ point: { x: 640, y: 61 } },{ point: { x: 638, y: 61 } },{ point: { x: 637, y: 61 } }]);
			`// path.scale(5);`
			`// path.strokeColor = 'black';`
			`// path.pointsToCurves(1);`
			`// path.selected = true;`

			`function onMouseDown(event) {`
			`path = new Path();`
			`path.strokeColor = 'black';`
			`path.add(event.point);`
			`}`

			`function onMouseDrag(event) {`
			`path.add(event.point);`
Use #fullySelected instead of #selected. 2011-06-16 17:51:18 -04:00			`path.fullySelected = true;`
Add DrawCurves example, to test new Path#pointsToCurves() feature. 2011-06-05 17:10:26 -04:00			`}`

			`function onMouseUp(event) {`
Change all examples to load the latest compiled library from out/paper.js. 2011-06-12 13:42:12 -04:00			`path.pointsToCurves(10);`
Use #fullySelected instead of #selected. 2011-06-16 17:51:18 -04:00			`path.fullySelected = true;`
Add DrawCurves example, to test new Path#pointsToCurves() feature. 2011-06-05 17:10:26 -04:00			`}`
			`</script>`
			`</head>`
			`<body>`
			`<canvas id="canvas" resize keepalive="true"></canvas>`
			`</body>`
			`</html>`