473,543 Members | 2,379 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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########### ##############
Jul 20 '05 #1
8 48013
On Thu, 26 Jun 2003 18:53:12 +0200, "Stefan Burger"
<st***********@ nospamforme.de> wrote:
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.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

Jul 20 '05 #2
Stefan Burger wrote:
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.

Jul 20 '05 #3
Neil Shadrach wrote:
Stefan Burger wrote:
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?

Jul 20 '05 #4

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?

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

"An undefined problem has an infinite number of solutions." - Robert A. Humphrey
Jul 20 '05 #5
Erick T. Barkhuis wrote:
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. :(

Jul 20 '05 #6
Neil Shadrach <ne***********@ corryn.com> writes:
Erick T. Barkhuis wrote:
So, how about adding "font-size:1px;" to the <div>'s?

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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7
Neil Shadrach <ne***********@ corryn.com> writes:
Above didn't work for me but after a wander the following did

http://www.infimum.dk/HTML/slantinfo.html


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

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit. html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #8
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
http://www.wtv-zone.com/cwdjrsxyz/ge...radient3.html/
.. 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.
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
7721
by: Andy C | last post by:
Where can I get a python package to draw such figures? I googled and found PyX, I guess it outputs PostScript. I guess I can get a PostScript to BMP converter or something. Is there any other alternative? I have looked at PIL, but it doesn't seem to support drawing anti-aliased figures. Thanks for any suggestions. Andy
6
1890
by: kittykat | last post by:
Hello, I am writing a program that will read each line of a file into a vector of vectors. This data will then be analysed. Here is what i have done: typedef vector<string> lines; ... vector<lines> SourceVector; string one_line;
2
5351
by: Mike Edwards | last post by:
I need to use javascript's graphics API to draw the letters of the alphabet. If necessary, I can map out all 26 letters myself and use drawline() to draw them, but I am hoping someone out there might have a better suggestion. The user will click a spot on the canvas, and the script will draw one of the letters at that spot. thanks, ...
9
3268
by: John Baro | last post by:
I wish to draw a line say 10px wide at a 45 degree angle (or any other angle) and have it shaded say from gray to red to gray again (or any other color). I can get the line by using a GraphicsPath object but cannot work out the shading part. Is this also possible for say a circle with an outside line width of 10px to be shaded from red...
3
1521
by: peshrad | last post by:
Hi ! I'm using ASP.NET 1.1 and C# . For Microsoft Internet Explorer 6.0, the following code suppresses the drawing of horizontal and vertical lines in the web page:
11
4353
by: Galen Somerville | last post by:
In my opinion, one of the worst failures of Net (VB2005 Pro) was not providing an XOR line draw feature, as in VB6. A major feature of my app is allowing the user to draw Markers (vertical lines) on a trace so they can measure the time difference between markers. Once they click on a desired location, on a trace, arrow buttons are...
2
5675
by: Nibbus | last post by:
Hi there, I´m trying to draw an arrow using YUI js libs, but I´m not finding pleasent functions... does anyone know any good drawing js lib, or know the correct functions to call in the YUI lib? Thanks
3
3428
by: mahasarathi | last post by:
Am new to javaScript. Am trying to draw circuits in JavaScript. I have problem with drawing the arcs in the AND & OR logic gates Can any body help me to do this? Am using IE6.0. it's not supporting canvas. fillArc() method of JavaScript is also not working. <HTML>
0
7401
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7344
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7732
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7335
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
1
5260
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3387
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1810
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
958
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
628
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.