Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2D drawing using HR tags.

    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.
    ------------------
    Code:
    <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>
    ------------
    Last edited by WA; 09-28-2010 at 07:35 PM.

  • #2
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2D drawing with HR tags

    28-09-10

    My earlier post had included the HTML file as text; the 'big grin' has replaced two characters ":" and "D" in three places.

    The HTML file is now enclosed as a zip file.
    Attached Files Attached Files


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •