drawing vector lines with javascript

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Stefan Burger
    #1

    drawing vector lines with javascript

    Those of you who are in need for drawing vector lines might be interested in
    the following code.

    DrawLine( x1, y1, x2, y2, color ) draws a vector line from any Point x1,y1
    to any Point x2,y2 in any color (string format #RRGGBB) by using div-tags.

    regards
    Stefan

    ############### code starts here########### ##############
    <html>

    <head>
    <title>Vector Line Demo</title>
    </head>

    <body>

    <script language="javas cript">
    function DrawLinHor( x, y, size, color){
    var str;
    if (x>=0 && y>=0 && size>0){
    str = '<div style="position :absolute; left:' + x + 'px; top:' + y + 'px;
    width:' + size + 'px; height:1px;back ground-color:' + color + '"><table
    height=1 width=' + size + '></table></div>\n';
    } else {
    str = '';
    }
    document.write( str);
    }

    function DrawLinVert( x, y, size, color){
    var str;
    if (x>=0 && y>=0 && size>0){
    str = '<div style="position :absolute; left:' + x + 'px; top:' + y + 'px;
    width:1px; height:' + size + 'px;background-color:' + color + '"><table
    height=' + size + ' width=1></table></div>\n';
    } else {
    str = '';
    }
    document.write( str);
    }

    function DrawLine( x1, y1, x2, y2, color ){
    deltax=Math.abs (x2-x1);
    deltay=Math.abs (y2-y1);
    if (deltax>=deltay ){
    if (y2<y1) {
    help=x1;
    x1=x2;
    x2=help;
    help=y1;
    y1=y2;
    y2=help;
    }

    deltax=x2-x1;
    deltay=y2-y1;
    dstep=deltax/(deltay+1);

    x=x1;
    if (dstep<0){
    x=x+dstep;
    }

    for (y=y1;y<=y2;y++ ){
    size=((x+dstep)-(x));
    if (dstep<0) {
    DrawLinHor( (x)-(dstep)+(size), (y),Math.abs(si ze),color );
    } else {
    DrawLinHor( (x),(y),Math.ab s(size),color );
    }
    x=x+dstep;
    }
    }
    else {
    if (x2<x1) {
    help=x1;
    x1=x2;
    x2=help;
    help=y1;
    y1=y2;
    y2=help;
    }

    deltax=x2-x1;
    deltay=y2-y1;
    dstep=deltay/(deltax+1);

    y=y1;
    if (dstep<0){
    y=y+dstep;
    }

    for (x=x1;x<=x2;x++ ){
    size=((y+dstep)-(y))
    if (dstep<0){
    DrawLinVert( (x),(y)-(dstep)+(size), Math.abs(size), color );
    } else {
    DrawLinVert( (x),(y),Math.ab s(size),color );
    }
    y=y+dstep;
    }
    }
    }

    DrawLine(100,15 0,50,250,"#FFFF FF");
    </script>

    </body>
    </html>
    ############### code ends here########### ##############


    Tags: +javascript +drawline, vector lines
    • Jim Ley
      #2
      Re: drawing vector lines with javascript

      On Thu, 26 Jun 2003 18:53:12 +0200, "Stefan Burger"
      <stefan.burger@ nospamforme.de> wrote:
      [color=blue]
      >Those of you who are in need for drawing vector lines might be interested in
      >the following code.
      >
      >DrawLine( x1, y1, x2, y2, color ) draws a vector line from any Point x1,y1
      >to any Point x2,y2 in any color (string format #RRGGBB) by using div-tags.[/color]

      <URL: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm >

      Has quite an extensive library for drawing vector graphics with
      javascript.

      For me SVG or even Flash provide much more sensible APIs for drawing
      vector graphics through javascript.

      Jim.
      --
      comp.lang.javas cript FAQ - http://jibbering.com/faq/

        Comment

        • Neil Shadrach
          #3
          Re: drawing vector lines with javascript

          Stefan Burger wrote:[color=blue]
          > Those of you who are in need for drawing vector lines might be interested in
          > the following code.
          >
          > DrawLine( x1, y1, x2, y2, color ) draws a vector line from any Point x1,y1
          > to any Point x2,y2 in any color (string format #RRGGBB) by using div-tags.
          > [snip code][/color]

          Interesting. Yesterday I was playing about with div-tags to draw simple bar graphs.
          However I found that IE didn't seem to respect the exact height in pixels -
          in particular it seemed to default to a minimum value below which it wouldn't go -
          which mean that straight line plots weren't and a sine wave was rather jagged.
          It all looked quite respectable in Mozilla. Anyone care to offer pointers?
          We already use GD-graph for complex graphs and have dabbled with SVG - this was
          just to explore a lightweight solution for simple cases.

            Comment

            • Neil Shadrach
              #4
              Re: drawing vector lines with javascript

              Neil Shadrach wrote:[color=blue]
              > Stefan Burger wrote:
              >[color=green]
              >> Those of you who are in need for drawing vector lines might be
              >> interested in
              >> the following code.
              >>
              >> DrawLine( x1, y1, x2, y2, color ) draws a vector line from any Point
              >> x1,y1
              >> to any Point x2,y2 in any color (string format #RRGGBB) by using
              >> div-tags.
              >> [snip code][/color]
              >
              >
              > Interesting. Yesterday I was playing about with div-tags to draw simple
              > bar graphs.
              > However I found that IE didn't seem to respect the exact height in pixels -
              > in particular it seemed to default to a minimum value below which it
              > wouldn't go -
              > which mean that straight line plots weren't and a sine wave was rather
              > jagged.
              > It all looked quite respectable in Mozilla. Anyone care to offer pointers?
              > We already use GD-graph for complex graphs and have dabbled with SVG -
              > this was
              > just to explore a lightweight solution for simple cases.[/color]

              Apologies for replying to own post.
              The minimum appears to be the height of a character - although there are no characters.
              Following Stefan's approach and putting an empty table with width and height of 1 within
              the div stops this but there must be a neater way?

                Comment

                • Erick T. Barkhuis
                  #5
                  Re: drawing vector lines with javascript


                  Neil Shadrach [on Fri, 27 Jun 2003 09:47:22 +0100]:
                  [color=blue]
                  > The minimum appears to be the height of a
                  > character - although there are no characters.[/color]

                  So, how about adding "font-size:1px;" to the <div>'s?

                  --
                  Erick T. Barkhuis RI
                  WebWax at http://www.webwax.nl

                  "An undefined problem has an infinite number of solutions." - Robert A. Humphrey

                    Comment

                    • Neil Shadrach
                      #6
                      Re: drawing vector lines with javascript

                      Erick T. Barkhuis wrote:[color=blue]
                      > Neil Shadrach [on Fri, 27 Jun 2003 09:47:22 +0100]:
                      >
                      >[color=green]
                      >>The minimum appears to be the height of a
                      >>character - although there are no characters.[/color]
                      >
                      >
                      > So, how about adding "font-size:1px;" to the <div>'s?
                      >[/color]

                      Seems to work. Thanks. Thought I'd tried setting a small font. :(

                        Comment

                        • Lasse Reichstein Nielsen
                          #7
                          Re: drawing vector lines with javascript

                          Neil Shadrach <neil.shadrach@ corryn.com> writes:
                          [color=blue]
                          > Erick T. Barkhuis wrote:[/color]
                          [color=blue][color=green]
                          > > So, how about adding "font-size:1px;" to the <div>'s?[/color][/color]
                          [color=blue]
                          > Seems to work. Thanks. Thought I'd tried setting a small font. :([/color]

                          Better yet, try setting "line-height:0px;".
                          It still doesn't work in even older IE's, I tried the same when
                          playing with "slants". The solution was to add a comment to the body
                          of the div, i.e.,
                          <div class="foo"><!-- --></div>
                          That removes the spurious text-node inside the div in IE 5 (maybe 5.5 too)

                          <URL:http://www.infimum.dk/HTML/slantinfoHowto. html>

                          Remember to check whether your page sets the browsers in Quirks or Standards
                          mode (I recommend Standards).
                          /L
                          --
                          Lasse Reichstein Nielsen - lrn@hotpop.com
                          Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
                          'Faith without judgement merely degrades the spirit divine.'

                            Comment

                            • Lasse Reichstein Nielsen
                              #8
                              Re: drawing vector lines with javascript

                              Neil Shadrach <neil.shadrach@ corryn.com> writes:
                              [color=blue]
                              > Above didn't work for me but after a wander the following did
                              >
                              > http://www.infimum.dk/HTML/slantinfo.html[/color]

                              Doh, yes. I tried to change from that url meant to /slantHowto.html ,
                              but fumbled the editing.

                              /L
                              --
                              Lasse Reichstein Nielsen - lrn@hotpop.com
                              Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
                              'Faith without judgement merely degrades the spirit divine.'

                                Comment

                                • cwdjr
                                  #9
                                  Re: drawing vector lines with javascript

                                  An example of curved figures is at
                                  http://www.wtv-zone.com/cwdjrsxyz/ge...ve_write.html/ . You
                                  can use a color gradient in a geometric figure filled with color as
                                  seen at http://www.wtv-zone.com/cwdjrsxyz/ge...e_write2.html/
                                  .. You also can do radial color gradients as at
                                  WTV-ZONE.COM
                                  http://www.wtv-zone.com/cwdjrsxyz/geometric/radial_color_gradient3.html/
                                  Find answers to common questions about WTV-Zone web hosting, accounts, file uploads, music support, guestbooks, and more. Get help creating and managing your pages today.

                                  .. You can build up tiled surfaces in multiple colors as at
                                  http://www.wtv-zone.com/cwdjrsxyz/ge...e_layer4.html/ .You can
                                  draw all sorts of things using JS and CSS. If you can write the
                                  mathematical equation for a figure, you usually can draw it. Although
                                  JS was not designed to compete with C, Fortran, etc., it supports the
                                  basic math functions from which nearly everything else can be built. I
                                  even wrote a series to calculate a Bessel function that I needed and
                                  that is not part of the basic JS math.The above figures display
                                  correctly on basic IE6, The ISP MSN's version of IE6 on their MSN8,
                                  Netscape7.02, and MSNTV2.6.1.Ther e are about a million users of MSNTV
                                  in the US and Canada. It was known as WebTV before Microsoft bought
                                  them a few years ago. Many users are older people who have never used
                                  a computer before and certain minority groups. Besides dial-up service
                                  with a stand-alone box, this system is built into some dbs satellite
                                  receivers. Thus if you sell things in the US and Canada, especially to
                                  older people and some minorities, you may want to consider this
                                  system. They have a developer site from which you can download a
                                  viewer to see how your site might look on MSNTV. In the cases shown
                                  above, getting the code to support both the mentioned computer
                                  browsers and MSNTV was a real pain. To avoid the horizontal lines that
                                  are too wide problem, I use a color and background color that are
                                  nearly the same in each division, specify a 1 px font size, and write
                                  a single period in the division. For reasons too long to include here,
                                  adding the period cause the lines in MSNTV to become too wide - a real
                                  catch 22. The lines will be proper if you add nothing to the divisions
                                  on MSNTV. Thus, as you can see in my code,I detect the MSNTV browser,
                                  which is "bowser". A symbol sym is defined as "" for no symbol if
                                  bowser is detected and "." if the browser is anything else. MSNTV uses
                                  JellyScript that is a bit different from what most of you know.The CSS
                                  support also is strange. It does not support such basic things as
                                  fancy borders, but it has fairly good support of absolute positioning.

                                    Comment

                                    Previous template Next
                                    Working...