[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 568
  • Last Modified:

Drawing a diagonal line

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
shurijo
Asked:
shurijo
  • 7
  • 7
  • 2
  • +3
1 Solution
 
djbusychildCommented:
You mean draw it dynamically after the page has been fully loaded or as the page loads ?

0
 
djbusychildCommented:
If you mean dynamically after page load, do you care about browser compatibility ?
0
 
shurijoAuthor Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
djbusychildCommented:
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
 
shurijoAuthor Commented:
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
 
djbusychildCommented:
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
 
shurijoAuthor Commented:
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
 
webwomanCommented:
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
 
djbusychildCommented:
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
 
shurijoAuthor Commented:
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
 
webwomanCommented:
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
 
djbusychildCommented:
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
 
djbusychildCommented:
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
 
shurijoAuthor Commented:
I figured out how to do this using VML. Thanks
0
 
shurijoAuthor Commented:
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
 
Malek103197Commented:
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
 
COBOLdinosaurCommented:
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
 
COBOLdinosaurCommented:
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
 
SpideyModCommented:
per recommendation

SpideyMod
Community Support Moderator @Experts Exchange
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 7
  • 7
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now