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
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: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>
