Graphical Plotter //Javascript Class

jonasraoni (Jonas Raoni Soares Silva) — Fri, 09 Sep 2005 07:25:34 GMT

[UPDATED CODE AND HELP CAN BE FOUND HERE]

An unuseful thing to draw using javascript, it's slow as hell :)



//+ Jonas Raoni Soares Silva

//@ http://jsfromhell.com/dhtml/graphical-plotter [v1.0]



Canvas = function(){

	var o = this;

	( o.penPos = { x: 0, y: 0 }, o.pixelSize = 10, o.pen = { style: "solid", size: 1, color: "#000" }, o.brush = { style: "solid", color: "#000" } );

};

with( { p: Canvas.prototype } ){

	p.pixel = function( x, y, color ) {

		var o = this, s = document.body.appendChild( document.createElement( "div" ) ).style;

		return ( s.position = "absolute", s.width = ( o.pen.size * o.pixelSize ) + "px", s.height = ( o.pen.size * o.pixelSize ) + "px", s.fontSize = "1px", s.left = ( x * o.pixelSize ) + "px", s.top = ( y * o.pixelSize ) + "px", s.backgroundColor = color || o.pen.color, o );

	};

	p.line = function( x1, y1, x2, y2 ){

		if( Math.abs( x1 - x2 ) < Math.abs( y1 - y2 ) )

			for( y = Math.min( y1, y2 ) - 1, x = Math.max( y1, y2 ); ++y <= x; canvas.pixel( ( y * ( x1 - x2 ) - x1 * y2 + y1 * x2 ) / ( y1 - y2 ), y ) );

		else

			for( x = Math.min( x1, x2 ) - 1, y = Math.max( x1, x2 ); ++x <= y; canvas.pixel( x, ( x * ( y1 - y2 ) - y1 * x2 + x1 * y2 ) / ( x1 - x2 ) ) );

		return this;

	};

	p.arc = function( x, y, raio, startAngle, degrees ) {

		for( degrees += startAngle; degrees --> startAngle; this.pixel( Math.cos( degrees * Math.PI / 180 ) * raio + x, Math.sin( degrees * Math.PI / 180 ) * raio + y ) ); return this;

	};

	p.rectangle = function( x, y, width, height, rotation ){

		return this.moveTo( x, y ).lineBy( 0, height ).lineBy( width, 0 ).lineBy( 0, -height ).lineBy( -width, 0 );

	};

	p.moveTo = function( x, y ){ var o = this; return ( o.penPos.x = x, o.penPos.y = y, o ); };

	p.moveBy = function( x, y ){ var o = this; return o.moveTo( o.penPos.x + x, o.penPos.y + y ); };

	p.lineTo = function( x, y ){ var o = this; return o.line( o.penPos.x, o.penPos.y, x, y ).moveTo( x, y ); };

	p.lineBy = function( x, y ){ var o = this; return o.lineTo( o.penPos.x + x, o.penPos.y + y ); };

	p.curveTo = function( cx, cy, x, y ){};

	p.polyBezier = function( points ){};

	p.path = function( points ){};

}

Example:



canvas = new Canvas;



canvas.pen.color = "#f00";

canvas.rectangle( 30, 20, 20, 20 );

canvas.pen.color = "#080";

canvas.rectangle( 35, 25, 10, 10 );

canvas.pen.color = "#008";

canvas.arc( 50, 30, 10, 180, 270 );

canvas.arc( 30, 30, 10, 0, 270 );

canvas.pen.color = "#ff0";

DZone Snippets: drawing code

Graphical Plotter //Javascript Class