drawing vector lines with javascript

S

Stefan Burger

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="javascript">
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;background-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(size),color );
} else {
DrawLinHor( (x),(y),Math.abs(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.abs(size),color );
}
y=y+dstep;
}
}
}

DrawLine(100,150,50,250,"#FFFFFF");
</script>

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

Jim Ley

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.

<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.
 
N

Neil Shadrach

Stefan said:
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]

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.
 
N

Neil Shadrach

Neil said:
Stefan said:
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]


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.

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?
 
E

Erick T. Barkhuis

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

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

Neil Shadrach

Erick said:
Neil Shadrach [on Fri, 27 Jun 2003 09:47:22 +0100]:

The minimum appears to be the height of a
character - although there are no characters.


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

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

Lasse Reichstein Nielsen

Neil Shadrach said:
Erick T. Barkhuis wrote:
Seems to work. Thanks. Thought I'd tried setting a small font. :(

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
 
C

cwdjr

An example of curved figures is at
http://www.wtv-zone.com/cwdjrsxyz/geometric/curve_write.html/ . You
can use a color gradient in a geometric figure filled with color as
seen at http://www.wtv-zone.com/cwdjrsxyz/geometric/curve_write2.html/
.. You also can do radial color gradients as at
http://www.wtv-zone.com/cwdjrsxyz/geometric/radial_color_gradient3.html/
.. You can build up tiled surfaces in multiple colors as at
http://www.wtv-zone.com/cwdjrsxyz/geometric/tile_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.There 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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top