469,946 Members | 1,751 Online

# javascript basics draw a line

Hello everybody!

I'm newbie to JavaScript and I have a basic question.

I have X and Y coordinates of A and B points.

How can I draw a line connecting A and B?

cheers
R

Jul 24 '05 #1
6 30478
Hi R,

R wrote:
Hello everybody!

I'm newbie to JavaScript and I have a basic question.

I have X and Y coordinates of A and B points.

How can I draw a line connecting A and B?

cheers
R

Javascript does not have a mechanism to do graphics (such as drawing a
line). But there are ways to simulate this. Check out this page:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Jul 24 '05 #2
R wrote:
Hello everybody!

I'm newbie to JavaScript and I have a basic question.

I have X and Y coordinates of A and B points.

How can I draw a line connecting A and B?

not possible in JavaScript

you can simulate a vertical or horizontal line
with a div reduced to 1 px (width or height)
and no more

You can also use an image of a sqare with a diagonal drawn
and resize the image betwen the 2 points

+---+ B
| /|
| / |
|/ |
+---+
A

--
Stephane Moriaux et son [moins] vieux Mac
Jul 24 '05 #3
R said the following on 7/24/2005 3:32 PM:
Hello everybody!

I'm newbie to JavaScript and I have a basic question.

I have X and Y coordinates of A and B points.

How can I draw a line connecting A and B?

<URL: http://members.aol.com/hikksnotathom...hit/index.html >

Something like that?
Click two points in the blue, it "draws" a red line between them.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 24 '05 #4
Randy Webb wrote:
R said the following on 7/24/2005 3:32 PM:
Hello everybody!

I'm newbie to JavaScript and I have a basic question.

I have X and Y coordinates of A and B points.

How can I draw a line connecting A and B?

<URL: http://members.aol.com/hikksnotathom...hit/index.html >

Something like that?
Click two points in the blue, it "draws" a red line between them.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

I must say, I've always toyed with the idea of line drawing but... 400
DIVs is a bit excessive, in my opinion. It's an incredibly brute-force
solution, but it does get the mental cogs clicking.

Seems simpler to JS-generate an arbitrary number of spans with custom
widths based on each line's pixel requirements. The height would always
be 1px, and the top would always be 1px different from the previous.

i.e. for a line 0,0 to 100,100, JS-create 100 spans of 1px width, with
incremented values for top.

For a line 0,0 to 100,1, JS-create two spans of 50px width, the first
from 0,0 to 50,0, and the second from 50,1 to 100,1.

Interesting... I may end up doodling out a Line object because of this

hm.

Always seemed of very limited practical use, though.

Jul 25 '05 #5

Christopher J. Hahn wrote:
Randy Webb wrote:
R said the following on 7/24/2005 3:32 PM:
Hello everybody!

I'm newbie to JavaScript and I have a basic question.

I have X and Y coordinates of A and B points.

How can I draw a line connecting A and B?

<URL: http://members.aol.com/hikksnotathom...hit/index.html >

Something like that?
Click two points in the blue, it "draws" a red line between them.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

I must say, I've always toyed with the idea of line drawing but... 400
DIVs is a bit excessive, in my opinion. It's an incredibly brute-force
solution, but it does get the mental cogs clicking.

Seems simpler to JS-generate an arbitrary number of spans with custom
widths based on each line's pixel requirements. The height would always
be 1px, and the top would always be 1px different from the previous.

i.e. for a line 0,0 to 100,100, JS-create 100 spans of 1px width, with
incremented values for top.

For a line 0,0 to 100,1, JS-create two spans of 50px width, the first
from 0,0 to 50,0, and the second from 50,1 to 100,1.

Interesting... I may end up doodling out a Line object because of this

hm.

Always seemed of very limited practical use, though.

Why so complicated?! Internet Explorer has build-in VML module (IE 5
and higher). For others there is SVG plug-in.
Both VML and SVG can be fully JavaScript driven, so you can do
anything: from simple lines to interactive virtual worlds.

I'm just started with SVG (after VML), so instead of the requested line
I used a 3rd party sample. But the idea is rather clear I hope.
<html xmlns:v="urn:schemas-microsoft-com:vml">
<title>VML Test</title>

<script type="text/javascript">
function drawLine() {
/*@cc_on @*/
/*@if (@_jscript_version >= 4)
var A = [10,150];
var B = [400,200];
var myLine = document.getElementById('line01');
myLine.from = A;
myLine.to = B;
/*@end @*/
}
</script>

<style type="text/css">
v\:* { behavior: url(#default#VML);}
body { background-color: #FFFFFF}
</style>

<body>

<!--[if gte IE 5]>
<v:group id="vmlApp"
style="position: absolute; left: 50px; top: 50px; height: 300px;
width: 500px"
coordorigin="0,0"
coordsize="500,300">
<v:rect id="vmlMainFrame"
style="position:absolute; top:0px; left:0px; width:500px;
height:300px">
<v:fill
color="#FFFFFF"/>
<v:stroke
color="#000000"
weight="2px"/>
</v:rect>
<v:line id="line01">
</v:line>
</v:group>
<script type="text/JScript">
self.isVMLEnabled = true;
</script>
<![endif]-->
<script>
if(self.isVMLEnabled == undefined) {
document.write('<embed width="222" height="300"
src="http://www.carto.net/papers/svg/samples/shapes.svg"
name="printable_map" type="image/svg+xml">');
}
</script>
</body>
</html>

<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/>
<http://www.mozilla.org/projects/svg/>
<http://plugindoc.mozdev.org/windows.html>

Jul 25 '05 #6
If anyone is still interested:

A ready to use VML/SVG compatible block is located here:

<http://www.geocities.com/schools_ring/VML_SVG.html>

To get a copy of the page w/o Yahoo's crap go to:
<<http://www.geocities.com/schools_ring/VML_SVG.zip>

This test line drawer is fully functional for IE users from the scratch

For other browsers it will be proposed to install Adobe SVG plugin.

SVG version of the line drawer is not ready (I'm still studying SVG) so
a 3rd party placeholder is used.

Jul 26 '05 #7

### This discussion thread is closed

Replies have been disabled for this discussion.