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########### ##############