andrew-pa · September 26, 2015 10:43
diff --git a/vctr.htm b/vctr.htm
 <html>
 	<head>
 		<title>Vector Drawing</title>
 		<script>
 		var canvas, cnt;
 		var vdw = [];
 		var scl = 200, ofs = 200;
 		var moving_dot = -1;
 		var selected_dot = -1;
 		function mousepos(evt) {
 			var rect = canvas.getBoundingClientRect();
 			return [ ((evt.clientX - rect.left) - ofs)/scl, ((evt.clientY - rect.top)-ofs)/scl ];	
 		}
 		function init() {
 			canvas = document.getElementById('cnvs');
 			cnt = canvas.getContext('2d');
 			cnt.strokeStyle = 'black';
 			vdw[vdw.length] = [0, 0];
 			vdw[vdw.length] = [1.5, 0];
 			vdw[vdw.length] = [1, 1];
 			vdw[vdw.length] = [0, 1.5];
 			vdw[vdw.length] = vdw[0];
 			setInterval(animLoop, 16);
 			canvas.addEventListener('contextmenu', function(evt) { evt.preventDefault(); }, false);
 			canvas.addEventListener('mousedown', function(evt) {
 				var mp = mousepos(evt);
 				for(var i = 0; i < vdw.length-1; ++i) {
 					var d = vdw[i];
 					var l = Math.abs(((d[0])-mp[0]) * ((d[1])-mp[1]));
 					if(l < 0.01) {
 						if(evt.which == 1)	moving_dot = i;
 						else if(evt.which == 3) selected_dot = i;
 						break;
 					}
 				}
 			});
 			canvas.addEventListener('mousemove', function(evt) {
 				vdw[moving_dot] = mousepos(evt);
 				if(moving_dot == 0) vdw[vdw.length-1] = mousepos(evt);
 			});
 			canvas.addEventListener('mouseup', function(evt) {
 				moving_dot = -1;
 			});
 			window.addEventListener('keydown', function(evt) {
 				if(selected_dot > -1) { 
 					var x = (vdw[selected_dot][0] + vdw[selected_dot+1][0])/2;
 					var y = (vdw[selected_dot][1] + vdw[selected_dot+1][1])/2;
 					vdw.splice(selected_dot, 0, [x,y]);	
 				}
 			});
 		}
 		var t = 0;
 		function animLoop() {
 			t += 16/1000;
 			cnt.clearRect(0, 0, canvas.width, canvas.height);
 			cnt.beginPath();
 			cnt.moveTo(vdw[0][0]*scl + ofs, vdw[0][1]*scl + ofs);
 			for(var i = 1; i < vdw.length; ++i) {
 				cnt.lineTo(vdw[i][0]*scl + ofs,vdw[i][1]*scl + ofs);
 			}
 			cnt.lineTo(vdw[0][0]*scl + ofs, vdw[0][1]*scl + ofs);
 			cnt.lineWidth = 2;
 			cnt.stroke();

 			for(var i = 0; i < vdw.length-1; ++i) {
 				if(selected_dot == i) cnt.fillStyle = 'orange';
 				else cnt.fillStyle = 'blue';
 				cnt.beginPath();
 				cnt.arc(vdw[i][0]*scl + ofs, vdw[i][1]*scl + ofs, 5, 0, 2*Math.PI, false);
 				cnt.fill();
 			}
 		}
 		
 		</script>
 	</head>
 	<body onload="init()">
 		<canvas id="cnvs" width="800" height="600"></cavas>
 	</body>
 </body>
	<html>
	<head>
	<title>Vector Drawing</title>
	<script>
	var canvas, cnt;
	var vdw = [];
	var scl = 200, ofs = 200;
	var moving_dot = -1;
	var selected_dot = -1;
	function mousepos(evt) {
	var rect = canvas.getBoundingClientRect();
	return [ ((evt.clientX - rect.left) - ofs)/scl, ((evt.clientY - rect.top)-ofs)/scl ];
	}
	function init() {
	canvas = document.getElementById('cnvs');
	cnt = canvas.getContext('2d');
	cnt.strokeStyle = 'black';
	vdw[vdw.length] = [0, 0];
	vdw[vdw.length] = [1.5, 0];
	vdw[vdw.length] = [1, 1];
	vdw[vdw.length] = [0, 1.5];
	vdw[vdw.length] = vdw[0];
	setInterval(animLoop, 16);
	canvas.addEventListener('contextmenu', function(evt) { evt.preventDefault(); }, false);
	canvas.addEventListener('mousedown', function(evt) {
	var mp = mousepos(evt);
	for(var i = 0; i < vdw.length-1; ++i) {
	var d = vdw[i];
	var l = Math.abs(((d[0])-mp[0]) * ((d[1])-mp[1]));
	if(l < 0.01) {
	if(evt.which == 1) moving_dot = i;
	else if(evt.which == 3) selected_dot = i;
	break;
	}
	}
	});
	canvas.addEventListener('mousemove', function(evt) {
	vdw[moving_dot] = mousepos(evt);
	if(moving_dot == 0) vdw[vdw.length-1] = mousepos(evt);
	});
	canvas.addEventListener('mouseup', function(evt) {
	moving_dot = -1;
	});
	window.addEventListener('keydown', function(evt) {
	if(selected_dot > -1) {
	var x = (vdw[selected_dot][0] + vdw[selected_dot+1][0])/2;
	var y = (vdw[selected_dot][1] + vdw[selected_dot+1][1])/2;
	vdw.splice(selected_dot, 0, [x,y]);
	}
	});
	}
	var t = 0;
	function animLoop() {
	t += 16/1000;
	cnt.clearRect(0, 0, canvas.width, canvas.height);
	cnt.beginPath();
	cnt.moveTo(vdw[0][0]scl + ofs, vdw[0][1]scl + ofs);
	for(var i = 1; i < vdw.length; ++i) {
	cnt.lineTo(vdw[i][0]scl + ofs,vdw[i][1]scl + ofs);
	}
	cnt.lineTo(vdw[0][0]scl + ofs, vdw[0][1]scl + ofs);
	cnt.lineWidth = 2;
	cnt.stroke();

	for(var i = 0; i < vdw.length-1; ++i) {
	if(selected_dot == i) cnt.fillStyle = 'orange';
	else cnt.fillStyle = 'blue';
	cnt.beginPath();
	cnt.arc(vdw[i][0]scl + ofs, vdw[i][1]scl + ofs, 5, 0, 2*Math.PI, false);
	cnt.fill();
	}
	}

	</script>
	</head>
	<body onload="init()">
	<canvas id="cnvs" width="800" height="600"></cavas>
	</body>
	</body>