hunminkoh/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Path Editing</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 hitOptions = {
    	segments: true,
    	stroke: true,
    	fill: true,
    	tolerance: 5
    };

		var p1 = new Point(100,70);
    var triangle = new Path.RegularPolygon(p1, 3, 50);
    triangle.fillColor = '#e9e9ff';
    triangle.selected = true;
		triangle.strokeColor = 'red';


		console.log(triangle);
		console.log(triangle.curves[0]);
		console.log(triangle.segments[0].point);

		var p2 = new Point(triangle.segments[0].point.x,triangle.segments[0].point.y);
		var p3 = new Point(triangle.segments[1].point.x,triangle.segments[1].point.y);

		var shape1 = new Shape.Circle(p2, 1);
		var shape2 = new Shape.Circle(p3, 1);
		shape1.strokeColor = 'red';
		shape2.strokeColor = 'red';


		var segment, path, curve;
    var movePath = false;
    function onMouseDown(event) {
    	segment = path = curve = null;
    	var hitResult = project.hitTest(event.point, hitOptions);
    	if (!hitResult)
    		return;

    	if (event.modifiers.shift) {
    		if (hitResult.type == 'segment') {
    			hitResult.segment.remove();
    		};
    		return;
    	}

    	if (hitResult) {
    		path = hitResult.item;
				//console.log(path);
    		if (hitResult.type == 'segment') {
    			segment = hitResult.segment;
    		}
				else if (hitResult.type == 'stroke') {
    			var location = hitResult.location;
    			curve = location;//path.insert(location.index + 1, event.point);
				//	console.log(location);
    		//	path.smooth();
    		}
    	}
    	movePath = hitResult.type == 'fill';
    	if (movePath)
    		project.activeLayer.addChild(hitResult.item);
    }

    function onMouseMove(event) {
    	project.activeLayer.selected = false;
    	if (event.item)
    		event.item.selected = true;
    }

    function onMouseDrag(event) {
    	if (curve) {
				//console.log(segment._segment1);
				console.log(curve);

    		curve._segment1.point += event.delta;
				curve._segment2.point += event.delta;
    	//	path.smooth();
    	} else if (path) {

    		path.position += event.delta;


    	}
    }
    </script>
</head>
<body style="background:black">
    <canvas id="canvas" resize></canvas>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Path Editing</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 hitOptions = {
	segments: true,
	stroke: true,
	fill: true,
	tolerance: 5
	};

	var p1 = new Point(100,70);
	var triangle = new Path.RegularPolygon(p1, 3, 50);
	triangle.fillColor = '#e9e9ff';
	triangle.selected = true;
	triangle.strokeColor = 'red';


	console.log(triangle);
	console.log(triangle.curves[0]);
	console.log(triangle.segments[0].point);

	var p2 = new Point(triangle.segments[0].point.x,triangle.segments[0].point.y);
	var p3 = new Point(triangle.segments[1].point.x,triangle.segments[1].point.y);

	var shape1 = new Shape.Circle(p2, 1);
	var shape2 = new Shape.Circle(p3, 1);
	shape1.strokeColor = 'red';
	shape2.strokeColor = 'red';


	var segment, path, curve;
	var movePath = false;
	function onMouseDown(event) {
	segment = path = curve = null;
	var hitResult = project.hitTest(event.point, hitOptions);
	if (!hitResult)
	return;

	if (event.modifiers.shift) {
	if (hitResult.type == 'segment') {
	hitResult.segment.remove();
	};
	return;
	}

	if (hitResult) {
	path = hitResult.item;
	//console.log(path);
	if (hitResult.type == 'segment') {
	segment = hitResult.segment;
	}
	else if (hitResult.type == 'stroke') {
	var location = hitResult.location;
	curve = location;//path.insert(location.index + 1, event.point);
	// console.log(location);
	// path.smooth();
	}
	}
	movePath = hitResult.type == 'fill';
	if (movePath)
	project.activeLayer.addChild(hitResult.item);
	}

	function onMouseMove(event) {
	project.activeLayer.selected = false;
	if (event.item)
	event.item.selected = true;
	}

	function onMouseDrag(event) {
	if (curve) {
	//console.log(segment._segment1);
	console.log(curve);

	curve._segment1.point += event.delta;
	curve._segment2.point += event.delta;
	// path.smooth();
	} else if (path) {

	path.position += event.delta;


	}
	}
	</script>
	</head>
	<body style="background:black">
	<canvas id="canvas" resize></canvas>
	</body>
	</html>