Draw line using third party java script file
As explained in above post that the third party java script file makes our task very easier to draw objects.
Now by using this java script file, I would like to share my HTML page and java script code to generate below.
Output:
 |
Note : This is a basic HTML page, so it is not specific to technology
Input :-
User enters number of rectangles in input text box and clicks on “Generate rectangles”, to generate random rectangles.
It should generate mentioned number of rectangles with random height and width but base lined bottoms (similar to a graph).
 |
When user clicks on “Generate button” giving number of input rectangles as 10.
 |
Now output: When user clicks on Display Layout, we should draw only the outline or layout of the given input graph.
|
Note:
If you would like to copy the below HTML page to run, Make sure that the third party graphics JavaScript file is downloaded into your machine and placed in this application folder where you are creating this HTML page.
Down third party JavaScript file by clicking here
wz_jsgraphics.zip download
HTML File :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Rectangles</title>
<link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css" />
</head>
<body>
<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>
<script type="text/javascript" language="javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" language="javascript">
var jg = new jsGraphics("Canvas"); // Use the "Canvas" div for drawing
</script>
<script type="text/javascript" language="javascript">
var orgX=50;
var orgY=200;
var minWdth=20;
var minHght=30;
var maxWdth=60;
var maxHght=120;
var rndFactor=10;
var lnCntr=0;
var tmr=50;
var iprects=null;
var argCnt;
var inpCntr=0;
var rects=new Array();
var ipTmr=50;
var optmr=50;
var recCntr=0;
function rect()
{
var width;
var height;
var id;
var x1;
var y1;
}
function generaterectangles_clk()
{
var txtRec=document.getElementById('txtRects');
if(txtRec.value=='')
{
alert('Please enter number of rectangles to generate');
txtRec.focus();
return;
}
if(!IsNumber(txtRec.value))
{
alert('Please enter numeric value');
txtRec.focus();
return;
}
var numRects=txtRec.value;
if(numRects<3 || numRects>30)
{
alert('Number of rectangles to generate should be between 3 and 30');
txtRec.focus();
return;
}
orgX=50;
orgY=400;
argCnt=numRects;
inpCntr=0;
rects=new Array();
GenerateRects();
}
function GenerateRects()
{
inpCntr++;
if(inpCntr<=argCnt)
{
var rand_no;
var recWth,recHgt;
rand_no = Math.random();
recWth=Math.floor(minWdth+(maxWdth-minWdth)*rand_no);
recHgt=Math.floor(minHght+(maxHght-minHght)*rand_no);
var objRect=new rect();
objRect.width=recWth;
objRect.height=recHgt;
objRect.id=(inpCntr);
rects[rects.length]=objRect;
DefineRects(rects);
setTimeout('GenerateRects();',ipTmr);
}
else
{
var divdisp=document.getElementById('div_recIndx');
divdisp.style.display='none';
divdisp.innerText='';
}
}
function dispRecIndex(x1,y1,txt)
{
var divdisp=document.getElementById('div_recIndx');
divdisp.style.display='block';
divdisp.innerText=txt;
divdisp.style.left=x1;
divdisp.style.top=y1;
}
function DefineRects(argRects)
{
jg.clear();
var x1=orgX;
var y1=orgY;
var buf=5;
var crd=findPosition(document.getElementById('div_map'));
var maxY=crd[1]-buf;
var maxX=document.getElementById('div_map').offsetWidth+crd[0]-buf;
var minY=crd[1]-document.getElementById('div_map').offsetHeight;
var minX=crd[0];
var objRect=new rect();
for(i=0;i<argRects.length;i++)
{
objRect=argRects[i];
if(x1<maxX && x1>minX)
{
objRect.x1=x1;
objRect.y1=y1;
x1+=objRect.width;
}
else
{
for(j=i;j<argRects.length;j++)
argRects[j]=null;
break;
}
if(y1<maxY && y1>minY)
{
objRect.y1=maxY;
}
argRects[i]=objRect;
}
iprects=argRects;
for(i=0;i<argRects.length;i++)
{
if(argRects[i]==null)
break;
objRect=argRects[i];
var xc=new Array();
var yc=new Array();
xc[0]=objRect.x1;
yc[0]=objRect.y1;
xc[1]=objRect.x1+objRect.width;
yc[1]=objRect.y1;
xc[2]=objRect.x1+objRect.width;
yc[2]=objRect.y1-objRect.height;
xc[3]=objRect.x1;
yc[3]=objRect.y1-objRect.height;
xc[4]=objRect.x1;
yc[4]=objRect.y1;
clr=clr1;
dispRecIndex((xc[0]+xc[1])/2,(yc[0]+yc[2])/2,(i+1));
drawRect(xc,yc);
}
}
</script>
<script type="text/javascript" language="javascript">
function IsNumber(argText)
{
var nums='0123456789';
for(i=0;i<argText.length;i++)
{
if(nums.indexOf(argText.charAt(i))==-1)
return false;
}
return true;
}
var clr="red";
var clr1='red';
var clr2='green';
var clr3='blue';
var strk=2;
function drawRect(xc,yc)
{
jg.setStroke(strk);
jg.setColor(clr);
jg.drawPolygon(xc,yc);
jg.paint();
}
function findPosition(element)
{
var left = 0;
var top = 0;
if (element != null)
{
while (element.offsetParent)
{
left += element.offsetLeft;
if (element.offsetParent.scrollLeft) {left -= element.offsetParent.scrollLeft; }
top += element.offsetTop;
if (element.offsetParent.scrollTop) { top -= element.offsetParent.scrollTop; }
element = element.offsetParent;
}
left += element.offsetLeft + document.body.scrollLeft - document.body.clientLeft + 7;
top += element.offsetTop + document.body.scrollTop - document.body.clientTop;
}
return [left,top];
}
</script>
<script type="text/javascript" language="javascript">
function DisplayText(argText)
{
var obj=document.getElementById('div_map');
var divdwn=document.getElementById('div_download');
divdwn.style.display='block';
divdwn.innerText=argText;
var crd=findPosition(obj);
divdwn.style.left=crd[0];
divdwn.style.top=crd[1]+40;
document.getElementById('btnDisp').style.display='block';
}
</script>
<script type="text/javascript" language="javascript">
function rect()
{
var x1,y1,x2,y2,x3,y3,x4,y4;
}
function GetRectangles()
{
if(iprects==null)
return;
var rectCrds=new Array();
for(i=0;i<iprects.length;i++)
{
var objRect=iprects[i];
var objrect=new rect();
objrect.x3=objRect.x1;
objrect.y3=objRect.y1-objRect.height;
objrect.x2=objRect.x1+objRect.width;
objrect.y2=objRect.y1;
objrect.x1=objrect.x3;
objrect.y1=objrect.y2;
objrect.x4=objrect.x2;
objrect.y4=objrect.y3;
rectCrds[i]=objrect;
}
return rectCrds;
}
function sortRects(rects)
{
for(var c=0;c<rects.length;c++)
{
var rect=rects[c];
for(var k=c+1;k<rects.length;k++)
{
var tmprect=rects[k];
if(tmprect.x1<rect.x1)
{
rects[c]=tmprect;
rects[k]=rect;
}
}
}
return rects;
}
function DisplayLayout()
{
lnCntr=0;
var rectCrds=GetRectangles();
rectCrds=sortRects(rectCrds);
var xc=new Array();
var yc=new Array();
var cnt=-1;
var prevRect=null;
var nextRect=null;
for(var c=0;c<rectCrds.length;c++)
{
var actRec=rectCrds[c];
if(c+1==rectCrds.length)
nextRect=null;
else
nextRect=rectCrds[c+1];
if(c==0)
{
cnt++;
xc[cnt]=actRec.x1;
yc[cnt]=actRec.y1;
cnt++;
xc[cnt]=actRec.x3;
yc[cnt]=actRec.y3;
if(nextRect!=null && nextRect.x1<actRec.x4)
{
cnt++;
xc[cnt]=nextRect.x1;
yc[cnt]=actRec.y3;
}
else
{
cnt++;
xc[cnt]=actRec.x4;
yc[cnt]=actRec.y4;
}
}
if(nextRect!=null)
{
if((nextRect.x1/actRec.x2)==1 && (actRec.y2/nextRect.y1)==1)
{
cnt++;
xc[cnt]=nextRect.x3;
yc[cnt]=nextRect.y3;
cnt++;
xc[cnt]=nextRect.x4;
yc[cnt]=nextRect.y4;
}
else
{
if(nextRect!=null)
{
if(nextRect.x3==actRec.x4)
{
cnt++;
xc[cnt]=nextRect.x3;
yc[cnt]=nextRect.y3;
cnt++;
xc[cnt]=nextRect.x4;
yc[cnt]=nextRect.y4;
}
else if(nextRect.x3<actRec.x4)
{
if(nextRect.y3<actRec.y3)
{
xc[cnt]=nextRect.x3;
yc[cnt]=actRec.y3;
cnt++;
xc[cnt]=nextRect.x3;
yc[cnt]=nextRect.y3;
cnt++;
xc[cnt]=nextRect.x4;
yc[cnt]=nextRect.y4;
}
else
{
cnt++;
xc[cnt]=actRec.x4;
yc[cnt]=actRec.y4;
if(actRec.x4<nextRect.x4)
{
cnt++;
xc[cnt]=actRec.x4;
yc[cnt]=nextRect.y3;
cnt++;
xc[cnt]=nextRect.x4;
yc[cnt]=nextRect.y4;
}
else
{
cnt++;
xc[cnt]=actRec.x2;
yc[cnt]=actRec.y2;
c++;
}
}
}
else
{
if(prevRect!=null && prevRect.x2>actRec.x2)
{
cnt++;
xc[cnt]=actRec.x2;
yc[cnt]=prevRect.y3;
cnt++;
xc[cnt]=nextRect.x1;
yc[cnt]=prevRect.y3;
}
else
{
cnt++;
xc[cnt]=actRec.x2;
yc[cnt]=actRec.y2;
cnt++;
xc[cnt]=nextRect.x1;
yc[cnt]=nextRect.y1;
}
cnt++;
xc[cnt]=nextRect.x3;
yc[cnt]=nextRect.y3;
cnt++;
xc[cnt]=nextRect.x4;
yc[cnt]=nextRect.y4;
}
}
}
}
else
{
if(prevRect!=null && actRec.x2>prevRect.x2)
{
cnt++;
xc[cnt]=actRec.x2;
yc[cnt]=actRec.y2;
}
}
prevRect=actRec;
}
cnt++;
xc[cnt]=xc[0];
yc[cnt]=yc[0];
lyx=xc;
lyy=yc;
drawLines();
}
var lyx=new Array();
var lyy=new Array();
var lyclr="black";
var lystrk=4;
function drawLines()
{
jg.setColor(lyclr);
jg.setStroke(lystrk);
jg.drawLine(lyx[lnCntr],lyy[lnCntr],lyx[lnCntr+1],lyy[lnCntr+1]);
lnCntr++;
jg.paint();
if(lnCntr<lyx.length)
{
setTimeout("drawLines()",tmr);
}
}
</script>
<table id="maintable" style="width:800px;">
<tr class="tr_header">
<td style="width:40%;text-align:right;">Number of Input Rectangles :</td><td><input type="text" id="txtRects" />
</td>
</tr>
<tr>
<td class="tr_header" style="text-align:center;" colspan="2">
<input type="button" value="Generate Rectangles" class="cssbutton" style="width:200px" onclick="generaterectangles_clk();"/>
<input type="button" value="Display Layout" id="btnLayout" onclick="DisplayLayout();" style="width:200px" class="cssbutton"/>
</td>
</tr>
<tr>
<td colspan="2">
<br />
<div id="div_map" style="width:800px;height:600px;border: 3px solid #ccc; " >
</div>
</td></tr>
</table>
<div id="div_download" class="div_down" style="position:absolute;height:500;display:none"></div>
<div id="div_recIndx" style="position:absolute;height:50;display:none"></div>
</body>
</html>
No comments:
Post a Comment