[RESOLVED] Javascript Diagonal Lines?

dougal85

Is it possible to draw a diagonal line in javascript?

I've seen a few examples that are hugely bloated and look like a bit of a nightmare for cross browser support.

Any help is appreciated.

JPnyc

Better off using an image for that. Javascript can't "draw" anything that you couldn't put on the page in static HTML/CSS. The only thing it can do that they can't is add stuff dynamically, but it's bound by the same limitations as HTML/CSS because that's precisely what it manipulates.

dougal85

I had figured as much, but I was hoping for a blinding light of knowledge somebody was going to shine upon me 😛

Anyway, I attached an image of what I am trying to create.

The two boxes are of course DIV's and they are drag gable. When they drag I want the lines to be re-created.

I guess that might be a bit too heavy duty to provide a 'ghosting' effect like you can with a dragging div. So I'll probably re-draw them on drop.

For creating the images, would I use php and create a transparent image with a black line? Or is there a better solution than that?

Thanks in advance 🙂

JPnyc

Use an image. You'll sleep better. 😃

Weedpacket

I agree; while it is possible to pummel Javascript and CSS into giving you bordered <div> elements from which you can crop the corners - the code I've seen (example) has largely been "proof of concept" (and sometimes that seems more like a euphemism for the "how many people can we stuff into a phonebox" realm of usability: impressive, fun, but not something that would work as a daily way of life.)

I'd stick with using an image. At least until IE catches up with Firefox's implementation of SVG.