ausgelesene Variablen graphisch darstellen
Alex
- javascript
Guten Morgen,
ich würde gerne Bildkoordinaten erfassen und diese graphisch darstellen.
Unter http://fluid.devcon.cc/grid/test1.htm wird ersichtlich wie das ganze aussieht. nach längerem Suchen im Forum konnte ich diese lösung finden. Es geht jetzt im Weiteren darum die gesammelten Klickkoordinaten per submit (hidden field) zu versenden. Weiters muss ich die geklickten Punkte als "Route" visualisieren. Das sollte mit http://www.walterzorn.de/jsgraphics/jsgraphics.htm#docu realisierbar sein. Da meine JS kenntnisse (besser gesagt meine Programmierkenntnisse im Allgemeinen) nicht die besten sind, wäre ich für Tips / Hinweise für die Umsetzung dankbar.
herzlichen Dank,
Alex
Das sollte mit http://www.walterzorn.de/jsgraphics/jsgraphics.htm#docu realisierbar sein. Da meine JS kenntnisse (besser gesagt meine Programmierkenntnisse im Allgemeinen) nicht die besten sind, wäre ich für Tips / Hinweise für die Umsetzung dankbar.
Du hast die Doku auch gelesen?
Und du bist nicht über diese Funktion gestolpert:
drawPolyline(X-Werte Anfang/Knicke/Ende, Y-Werte);
(Mehrfach) geknickte Linie, beginnend beim ersten X- und Y-Wert. X- und Y-Werte sind Arrays. Sie können entweder direkt im Methodenaufruf definiert, oder vorher nach folgendem Schema angelegt werden:
var xWerte = new Array(x1,x2,x3,x4,x5);
var yWerte = new Array(y1,y2,y3,y4,y5);
Liniendicke entweder, wie per .setStroke() eingestellt, oder 1px.
Struppi.
Du hast die Doku auch gelesen?
Und du bist nicht über diese Funktion gestolpert:
Hab ich schon gelesen ;O)
Wie kann ich mich herantasten wenn ich aber nun jeden klick übernommen haben will? Brauch ich dazu zwingend ein array um die Klicks "zischenzulagern"?
var xWerte = new Array(x1,x2,x3,x4,x5);
var yWerte = new Array(y1,y2,y3,y4,y5);
Die x und y Werte sollen ja direkt vom Klick ins Bild übernommen werden.
Vielleicht nochmal der Vollständigkeit halber:
1.) Bild wird von Map Server Erzeugt (GRASS Open Source GIS)
2.) User soll in den erzeugten Kartenausschnitt eine Route per Klick
einzeichnen können.
3.) Koordinaten sollen in einem "Hidden Field" gesammelt werden und
per Submit versandt werden.
4.) Folgeverarbeitung der gesammelten Koordinaten erfolgt Serverseitig
Anforderungen: Nur HTML+JS, keine Cookies, keine Frames, als CMS ist ZOPE vorhanden (somit auch Python als Scriptsprache), die Sammlung der Koordinaten soll jedoch Clientseitig passieren, keine Plugins wie SVG, etc.
danke, Alex
Wie kann ich mich herantasten wenn ich aber nun jeden klick übernommen haben will? Brauch ich dazu zwingend ein array um die Klicks "zischenzulagern"?
Keine Ahnung, um die genannte Funktion zu nutzen auf jeden Fall, ansonsten kommt es darauf an wie du es umsetzen willst.
var xWerte = new Array(x1,x2,x3,x4,x5);
var yWerte = new Array(y1,y2,y3,y4,y5);Die x und y Werte sollen ja direkt vom Klick ins Bild übernommen werden.
Und das bietet die Bibliothek nicht?
Ich benutze sie nicht und hab jetzt auch keine Lust die Doku für dich zu lesen oder Funktionen auszuprobieren, ich find sie relativ gut dokumentiert insofern sollte es dir auch selbst gelingen.
Da JS nicht wirklich eine Möglichkeit zum Zeichnen bietet, kann es durchaus sein das es nicht geht. Dann bleibt dir wohl nur ein passendes Plugin (SVG? ich weiß es nciht).
Struppi.
hallo,
Die x und y Werte sollen ja direkt vom Klick ins Bild übernommen werden.
Und das bietet die Bibliothek nicht?
naja eigentlich schon, ich definiere 2 arrays für x und y und möchte diese dann anstatt der fixen koordinatenwerte übergeben, aber irgendwie ist da noch der wurm drin.
sobald ich das JS das zum darstellen der punkte als polyline aufrufe fängt der zu laden an und hört nicht mehr auf.
vielleicht hat ja mal wer lust einen blick drauf zu werfen:
---->
function myDrawFunction()
{
jg_doc.setStroke(2);
jg_doc.setColor("yellow");
jg_doc.drawPolyline(myX,myY);
jg_doc.paint(); // zeichnet in diesem Fall direkt in's document
}
myDrawFunction();
---->
http://fluid.devcon.cc/grid/test4.htm
Da JS nicht wirklich eine Möglichkeit zum Zeichnen bietet, kann es durchaus sein das es nicht geht. Dann bleibt dir wohl nur ein passendes Plugin (SVG? ich weiß es nciht).
das is ja grad das problem: keine frames, keine plugins (auch nicht svg), keine cookies und keine serverseitige verarbeitung darf stattfinden - ja dann prost!
p.s.: ich hab ganz vergessen zu sagen daß da eine browserweiche läuft, also das angesprochene problem sieht man ab netscape4, 6 und mozilla.
salü, alex
Also ich hab mir das ganze mal angeschaut, da muss noch kräftig erweitert werden.
1. die Methode direkt in ein Dokument schreiben, überschreibt das ganze Dokument (in der Bib fehlt dabei ein document.close() deshalb hört das Dokument anscheinend nicht auf zu laden), d.h. die Methode ist für dich nicht geeignet.
2. Um in ein positioniertes element zu zeichnen musst man dessen Koordinaten von den Punkten abziehen, da ansonsten die Linie relativ zu den Koordinaten des Elementes berechnet werden.
3. Die fehler die du gemachst hast ist wie du das Array füllst, du kreirst seltsamerweise ein Array mit Arrays, wieso?
Ich hab das ganze mal umgebaut http://javascript.jstruebig.de/test/koordinaten.html
Struppi.
hallo struppi,
- die Methode direkt in ein Dokument schreiben, überschreibt das ganze Dokument (in der Bib fehlt dabei ein document.close() deshalb hört das Dokument anscheinend nicht auf zu laden), d.h. die Methode ist für dich nicht geeignet.
Das hab ich gestern nicht mehr umgeändert, ich muss das Ganze auf den DIV Bereich ausdehnen, in meinem Fall ID="MAP"..richtig?
Was meinst du mit Bib?
- Um in ein positioniertes element zu zeichnen musst man dessen Koordinaten von den Punkten abziehen, da ansonsten die Linie relativ zu den Koordinaten des Elementes berechnet werden.
Ähm..also es funktioniert also mit meinen gesammelten "Klick-Werten" nicht so ohneweiters? Ich hab mir gedacht die in den Arrays gesammelten Koordinaten kann man einfach übergeben....tja, man lernt nie aus.
- Die fehler die du gemachst hast ist wie du das Array füllst, du kreirst seltsamerweise ein Array mit Arrays, wieso?
ich würd mal sagen weil ichs nicht besser kann :O)
Ich hab das ganze mal umgebaut http://javascript.jstruebig.de/test/koordinaten.html
Herzlichen Dank für deine Mühe! Ich werd mir das mal zu Gemüte führen, vielleicht steig ich ja hinter deinen Code.
Hab noch was vergessen:
In deiner Lösung müssten jetzt nur noch die Koordinaten in einem versteckten Feld gesammelt werden und dann per Submit verschickt werden können (z.b. an einen Server zur weiterverarbeitung) - das sollte ich eigentlich selbst hinkriegen, oder ist speziell auf etwas zu achten?
Ich hab mal versucht mit history.back was zu basteln damit man die letzte Linie per rechter Maustaste wieder rückgängig machen kann - ist das mit JS eigentlich möglich?
gruß, Alex
Ich hab mal versucht mit history.back was zu basteln damit man die letzte Linie per rechter Maustaste wieder rückgängig machen kann - ist das mit JS eigentlich möglich?
Ja, ich hab's mal eingebaut. Aber du kannst das Kontextmenu im FF zumindest nicht verhindern.
Struppi.
Hallo,
mir ist gerade aufgefallen daß das ganze Konstrukt bei mehreren Klicks ins Bild sehr langsam wird. Da bei jedem zusätzlichen Klick die Polyline komplett neu aufgebaut wird ist das ja auch nicht weiter verwunderlich.
Besteht mit der "Scriptsammlung" von Walter Zorn die Möglichkeit daß die Polyline "Klick für Klick" gezeichnet wird, oder ist das so nicht möglich?
mein derzeitiger Stand der Dinge ist unter http://fluid.devcon.cc/grid/test6_1.htm zu finden.
gruß, alex
mir ist gerade aufgefallen daß das ganze Konstrukt bei mehreren Klicks ins Bild sehr langsam wird. Da bei jedem zusätzlichen Klick die Polyline komplett neu aufgebaut wird ist das ja auch nicht weiter verwunderlich.
Hab ich geändert.
Besteht mit der "Scriptsammlung" von Walter Zorn die Möglichkeit daß die Polyline "Klick für Klick" gezeichnet wird, oder ist das so nicht möglich?
Doch, genauso hab ich's mal umgesetzt
http://javascript.jstruebig.de/test/koordinaten.html
Struppi.