Solved

Drawing a diagonal line

Posted on 2001-07-06
20
547 Views
Last Modified: 2008-03-17
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
Comment
Question by:shurijo
  • 7
  • 7
  • 2
  • +3
20 Comments
 
LVL 5

Expert Comment

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

0
 
LVL 5

Expert Comment

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

Author Comment

by:shurijo
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

by:djbusychild
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

by:shurijo
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

by:djbusychild
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

by:shurijo
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

by:webwoman
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

by:djbusychild
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

by:shurijo
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 19

Expert Comment

by:webwoman
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

by:shurijo
ID: 6261941
0
 
LVL 5

Expert Comment

by:djbusychild
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

by:djbusychild
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

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

Author Comment

by:shurijo
ID: 6261951
Sorry didn't see your comments before I posted that last message.

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

by:Malek103197
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

by:COBOLdinosaur
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

by:COBOLdinosaur
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,
please leave a comment for the mods.

Cd&
0
 

Accepted Solution

by:
SpideyMod earned 0 total points
ID: 8067819
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now