<!DOCTYPE HTML>
<html>
<head>
<title>jPixelPlot & divCanvas Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="./class.jpixelplot.js"></script>
</head>
<body>
<div class='divCanvasB'></div>
<style>
.divCanvasB {
position:absolute;
left:400px;
top:20px;
}
.divCanvasB .grid .col {
border-radius:0px;
width:3px;
height:3px;
background-color:black;
display:inline-block;
border:1px solid #222;
}
.divCanvasB .grid .row {
height:5px;
}
</style>
<script>
function divCanvas ()
{
// BEGIN DISPLAY FUNCTIONS -- jQuery Required //
this.target = ""; // will be class name or id .className or #idName
// draw grid (useful for small pixel testing not requiring canvas)
this.make_grid = function(x,y,target) // make this before trying to draw to it
{
var grid = [[],[]];
var tempx, tempy;
var divcanvas = $(target);
this.target = target;
var gridstr = '<div class="grid">';
for(tempy=0;tempy<y; tempy++)
{
gridstr += "<div class='row'>";
for(tempx=0;tempx<x; tempx++)
gridstr += "<div class='col x"+tempx+" y"+tempy+"'></div>";
gridstr += "</div>";
}
gridstr += "</div>";
divcanvas.html(gridstr);
} // end : this.make_grid = function(x,y,target)
this.draw = {
that:this,
pixel : function(x,y,color)
{
var cell = $(this.that.target+" .col.x"+x+".y"+y);
cell.css("background-color",color);
},
animate_points : function(coords,color,speed,cur_coord) // try it by passing a plotted set of coordinates
{
var num_coords = coords.length;
var this_object = this.that;
if ( typeof(cur_coord) == 'undefined')
var cur_coord = 0;
if ( typeof(coords[cur_coord + 1]) == 'undefined')
return false;
var timeoutID = window.setTimeout( function() {
cur_coord++;
// in case you were wondering how to access the class internals from a setTimeout... ; )
this_object.draw.pixel(coords[cur_coord].x, coords[cur_coord].y, color);
this_object.draw.animate_points(coords, color, speed, cur_coord);
} , speed ); // third variable passed to setTimeout is the data to send to the timeout
},
points : function(coords, color)
{
// plots pixels from a set of coordinates
var num_coords = coords.length;
if(num_coords > 0)
for(i=0;i<num_coords;++i)
this.that.draw.pixel(coords[i].x, coords[i].y, color);
},
curve : function(x,y,xx,yy, color)
{
var coords = this.that.plot.curve(x,y,xx,yy);
this.that.draw.points(coords, color);
},
line : function(x,y,xx,yy,color)
{
var coords = this.that.plot.line(x,y,xx,yy);
this.that.draw.points(coords, color);
}
}; // end : : subclass : : this.draw
// END DISPLAY FUNCTIONS -- jQuery Required //
// jPixelPlot (another class required to plot pixels for lines,curves,shapes)
this.plot = new jPixelPlot;
} // END :: class divCanvas
var jDivCanvas = new divCanvas();
var width = 90; var height = 90;
jDivCanvas.make_grid (width, height, ".divCanvasB") // make something to draw some pixels on
jDivCanvas.draw.line(1,1,20,20,"red");
jDivCanvas.draw.curve(1,1,20,20,"yellow");
jDivCanvas.draw.curve(20,20,1,1,"blue"); // reverse coordinates to reverse arc
jDivCanvas.draw.curve(0,0,85,85,"green");
jDivCanvas.draw.line(0,0,25,45,"red");
jDivCanvas.draw.animate_points( jDivCanvas.plot.line(10,0,24,25) , "white", 100 );
jDivCanvas.draw.animate_points( jDivCanvas.plot.line(25,0,64,75) , "grey", 20 );
</script>
</body>
</html>
|
Download
