Linie zeichnen und ihre Länge errechnen

[Julian von Mendel]

Hallo und frohe Ostern :)

Wie kann ich mit Javascript eine Linie zwischen zwei Punkten zeichnen?

Und außerdem möchte ich wissen, wie ich dann die Länge dieser Linie rausbekomm, also die Entfernung zwischen den beiden Punkten.

Als Längeneinheit bevorzuge ich Pixel..

Gute Nacht,
Julian

[WauWau]

Hallo Julian,

Wie kann ich mit Javascript eine Linie zwischen zwei Punkten zeichnen?

Du meinst auch so richtig schräg und sowas? Oje, das wird kompliziert.... ich könnte mir da ja notfalls sogar sowas wie hunderte von div's schräg nebeneinander gestapelt vorstellen und sowas damit es eine schräge linie gibt...

Also ohne solche "hilfestellungen" geht das auf gar keinen fall.

Und außerdem möchte ich wissen, wie ich dann die Länge dieser Linie rausbekomm, also die Entfernung zwischen den beiden Punkten.

Ja die müsste ja schon mal reintheoretisch klar sein, bevor du die linie überhautpt zeichnest ;)

Als Längeneinheit bevorzuge ich Pixel..

ich denke, alles andere würde auch zu kompliziert werden.

WauWau

[peter]

Hi,

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.

Und http://www.walterzorn.de/jsgraphics/jsgraphics.htm zeichnet nicht nur Linien, sondern auch Ellipsen, Kreise, Rechtecke, usw....

gruß
ptr

[Julian von Mendel]

Hi peter,

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.

Funktioniert nur im IE, womit es für mich ausscheidet.

Und http://www.walterzorn.de/jsgraphics/jsgraphics.htm zeichnet nicht nur Linien, sondern auch Ellipsen, Kreise, Rechtecke, usw....

Das ist interessant, auch wenn es für mich etwas zu viel Zeugs kann, das ich garnicht brauche.

Warum man vorher die Länge einer Linie wissen muss, welche zwischen zwei Punkten erzeugt werden muss, weiß ich ja nicht. Und das Schräge mit divs nicht wirklich machbar ist, ist mir auch klar. Sonst hätte ich ja nicht gefragt ;)

Danke für eure Hilfe,
Julian

[peter]

Hi Julian,

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.
Funktioniert nur im IE, womit es für mich ausscheidet.

Welche Browser hast du denn noch benutzt?
Funktioniert bei mir auch einwandfrei auf NS, halt erst ab 6.2

gruß
ptr

[Julian von Mendel]

Hallo!

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.
Funktioniert nur im IE, womit es für mich ausscheidet.
Welche Browser hast du denn noch benutzt?
Funktioniert bei mir auch einwandfrei auf NS, halt erst ab 6.2

Opera 7.23 bleibt beim initialisieren der Seite hängen und Konqueror 3.1.0 zeigt mir nur Schwarz (Javascript ist bei beiden an).

Schöne Grüße,
Julian

[peter]

Hi,

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.
Funktioniert nur im IE, womit es für mich ausscheidet.

Wolltest du Anregungen oder ein fertiges Script?

Welche Browser hast du denn noch benutzt?
Funktioniert bei mir auch einwandfrei auf NS, halt erst ab 6.2
Opera 7.23 bleibt beim initialisieren der Seite hängen und Konqueror 3.1.0 zeigt mir nur Schwarz (Javascript ist bei beiden an).

Bei Opera wurde das Popup geblockt, (das Problem wird in Kürze gehandelt; sowie ein paar andere kleinere Fehler, die beim Opera leider noch auftreten).

Und im NS funktionierts auch ab 6.2, Mozilla und Firebird haben auch keine Probleme.

Scheint mir also übertrieben, zu schreiben, daß es _nur_ im IE funktioniert.

Bei Nutzern anderer Browser als obengenannte gehe ich davon aus, daß auch noch mind. einer der 3 obengenannten Browsern auf deren Rechner zur Verfügung steht.

gruß
ptr

[Julian von Mendel]

Hi,

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.
Funktioniert nur im IE, womit es für mich ausscheidet.
Wolltest du Anregungen oder ein fertiges Script?

Ich wollte Anregungen, die Berechnung hab ich inzwischen auch mit Axels Tipp lösen können, und das mit der Linie lass ich weg...

Welche Browser hast du denn noch benutzt?
Funktioniert bei mir auch einwandfrei auf NS, halt erst ab 6.2
Opera 7.23 bleibt beim initialisieren der Seite hängen und Konqueror 3.1.0 zeigt mir nur Schwarz (Javascript ist bei beiden an).
Bei Opera wurde das Popup geblockt, (das Problem wird in Kürze gehandelt; sowie ein paar andere kleinere Fehler, die beim Opera leider noch auftreten).

Vielleicht mach ich ja irgendwas falsch...aber erklär mir doch mal den folgenden Screenshot:
http://jvm.von-mendel.de/tmp/screenshot.png

Und im NS funktionierts auch ab 6.2, Mozilla und Firebird haben auch keine Probleme.
Scheint mir also übertrieben, zu schreiben, daß es _nur_ im IE funktioniert.

Tut mir leid, ich bin davon ausgegangen, dass sich Browser mit der Gecko-Engine alle gleich verhalten, aber vielleicht verwenden die verschiedene Versionen oder so. Mit Mozilla gehts tatsächlich, mit Konqueror und Opera bei mir aber _nicht_.

Schöne Grüße,
Julin

[peter]

Hi Julian,

thanks für die Infos.

Gruß
ptr

[Axel Richter]

Hallo Julian,

Warum man vorher die Länge einer Linie wissen muss, welche zwischen zwei Punkten erzeugt werden muss, weiß ich ja nicht.

Wenn Du die Koordinaten zweier Punkte in einem kartesischen Koordinatensystem kennst, kennst Du auch die Länge der Geraden zwischen diesen Punkten. Oder? Stichwort: Gesetzmäßigkeiten im rechtwinkligen Dreieck (Pythagoras).

Und das Schräge mit divs nicht wirklich machbar ist, ist mir auch klar. Sonst hätte ich ja nicht gefragt ;)

Ach? Und wie anders glaubst Du erzeugen diese JS-Grafik-Bibliotheken einen Bildpunkt, als mit einem 1px mal 1px DIV? Mit Zauberei?

viele Grüße

Axel

[Julian von Mendel]

Hi Axel,

Warum man vorher die Länge einer Linie wissen muss, welche zwischen zwei Punkten erzeugt werden muss, weiß ich ja nicht.
Wenn Du die Koordinaten zweier Punkte in einem kartesischen Koordinatensystem kennst, kennst Du auch die Länge der Geraden zwischen diesen Punkten. Oder? Stichwort: Gesetzmäßigkeiten im rechtwinkligen Dreieck (Pythagoras).

Jaja, das lernt man aber noch nicht in der Achten. Aber inzwischen hat es mir mein großer Bruder erklärt.

Und das Schräge mit divs nicht wirklich machbar ist, ist mir auch klar. Sonst hätte ich ja nicht gefragt ;)
Ach? Und wie anders glaubst Du erzeugen diese JS-Grafik-Bibliotheken einen Bildpunkt, als mit einem 1px mal 1px DIV? Mit Zauberei?

So klein zählt nicht, dann geht ja alles (ich hab mal ein PHP-Skript gebastelt, welches Bilder in divs umwandelt: http://julian.von-mendel.de/jc2/inhalt/tests/img2css.php - bringt aber viele Browser zum Absturz *gg*). Ich meine es geht nicht mit einem einzelnem div.

Schöne Grüße,
Julian

[Axel Richter]

Hallo Julian,

Ich meine es geht nicht mit einem einzelnem div.

Eine Linie nicht. Ein Dreieck wäre machbar.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ein-DIV-Dreieck</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div style="width:0px; height:0px; line-height:0; font-size:0; border-left:150px solid white;border-top:100px solid white;border-right:150px solid black;border-bottom:100px solid black;" id="dreieck"></div>
<button onclick="document.getElementById('dreieck').style.borderLeftWidth=parseInt(document.getElementById('dreieck').style.borderLeftWidth,10)+5+'px';document.getElementById('dreieck').style.borderRightWidth=parseInt(document.getElementById('dreieck').style.borderRightWidth,10)+5+'px';">Strecken</button>
<button onclick="if(parseInt(document.getElementById('dreieck').style.borderLeftWidth,10)>5){document.getElementById('dreieck').style.borderLeftWidth=parseInt(document.getElementById('dreieck').style.borderLeftWidth,10)-5+'px';document.getElementById('dreieck').style.borderRightWidth=parseInt(document.getElementById('dreieck').style.borderRightWidth,10)-5+'px';}">Stauchen</button>
</body>
</html>

viele Grüße ;-))

Axel

[WauWau]

Hallo peter,

http://www.nesplan.de, da gibts dann im Stadtplan oben rechts nen Button zur Streckenmessung.

Wie schon gesagt, geht's nur im IE, und das ist schlecht.

Und http://www.walterzorn.de/jsgraphics/jsgraphics.htm zeichnet nicht nur Linien, sondern auch Ellipsen, Kreise, Rechtecke, usw....

wow, ich bin begeistert. Aber mein Rechner wird da schon... langsam.
Ist zwar cool, aber ziemlich ungünstig, da man ja nicht erwarten kann, dass alle Welt mit modernen 4GHZ-Rechnern... und 500MB freien RAM nur für den Browser surfen kann. Ich will mir gar nicht durch den kopf gehen lassen, wie viele tausend div's da absolut positioniert werden... - da nehmen ich doch lieber SVG, da lässt sich noch eine ganze menge mehr machen und es ist bei weitem nicht so ressourcenfressend.

WauWau

[peter]

Hi WauWau,

Wie schon gesagt, geht's nur im IE, und das ist schlecht.

Was nicht stimmt, funktioniert auch auf NS ab 6.2 und Opera.

wow, ich bin begeistert. Aber mein Rechner wird da schon... langsam.
Ist zwar cool, aber ziemlich ungünstig, da man ja nicht erwarten kann, dass alle Welt mit modernen 4GHZ-Rechnern... und 500MB freien RAM nur für den Browser surfen kann. Ich will mir gar nicht durch den kopf gehen lassen, wie viele tausend div's da absolut positioniert werden... - da nehmen ich doch lieber SVG, da lässt sich noch eine ganze menge mehr machen und es ist bei weitem nicht so ressourcenfressend.

..würde mich auch freuen, wenn SVG mal ne weitere Verbreitung hätte.
Nur wieviel % der Nutzer erreiche ich, wenn ichs in SVG mach ?

gruß
ptr

[WauWau]

Hallo peter,

..würde mich auch freuen, wenn SVG mal ne weitere Verbreitung hätte.

jo, mich auch 8]

Nur wieviel % der Nutzer erreiche ich, wenn ichs in SVG mach ?

afaik sehr, sehr wenig. Aber das hier in JavaScript zu machen ist einfach verdammt prozessorauslastend. Ich könnte mir die Seite ja mal mit einem IE5.5 auf einem Win95/3xxMHZ/32MB-RAM-Rechner von 1995 anschauen, und ich will es mir gar nicht erst ausmalen, wie der arme computer stocken wird...

WauWau

[Jürgen Berkemeier]

Hallo Julian,

ich habe mal versucht, mit Javascript Grafiken zu erstellen. Das ganze ist aber extrem CPU-belastend. Schau mal hier rein:

http://home.vrweb.de/j.berkemeier/FktPlot.html

Gruß, Jürgen