javascript basics draw a line

[R]

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?

thanks in advance
cheers
R

[web.dev]

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?

thanks in advance
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

[ASM]

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?

you take your ruler and your pencil and trace it

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

[Randy Webb]

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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Christopher J. Hahn]

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.javas cript 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
madness.

hm.

Always seemed of very limited practical use, though.

[VK]

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.javas cript 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
madness.

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:sc hemas-microsoft-com:vml">
<head>
<title>VML Test</title>

<script type="text/javascript">
function drawLine() {
/*@cc_on @*/
/*@if (@_jscript_vers ion >= 4)
var A = [10,150];
var B = [400,200];
var myLine = document.getEle mentById('line0 1');
myLine.from = A;
myLine.to = B;
/*@end @*/
}
window.onload = drawLine;
</script>

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

</head>

<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="vmlMainFram e"
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.isVMLEnabl ed = true;
</script>
<![endif]-->
<script>
if(self.isVMLEn abled == 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>
More interesting reading:

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

[VK]

If anyone is still interested:

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

<http://www.geocities.c om/schools_ring/VML_SVG.html>

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

This test line drawer is fully functional for IE users from the scratch
(no additional soft is needed).

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.