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(200,200);
    var triangle = new Path.RegularPolygon(p1, 3, 50);
    triangle.fillColor = '#e9e9ff';
    triangle.selected = true;
		triangle.strokeColor = 'red';

		var segment, path, curve;
		var copyPath = null;
    var movePath = false;
		var tempLine = null;

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

    	if (!hitResult)
    		return;

    	if (hitResult) {
    		path = hitResult.item;
    		if (hitResult.type == 'segment') {
    			segment = hitResult.segment;
    		}

				else if (hitResult.type == 'stroke') {
					console.log(hitResult);
    			var location = hitResult.location;
    			curve = location;
					tempLine = new Path.Line(location._segment1._point, location._segment2._point);
					path.strokeColor = 'white';
    		}
    	}
    	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;
    }

		//find the shortest distance between a point and a line segment
		function sqr(x) {
				return x * x
		}

		function dist2(v, w) {
				return sqr(v.x - w.x) + sqr(v.y - w.y)
		}

		function distToSegmentSquared(p, v, w) {
			var l2 = dist2(v, w);

			if (l2 == 0) return dist2(p, v);

			var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;

			if (t < 0) return dist2(p, v);
			if (t > 1) return dist2(p, w);

			return dist2(p, { x: v.x + t * (w.x - v.x), y: v.y + t * (w.y - v.y) });
		}

		function distToSegment(p, v, w) {
				return Math.sqrt(distToSegmentSquared(p, v, w));
		}
		/////////////////////////////////////////////////////////

    function onMouseDrag(event) {
			var ctrIdx = null;
			var seg1Idx = null;
			var seg2Idx = null;
			var ctrPt = null;
			var oldD = null;
			var newD = null;
			var prop = null;

    	if (curve) {
				seg1Idx = curve._segment1.index;
				seg2Idx = curve._segment2.index;

				if ((seg1Idx + seg2Idx) == 3){
					ctrIdx = 0;
				}else if ((seg1Idx + seg2Idx) == 1) {
					ctrIdx = 2;
				}else {
					ctrIdx = 1;
				}
				tempLine.position += event.delta;

				ctrPt = path._segments[ctrIdx]._point;
				oldD = distToSegment(ctrPt, curve._segment1.point, curve._segment2.point);
				newD = distToSegment(ctrPt, tempLine._segments[0]._point, tempLine._segments[1]._point);
				prop = newD/oldD;
				path.scale(prop,ctrPt);

			}else if (segment) {

				if (segment.index == 0){
					seg1Idx = 1;
					seg2Idx = 2;
				}else if (segment.index == 1){
					seg1Idx = 0;
					seg2Idx = 2;
				}else {
					seg1Idx = 0;
					seg2Idx = 1;
				}

				ctrPt = segment.point;

				oldD = distToSegment(ctrPt, path._segments[seg1Idx]._point, path._segments[seg2Idx]._point);
				ctrPt += event.delta;
				newD = distToSegment(ctrPt,path._segments[seg1Idx]._point, path._segments[seg2Idx]._point);
				prop = newD/oldD;
				var midPt = (path._segments[seg1Idx]._point + path._segments[seg2Idx]._point)/2;
				path.scale(prop,midPt);

			}
		}

    </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(200,200);
	var triangle = new Path.RegularPolygon(p1, 3, 50);
	triangle.fillColor = '#e9e9ff';
	triangle.selected = true;
	triangle.strokeColor = 'red';

	var segment, path, curve;
	var copyPath = null;
	var movePath = false;
	var tempLine = null;

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

	if (!hitResult)
	return;

	if (hitResult) {
	path = hitResult.item;
	if (hitResult.type == 'segment') {
	segment = hitResult.segment;
	}

	else if (hitResult.type == 'stroke') {
	console.log(hitResult);
	var location = hitResult.location;
	curve = location;
	tempLine = new Path.Line(location._segment1._point, location._segment2._point);
	path.strokeColor = 'white';
	}
	}
	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;
	}

	//find the shortest distance between a point and a line segment
	function sqr(x) {
	return x * x
	}

	function dist2(v, w) {
	return sqr(v.x - w.x) + sqr(v.y - w.y)
	}

	function distToSegmentSquared(p, v, w) {
	var l2 = dist2(v, w);

	if (l2 == 0) return dist2(p, v);

	var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;

	if (t < 0) return dist2(p, v);
	if (t > 1) return dist2(p, w);

	return dist2(p, { x: v.x + t * (w.x - v.x), y: v.y + t * (w.y - v.y) });
	}

	function distToSegment(p, v, w) {
	return Math.sqrt(distToSegmentSquared(p, v, w));
	}
	/////////////////////////////////////////////////////////

	function onMouseDrag(event) {
	var ctrIdx = null;
	var seg1Idx = null;
	var seg2Idx = null;
	var ctrPt = null;
	var oldD = null;
	var newD = null;
	var prop = null;

	if (curve) {
	seg1Idx = curve._segment1.index;
	seg2Idx = curve._segment2.index;

	if ((seg1Idx + seg2Idx) == 3){
	ctrIdx = 0;
	}else if ((seg1Idx + seg2Idx) == 1) {
	ctrIdx = 2;
	}else {
	ctrIdx = 1;
	}
	tempLine.position += event.delta;

	ctrPt = path._segments[ctrIdx]._point;
	oldD = distToSegment(ctrPt, curve._segment1.point, curve._segment2.point);
	newD = distToSegment(ctrPt, tempLine._segments[0]._point, tempLine._segments[1]._point);
	prop = newD/oldD;
	path.scale(prop,ctrPt);

	}else if (segment) {

	if (segment.index == 0){
	seg1Idx = 1;
	seg2Idx = 2;
	}else if (segment.index == 1){
	seg1Idx = 0;
	seg2Idx = 2;
	}else {
	seg1Idx = 0;
	seg2Idx = 1;
	}

	ctrPt = segment.point;

	oldD = distToSegment(ctrPt, path._segments[seg1Idx]._point, path._segments[seg2Idx]._point);
	ctrPt += event.delta;
	newD = distToSegment(ctrPt,path._segments[seg1Idx]._point, path._segments[seg2Idx]._point);
	prop = newD/oldD;
	var midPt = (path._segments[seg1Idx]._point + path._segments[seg2Idx]._point)/2;
	path.scale(prop,midPt);

	}
	}

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