javascript basics draw a line

R

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
 
A

ASM

R said:
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?
Click to expand...

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
 
C

Christopher J. Hahn

Randy said:
R said the following on 7/24/2005 3:32 PM:


<URL: http://members.aol.com/hikksnotathome/graphit/index.html >

Something like that?
Click two points in the blue, it "draws" a red line between them.
Click to expand...

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.
 
V

VK

Christopher said:
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.
Click to expand...


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

VK

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
(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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to draw shapes by using mouse 1
CodeHS #3.3.4 Horizontal line 6
Content-Security-Policy: where to place JavaScript 2
Key Factors in JavaScript Testing from a QA Engineer's Perspective 0
Command Line Arguments 0
Hello guys, how do I do arithmetics with a certain index from an array ? JavaScript 3
How to melt 'display:grid' and 'semantic tags' by HTML 5 ? 1
Confused about quotations 5

Members online

No members online now.
Total: 186 (members: 0, guests: 186)
Robots: 509

Forum statistics

Threads
474,431
Messages
2,571,679
Members
48,796
Latest member
Greg L.

Latest Threads

Top