Christopher J. Hahn wrote:[color=blue]
> Randy Webb wrote:[color=green]
> > R said the following on 7/24/2005 3:32 PM:
> >[color=darkred]
> > > 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?
> > >[/color]
> >
> > <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[/color]
>
> 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.[/color]
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">
<head>
<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 @*/
}
window.onload = drawLine;
</script>
<style type="text/css">
v\:* { behavior: url(#default#VML);}
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="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>
More interesting reading:
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/>
<http://www.mozilla.org/projects/svg/>
<http://plugindoc.mozdev.org/windows.html>
