kaylarose/RaphaelJSShapeDrawingApp.html

## 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>