u jayakodi
09-28-2010, 12:31 PM
u jayakodi
e-mail jayakodiu@yahoo.com
The DIV element is generally used for javascript graphics; the CSS attributes and clip rule make these methods cumbersome and the drawing file when saved is a jungle of DIV elements, one each for every dot, with all attributes.
The <HR> element is the simplest in HTML; I was wondering why there are no <IR> and <VR> elements and saw some vague info on the net. Digging a bit deeper, I have made a few javascript functions which give the <HR> element capabilities like <DIV> graphics, almost.
The following HTML file explains all; soon I may add save function; any suggestion for print function is welcome.
------------------
<html><head><style>
hr{position:absolute;color:#000000;height:1}
span {position="absolute";font-family="arial";font-size=12;filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"}
body{margin:0;cursor:crosshair}
</style></head><body>
<p align="center"><u>2D drawing using HR tags.</u> These are all simple HR tags <i>rotated</i> by IE's matrix.<br>View the source code for functions and code for these samples; print / save to be resolved.<br>by jayakodiu@yahoo.com</p>
<p>Inclined Line</p>
<p>Shapes</p>
</body>
<script>
var jdv,cl,th,ag,pi;cl="#000000";th=1;pi=Math.PI;
function ang(x1,y1,x2,y2){ag=Math.atan2(y2-y1,x2-x1);if(ag<0){ag=ag+2*Math.PI;}}
function jlin(x1,y1,x2,y2){
dx=x2-x1;dy=y2-y1;ln=1+Math.sqrt(dx*dx+dy*dy)
ang(x1,y1,x2,y2)
switch (ag){
case pi:
x1=x2
case 1.5*pi:
y1=y2
default:
if(x2<x1){x1=x2}
if(y2<y1){y1=y2}}
var ele=document.body.appendChild(document.createElement("hr"))
ele.style.width=ln;ele.style.left=x1;ele.style.top=y1
ele.style.filter='progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand")'
cs=Math.cos(ag);sn=Math.sin(ag)
ele.filters.item(0).M11=cs
ele.filters.item(0).M12=-sn
ele.filters.item(0).M21=sn
ele.filters.item(0).M22=cs
ele.style.color=cl;ele.style.height=th}
function rect(x1,y1,x2,y2){jlin(x1,y1,x2,y1);jlin(x2,y1,x2,y2);jlin(x2,y2,x1,y2);jlin(x1,y2,x1,y1);}
function poln(x,y,a,n)
{g=2*pi/n;for(i=1;i<n+1;i++){xx=x+a*Math.cos(i*g);yy=y+a*Math.sin(i*g);jlin(x,y,xx,yy);x=xx;y=yy;}}
function htx(x,y,tt){jdv=document.body.appendChild(document.createElement("span"))
jdv.style.left=x;jdv.style.top=y;jdv.style.filter="";jdv.innerText=tt}
function vtx(x,y,tt){var jdv=document.body.appendChild(document.createElement("span"))
jdv.style.left=x;jdv.style.top=y;jdv.innerText=tt}
//samples
cl="#00aa00"
th=2
jlin(50,50,500,150)
cl="#ff0000"
rect(50,125,150,175)
cl="#0000ff"
poln(90,190,70,3)
poln(180,190,60,4)
poln(280,190,50,5)
poln(380,190,40,6)
//XY chart
cl=0;th=1
jlin(58,300,58,500)
jlin(5,420,510,420)
jlin(5,460,510,460)
jlin(5,500,510,500)
htx(5,475,"Distance")
htx(5,435,"Levels")
cl="#ff00ff";th=3;sx=70;sy=400;
for(i=0; i<9; i++)
{xx=70+i*50;yy=400-2*i*i;jlin(sx,sy,xx,yy);sx=xx;sy=yy;vtx(sx,475,i);vtx(sx,435,2*i*i);}
htx(2,280,"XY chart")
//Sine curve
cl="#ffaa11";sx=600;sy=40;gg=pi/10;
for(i=0; i<51; i++)
{xx=600+50*Math.sin(i*gg);yy=40+10*i;jlin(sx,sy,xx,yy);sx=xx;sy=yy}
cl=0;th=1
jlin(600,40,600,540)
htx(660,210,"Sine Curve")
jdv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'
jdv.style.fontSize=32
jdv.style.textDecoration="underline"
</script>
</html>
------------
e-mail jayakodiu@yahoo.com
The DIV element is generally used for javascript graphics; the CSS attributes and clip rule make these methods cumbersome and the drawing file when saved is a jungle of DIV elements, one each for every dot, with all attributes.
The <HR> element is the simplest in HTML; I was wondering why there are no <IR> and <VR> elements and saw some vague info on the net. Digging a bit deeper, I have made a few javascript functions which give the <HR> element capabilities like <DIV> graphics, almost.
The following HTML file explains all; soon I may add save function; any suggestion for print function is welcome.
------------------
<html><head><style>
hr{position:absolute;color:#000000;height:1}
span {position="absolute";font-family="arial";font-size=12;filter="progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"}
body{margin:0;cursor:crosshair}
</style></head><body>
<p align="center"><u>2D drawing using HR tags.</u> These are all simple HR tags <i>rotated</i> by IE's matrix.<br>View the source code for functions and code for these samples; print / save to be resolved.<br>by jayakodiu@yahoo.com</p>
<p>Inclined Line</p>
<p>Shapes</p>
</body>
<script>
var jdv,cl,th,ag,pi;cl="#000000";th=1;pi=Math.PI;
function ang(x1,y1,x2,y2){ag=Math.atan2(y2-y1,x2-x1);if(ag<0){ag=ag+2*Math.PI;}}
function jlin(x1,y1,x2,y2){
dx=x2-x1;dy=y2-y1;ln=1+Math.sqrt(dx*dx+dy*dy)
ang(x1,y1,x2,y2)
switch (ag){
case pi:
x1=x2
case 1.5*pi:
y1=y2
default:
if(x2<x1){x1=x2}
if(y2<y1){y1=y2}}
var ele=document.body.appendChild(document.createElement("hr"))
ele.style.width=ln;ele.style.left=x1;ele.style.top=y1
ele.style.filter='progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand")'
cs=Math.cos(ag);sn=Math.sin(ag)
ele.filters.item(0).M11=cs
ele.filters.item(0).M12=-sn
ele.filters.item(0).M21=sn
ele.filters.item(0).M22=cs
ele.style.color=cl;ele.style.height=th}
function rect(x1,y1,x2,y2){jlin(x1,y1,x2,y1);jlin(x2,y1,x2,y2);jlin(x2,y2,x1,y2);jlin(x1,y2,x1,y1);}
function poln(x,y,a,n)
{g=2*pi/n;for(i=1;i<n+1;i++){xx=x+a*Math.cos(i*g);yy=y+a*Math.sin(i*g);jlin(x,y,xx,yy);x=xx;y=yy;}}
function htx(x,y,tt){jdv=document.body.appendChild(document.createElement("span"))
jdv.style.left=x;jdv.style.top=y;jdv.style.filter="";jdv.innerText=tt}
function vtx(x,y,tt){var jdv=document.body.appendChild(document.createElement("span"))
jdv.style.left=x;jdv.style.top=y;jdv.innerText=tt}
//samples
cl="#00aa00"
th=2
jlin(50,50,500,150)
cl="#ff0000"
rect(50,125,150,175)
cl="#0000ff"
poln(90,190,70,3)
poln(180,190,60,4)
poln(280,190,50,5)
poln(380,190,40,6)
//XY chart
cl=0;th=1
jlin(58,300,58,500)
jlin(5,420,510,420)
jlin(5,460,510,460)
jlin(5,500,510,500)
htx(5,475,"Distance")
htx(5,435,"Levels")
cl="#ff00ff";th=3;sx=70;sy=400;
for(i=0; i<9; i++)
{xx=70+i*50;yy=400-2*i*i;jlin(sx,sy,xx,yy);sx=xx;sy=yy;vtx(sx,475,i);vtx(sx,435,2*i*i);}
htx(2,280,"XY chart")
//Sine curve
cl="#ffaa11";sx=600;sy=40;gg=pi/10;
for(i=0; i<51; i++)
{xx=600+50*Math.sin(i*gg);yy=40+10*i;jlin(sx,sy,xx,yy);sx=xx;sy=yy}
cl=0;th=1
jlin(600,40,600,540)
htx(660,210,"Sine Curve")
jdv.style.filter='progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'
jdv.style.fontSize=32
jdv.style.textDecoration="underline"
</script>
</html>
------------