kaylarose · November 11, 2010 21:07
diff --git a/RaphaelJSShapeDrawingApp.html b/RaphaelJSShapeDrawingApp.html
 <html>
 	<head>
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 		<script src="http://yandex.st/raphael/1.5.2/raphael.min.js"></script>
 		<script>
 		/**
 		 * A Simple Vector Shape Drawing App with RaphaelJS and jQuery
 		 * copyright 2010 Kayla Rose Martin - Licensed under the MIT license
 		 * Inspired by http://stackoverflow.com/questions/3582344/draw-a-connection-line-in-raphaeljs
 		 **/
 		function Circle(startX, startY, width, raphael) {
 		    var start = {
 		        x: startX,
 		        y: startY,
 		        w: width
 		    };
 		    var end = {
 		        w: width
 		    };
 		    var getWidth = function() {
 		        return end.w;
 		    };
 		    var redraw = function() {
 		        node.attr({r: getWidth()});             
 		    }

 		    var node = raphael.circle(start.x, start.y, getWidth());
 			node.attr({'fill': 'yellow', 'fill-opacity':0.3});
 		    return {
 		        updateStart: function(x, y) {
 		            start.x = x;
 		            start.y = y;
 		            redraw();
 		            return this;
 		        },
 		        updateEnd: function(x, y) {
 		            var v = {
 		                    x: Math.abs(x - start.x),
 		                    y: Math.abs(y - start.y)
 		                };
 					//Radius
 		            end.w = Math.sqrt((Math.pow(v.x, 2) + Math.pow(v.y, 2)));
 		            redraw();
 		            return this;
 		        },
 				clear: function() {
 					node.remove();
 				}
 		    };
 		};
 		function Rect(startX, startY, width, height, raphael) {
 		    var start = {
 		        x: startX,
 		        y: startY,
 		        w: width,
 				h: height
 		    };
 		    var end = {
 		        w: width,
 				h: height
 		    };
 		    var getWidth = function() {
 		        return end.w;
 		    };
 			var getHeight = function() {
 		        return end.h;
 		    };
 		    var redraw = function() {
 		        node.attr({width: getWidth(), height: getHeight()});             
 		    }

 		    var node = raphael.rect(start.x, start.y, getWidth(), getHeight());
 			node.attr({'fill': 'red', 'fill-opacity':0.3});
 	
 		    return {
 		        updateStart: function(x, y) {
 		            start.x = x;
 		            start.y = y;
 		            redraw();
 		            return this;
 		        },
 		        updateEnd: function(x, y) {
 		            var v = {
 		                    x: Math.abs(x - start.x),
 		                    y: Math.abs(y - start.y)
 		                };
 					//Width
 					var width = Math.sqrt((Math.pow(v.x, 2) + Math.pow(v.y, 2)));
 		            end.h = width;
 					end.w = width;
 		            redraw();
 		            return this;
 		        },
 				clear: function() {
 					node.remove();
 				}
 		    };
 		};
 		$(function() {
 			var $paper = $("#paper");
 			var $controls = $('.control');
 		    var paper = Raphael("paper",0, 0, 300, 400);
 			var painter = {};
 			var shapes = [];
 			painter.brush = function(){};
 	
 			$('.rect').bind('click', function(e){
 				$controls.removeClass('active');
 				$(this).addClass('active');
 				painter.brush = function(e) {
 			        var shape = Rect(e.layerX, e.layerY, 5, 5, paper);
 					shapes.push(shape);
 			        $paper.bind('mousemove', function(e) {
 			            shape.updateEnd(e.layerX, e.layerY);
 			        });
 			    };
 			});
 	
 			$('.circ').bind('click', function(){
 				$controls.removeClass('active');
 				$(this).addClass('active');
 				painter.brush = function(e) {
 					var shape = Circle(e.layerX, e.layerY, 5, paper);
 					shapes.push(shape);
 			        $paper.bind('mousemove', function(e) {
 			            shape.updateEnd(e.layerX, e.layerY);
 			        });
 			    };
 			});
 	
 			$('.toggle').bind('click', function(e){
 				$paper.toggle();
 			});
 			$('.clear').bind('click', function(e){
 				while(shapes.length > 0)
 				{
 					var shape = shapes.pop();
 					console.log(shape);
 					shape.clear();
 				}
 				$(shapes).each(function(i){
 					this.remove();
 				}).toggle();
 			});
 	
 		    $paper.bind('mousedown', function(e){
 				painter.brush.call(this, e);
 			});

 		    $paper.bind('mouseup', function(e) {
 		        $(this).unbind('mousemove');
 		    });
 		});
 		</script>
 		<style>
 			html, body {
 				overflow: hidden;
 			}
 			svg {
 				border:solid 1px #000;
 			}
 			.controls {
 				width: 514px;
 				margin-bottom: 10px;
 			}
 			.container {
 				position:relative;
 				width: 514px;
 				height: 350px;
 				overflow:hidden;
 			}
 			.control.active:before {
 			   content: " X";
 			}
 			.container img {
 				position:absolute;
 				top: 0;
 				left: 0;
 				z-index:-1;
 			}
 			.controls span{
 				float: right;
 				padding-left: 10px;
 			}
 		</style>
 	</head>
 	<body>	
 		<div class="controls">
 			<a href="#circle" class="circ control" title="Click to Activate Circle Shape">Circle</a>
 			<a href="#square" class="rect control" title="Click to Activate Square Shape">Square</a>
 			<span class="toggle">Toggle</span>
 			<span class="clear">Clear</span>
 		</div>
 		<div class="container">
 			<div id="paper"></div>
 			<img  src="http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/mackerel-sky-a4jag8-sw.jpg" />
 		</div>
 	</body>
 </html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script src="http://yandex.st/raphael/1.5.2/raphael.min.js"></script>
	<script>
	/**
	* A Simple Vector Shape Drawing App with RaphaelJS and jQuery
	* copyright 2010 Kayla Rose Martin - Licensed under the MIT license
	* Inspired by http://stackoverflow.com/questions/3582344/draw-a-connection-line-in-raphaeljs
	**/
	function Circle(startX, startY, width, raphael) {
	var start = {
	x: startX,
	y: startY,
	w: width
	};
	var end = {
	w: width
	};
	var getWidth = function() {
	return end.w;
	};
	var redraw = function() {
	node.attr({r: getWidth()});
	}

	var node = raphael.circle(start.x, start.y, getWidth());
	node.attr({'fill': 'yellow', 'fill-opacity':0.3});
	return {
	updateStart: function(x, y) {
	start.x = x;
	start.y = y;
	redraw();
	return this;
	},
	updateEnd: function(x, y) {
	var v = {
	x: Math.abs(x - start.x),
	y: Math.abs(y - start.y)
	};
	//Radius
	end.w = Math.sqrt((Math.pow(v.x, 2) + Math.pow(v.y, 2)));
	redraw();
	return this;
	},
	clear: function() {
	node.remove();
	}
	};
	};
	function Rect(startX, startY, width, height, raphael) {
	var start = {
	x: startX,
	y: startY,
	w: width,
	h: height
	};
	var end = {
	w: width,
	h: height
	};
	var getWidth = function() {
	return end.w;
	};
	var getHeight = function() {
	return end.h;
	};
	var redraw = function() {
	node.attr({width: getWidth(), height: getHeight()});
	}

	var node = raphael.rect(start.x, start.y, getWidth(), getHeight());
	node.attr({'fill': 'red', 'fill-opacity':0.3});

	return {
	updateStart: function(x, y) {
	start.x = x;
	start.y = y;
	redraw();
	return this;
	},
	updateEnd: function(x, y) {
	var v = {
	x: Math.abs(x - start.x),
	y: Math.abs(y - start.y)
	};
	//Width
	var width = Math.sqrt((Math.pow(v.x, 2) + Math.pow(v.y, 2)));
	end.h = width;
	end.w = width;
	redraw();
	return this;
	},
	clear: function() {
	node.remove();
	}
	};
	};
	$(function() {
	var $paper = $("#paper");
	var $controls = $('.control');
	var paper = Raphael("paper",0, 0, 300, 400);
	var painter = {};
	var shapes = [];
	painter.brush = function(){};

	$('.rect').bind('click', function(e){
	$controls.removeClass('active');
	$(this).addClass('active');
	painter.brush = function(e) {
	var shape = Rect(e.layerX, e.layerY, 5, 5, paper);
	shapes.push(shape);
	$paper.bind('mousemove', function(e) {
	shape.updateEnd(e.layerX, e.layerY);
	});
	};
	});

	$('.circ').bind('click', function(){
	$controls.removeClass('active');
	$(this).addClass('active');
	painter.brush = function(e) {
	var shape = Circle(e.layerX, e.layerY, 5, paper);
	shapes.push(shape);
	$paper.bind('mousemove', function(e) {
	shape.updateEnd(e.layerX, e.layerY);
	});
	};
	});

	$('.toggle').bind('click', function(e){
	$paper.toggle();
	});
	$('.clear').bind('click', function(e){
	while(shapes.length > 0)
	{
	var shape = shapes.pop();
	console.log(shape);
	shape.clear();
	}
	$(shapes).each(function(i){
	this.remove();
	}).toggle();
	});

	$paper.bind('mousedown', function(e){
	painter.brush.call(this, e);
	});

	$paper.bind('mouseup', function(e) {
	$(this).unbind('mousemove');
	});
	});
	</script>
	<style>
	html, body {
	overflow: hidden;
	}
	svg {
	border:solid 1px #000;
	}
	.controls {
	width: 514px;
	margin-bottom: 10px;
	}
	.container {
	position:relative;
	width: 514px;
	height: 350px;
	overflow:hidden;
	}
	.control.active:before {
	content: " X";
	}
	.container img {
	position:absolute;
	top: 0;
	left: 0;
	z-index:-1;
	}
	.controls span{
	float: right;
	padding-left: 10px;
	}
	</style>
	</head>
	<body>
	<div class="controls">
	<a href="#circle" class="circ control" title="Click to Activate Circle Shape">Circle</a>
	<a href="#square" class="rect control" title="Click to Activate Square Shape">Square</a>
	<span class="toggle">Toggle</span>
	<span class="clear">Clear</span>
	</div>
	<div class="container">
	<div id="paper"></div>
	<img src="http://science.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Science/Images/Content/mackerel-sky-a4jag8-sw.jpg" />
	</div>
	</body>
	</html>