Drawing a single Polyline using SVG

jrobertson (James Robertson) — Sat, 22 Mar 2008 19:15:43 GMT

This code is very similar to Draw a series of lines using SVG [dzone.com] but now we can draw a series of points at the same time the mouse button is pressed and is moving. Here's an example of the SVG squiggle output [twitxr.com].



		xmlns:xlink="http://www.w3.org/1999/xlink" >

  



    y="0" width="100%" height="100%" fill="yellow" />

  



  



  Click something to move it

  Click nothing to add something

*update 7:44pm*
By simply making the id unique using a global variable count it was possible to draw multiple polylines [twitxr.com].

Draw a series of lines using SVG

jrobertson (James Robertson) — Sat, 22 Mar 2008 16:50:18 GMT

This code draws a line every time the user presses the mouse button. Here is an example of the SVG output [twitxr.com].

Tested in Firefox 3 beta 4.



 

 onclick="addPoint(evt, document.getElementById('pl1'));"> 

  click to add point to polyline

Closest Polyline Point //Javascript Function

jonasraoni (Jonas Raoni Soares Silva) — Fri, 09 Sep 2005 04:40:06 GMT

Given a dot and a set of lines, it returns the nearest dot over one of the given lines.

[UPDATED CODE AND HELP CAN BE FOUND HERE]



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/math/closest-polyline-point [v1.0]



closestPolyLinePoint = function( px, py, x0, y0, x1, y1, etc, etc, etc ){

	function dotLineLength( x, y, x0, y0, x1, y1, o ){

		function lineLength( x, y, x0, y0 ){

			return Math.sqrt( ( x -= x0 ) * x + ( y -= y0 ) * y );

		}

		if( o && !( o = function( x, y, x0, y0, x1, y1 ){

			if( !( x1 - x0 ) ) return { x: x0, y: y };

			else if( !( y1 - y0 ) ) return { x: x, y: y0 };

			var left, tg = -1 / ( ( y1 - y0 ) / ( x1 - x0 ) );

			return { x: left = ( x1 * ( x * tg - y + y0 ) + x0 * ( x * - tg + y - y1 ) ) / ( tg * ( x1 - x0 ) + y0 - y1 ), y: tg * left - tg * x + y };

		}( x, y, x0, y0, x1, y1 ), o.x >= Math.min( x0, x1 ) && o.x <= Math.max( x0, x1 ) && o.y >= Math.min( y0, y1 ) && o.y <= Math.max( y0, y1 ) ) ){

			var l1 = lineLength( x, y, x0, y0 ), l2 = lineLength( x, y, x1, y1 );

			return l1 > l2 ? l2 : l1;

		}

		else {

			var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;

			return Math.abs( a * x + b * y + c ) / Math.sqrt( a * a + b * b );

		}

	};

	for( var args = [].slice.call( arguments, 0 ), lines = []; args.length > 4; lines[lines.length] = { y1: args.pop(), x1: args.pop(), y0: args.pop(), x0: args.pop() } );

	if( !lines.length )

		return { x: px, y: py };

	var l, i, o = lines[0], lower = { i: 0, l: dotLineLength( px, py, o.x0, o.y0, o.x1, o.y1 ) };

	for( i in lines )

		if( lower.l > ( l = dotLineLength( px, py, ( o = lines[i] ).x0, o.y0, o.x1, o.y1 ) ) )

			lower = { i: i, l: l };

	py = py < Math.min( ( o = lines[lower.i] ).y0, o.y1 ) ? Math.min( o.y0, o.y1 ) : py > Math.max( o.y0, o.y1 ) ? Math.max( o.y0, o.y1 ) : py;

	px = px < Math.min( o.x0, o.x1 ) ? Math.min( o.x0, o.x1 ) : px > Math.max( o.x0, o.x1 ) ? Math.max( o.x0, o.x1 ) : px;

	return Math.abs( o.x0 - o.x1 ) < Math.abs( o.y0 - o.y1 ) ? { x: ( py * ( o.x0 - o.x1 ) - o.x0 * o.y1 + o.y0 * o.x1 ) / ( o.y0 - o.y1 ), y: py }

	: { x: px, y: ( px * ( o.y0 - o.y1 ) - o.y0 * o.x1 + o.x0 * o.y1 ) / ( o.x0 - o.x1 ) };

};

DZone Snippets: polyline code

Drawing a single Polyline using SVG

Draw a series of lines using SVG

Closest Polyline Point //Javascript Function