Home > JavaScript > JavaScript – line

JavaScript – line

Lines in HTML? Yes how about 45 degree or 97 degree angle? Do we have it? The answer is no, but yes with backslash, hmm!…

123

<!-- Javascript includes -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>

<div id="box" style="position:absolute; width:600px;height:300px;
	background-color:black;">
		<div id="_a" style="position:absolute;width:50px;height:50px;
		background-color:white; top:80px;left:90px;">
		</div>

</div>

<script>
	$(document).ready(function() {
		// Line draw formula....
		// (x-x0)/(x1-x0) = (y-y0)/(y1-y0)
		//------------------------------------
		// This for Y to fix
		_xfix = (function(y,x0,x1,y0,y1){
			return ((y-y0)*(x1-x0)/(y1-y0))+x0;
		});
		// This for X to fix
		_yfix = (function(x,x0,x1,y0,y1){
			return ((x-x0)*(y1-y0)/(x1-x0))+y0;
		});

		_aa = (function (dv) {
			x0= 0; x1 = $(dv).width();
			y0= 0; y1 = $(dv).height();

			var x; var y;
			if ( Math.abs(x0-x1) > Math.abs(y0+y1) ) {
				// x
				x = Math.min(x0,x1);
				while(x<x1){
					y = _yfix(x,x0,x1,y0,y1);
					_drawpoint (x,y);
					x++;
				}

			}else{
				// y
				y = Math.min(y0,y1);
				while (y<y1){
					x = _xfix(y,x0,x1,y0,y1);
					_drawpoint (x,y);
					y++;
				}				

			}

		});

		// Draw the points
		_drawpoint = (function(x,y){
			$('#_a').append('<div id="px' + x + y +
			'" style="position:absolute;background-color:GREEN"></div>');
			$('#px' + x + y ).css({
				'width':'1px',
				'height':'1px',
				'top':y,
				'left':x
			});
		});

		_aa('#_a');
	});
</script>

Download:
http://dpaste.de/CqgR/
Advertisements
Categories: JavaScript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: