Solved

# Drawing a diagonal line

Posted on 2001-07-06
554 Views
Hi,

I have been struggling finding an easy way to draw a diagonal line. I have found a lot of code that, if I was a bit better at DHTML I should be able to extract, show off an "Analog Clock". These clocks draw diagonal lines, but I couldn't figure out how to break that code out.

If there are any DHTML gurus out there with free time, could you please extract a function for me? If possible I just need to pass 4 variables (starting x,y and ending x,y). The line would be drawn on top of a div.

I am looking for something more than just code that does the x+1,y+1 loop that creates 45 degree angles. I need to be able to pass 2 coordinate pairs (x1,y1,x2,y2) and have a line drawn connnecting the pairs.

thanks
0
Question by:shurijo
[X]
###### Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

• Help others & share knowledge
• Earn cash & points
• 7
• 7
• 2
• +3

LVL 5

Expert Comment

ID: 6260992
You mean draw it dynamically after the page has been fully loaded or as the page loads ?

0

LVL 5

Expert Comment

ID: 6260993
If you mean dynamically after page load, do you care about browser compatibility ?
0

Author Comment

ID: 6261115
Draw dynamically after the page is loaded. I have working code to draw boxes (rectangles) and hortizontal and vertical lines. I just don't have code to draw a diagonal line. This will be called by capturing the mouse position, etc to draw a line from point a to point b, etc.

It would be great to get something that is cross-browser (N 4.7+ and IE 5+). If I went with MSIE 5.5, I figure out and use VML, but I wanted it to work in Netscape (at least N6, if possible).
0

LVL 5

Expert Comment

ID: 6261121
drawing boxes and h/v lines are very easy. The only way to draw horizontal line in NS4+ and IE4+ would be to draw a line using Bresenham's algorithm... here plotting a point would probably be a 1x1 absolute positioned layer.

I'm not sure how fast this will be to do it with javascript... I guess I'll have to try it out to really know. The bottleneck would be the layer creation. Depending on how much overhead is associated with each layer, the scalability could be rather limited... This is why SVG and VML is really needed. ;)

If you want to try it out on your own, feel free. If not, I can try it out and get back to ya.
0

Author Comment

ID: 6261156
I have seen a few examples of VML, but haven't dabbled in it too much. Yeah, the rectangles and h&v lines are easy. I haven't seen anyone do the dialog lines like this. But I know in the DHTML analog clocks, they use something similiar, but since I am just a hack at DHTML I can figure most things out by others source code. If you know how, please post some sample code. thanks, jw
0

LVL 5

Expert Comment

ID: 6261161
which analog clock are you refering to?

I'm not saying that it's impossible, it's just that DHTML isn't really efficient at such pixel by pixel rendering using absolute positioned layers ( which is the only way to achieve this if you want netscape 4 in the equation )
0

Author Comment

ID: 6261280
I have seen a few clocks that have the hands the move around and around. Somehow I figure, they are drawing a line between the center of the clock and the outer radius extent. Just check out any javascript for "analog clock", there is at least 1 or 2 scripts on most of the javascript resource sites.
0

LVL 19

Expert Comment

ID: 6261548
I haven't seen any javaSCRIPT analog clocks -- but I have seen JAVA analog clocks. Totally different thing. Java DOES allow you to draw diagonal lines (you can draw anything you want) and you can draw after the page has loaded.

But java isn't javaSCRIPT.
0

LVL 5

Expert Comment

ID: 6261558
Shurjio, I found a DHTML clock and how it is done is basically the same as I described it. There are a lot of layers here... For a DHTML clock, I guess the number of layers is fixed, so it's fine... But, if you're thinking of making a paint program of some sort, this will not scale and will bog down the user's memory bit by bit...

are you still willing to know how this is done via DHTML
0

Author Comment

ID: 6261613
djbusychild,

Thanks for taking the time. If you could figure out VML or SVG, I think that would be best solution for the clients.

webwoman,

There are tons of DHTML analog clocks out there, that was one of the very first cool DTHML things that I ever seen a few years ago. Just search for analog clock on any javascript/DHTML script site.

0

LVL 19

Expert Comment

ID: 6261931
I did look... and I found lots of digital ones, countdown ones, animated gifs, etc. But the analog clocks I found were java applets, not javascript.
0

Author Comment

ID: 6261941
0

LVL 5

Expert Comment

ID: 6261942
Here you go WebWoman...

try google and type DHTML analog clock, you can't miss it.

http://home.t-online.de/home/martin.honnen/dhtml/analogClock.html
http://www.ouraynet.com/right.html
0

LVL 5

Expert Comment

ID: 6261947
That first one you posted is actually kinda unique. what it does is it creates an X-bitmap on the fly an blits to a buffer which is then used as a source of an image...

However, it still doesn't make it any more efficient than ther others I've seen. The overhead is actually bigger this case.

What is your ultimate goal, shurjio?
0

Author Comment

ID: 6261949
I figured out how to do this using VML. Thanks
0

Author Comment

ID: 6261951

I current have a measure function. (Where the client clicks on a point and then drags to another point and it tells the distance, etc. But I needed a visual line there. I had the math for the distance and degrees and other distance unit conversions, etc. But the final touch was the line.)

I found a VML clock at dynamicdrive.com and the VML code was easy enough for me to figure out. Thanks!
0

Expert Comment

ID: 6688641
Hi,

I downloaded the code at dynamicdrive.com that you used. I am new to DHTML/VML - just wondering if you could show/mail me your code that you broke out to draw a diagonal line between 2 points - it would be a great help.

Thanks

Steve (mccrone@pc.jaring.my)
0

LVL 53

Expert Comment

ID: 7910332
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
In the absence of responses, I may recommend DELETE unless it is clear
to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&
0

LVL 53

Expert Comment

ID: 7999585
It is time to clean this abandoned question up.

I am putting it on a clean up list for CS.

<recommendation>
zero point PAQ

</recommendation>

If anyone participating in the Q disagrees with the recommendation,

Cd&
0

Accepted Solution

SpideyMod earned 0 total points
ID: 8067819
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

### Suggested Solutions

Open grouped links on a page in new tabs via jquery 5 60
Make Float not to Wrap 15 65
hide and show spans from dropdown selection 3 35
Error just appeared 3 23
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. â€¦
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wriâ€¦
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQueryâ€¦
###### Suggested Courses
Course of the Month7 days, 18 hours left to enroll