Koordinaten aus PNG/SVG extrahieren

[Benedikt Magnus]

Ich sitze derzeit daran, eine Flashanwendung nach Delphi/HTML zu portieren. Aufgabe der Anwendung ist es, eine Weltkarte anzuzeigen, in der die verschiedenen Staaten (je nach Modus) anhand bestimmter Werte eingefärbt werden. Das ist auch kein Problem, das rendern der Bilddateien bekomme ich mit Delphi hin und das Anzeigen per HTML ist trivial.

Nun sollen darüber hinaus noch zwei Dinge möglich sein:
- Beim Mousover über einen Staat soll ein Hinweistext angezeigt werden.
- Beim Klick auf einen Staat soll dies per Link zur entsprechenden Staatsseite führen.

Dachte ich mir, das geht ja ganz einfach mit verweissensitiven Grafiken, oder auch per SVG-Imagemap, für beides bräuchte ich aber Koordinaten für die Polygone der Staaten...

Mir liegen sowohl die Flächen der Staaten als auch deren Umrandung als PNG vor, letzteres sogar als SVG (alles siehe Anhang). Kennt jemand von euch eine Möglichkeit, damit irgendwie die Koordinaten für die HTML-Einbindung bestimmen zu können?
Für jeden Staat alle Koordinaten per Hand zu ermitteln kommt nicht in Frage, da sitze ich nächstes Jahr noch dran...

[Jens01]

ich bin raus

[Benedikt Magnus]

Ja. Die gerenderten Bilder sollen in einer Webseite eingebunden werden. Wie erhalte ich nun aus den vorliegenden Daten die nötigen Koordinaten, um das machen zu können?
Oder gibt es gar einen völlig anderen Weg, der sich einfacher realisieren ließe?

[himitsu]

Die "billigste" Lösung für Delphi (vermutlich geht das auch in HTML JavaScript)

Du hast doch das Farben-PNG ... das bearbeitest du noch ein bissl.
* jedes Land eine andere Farbe (da reichen auch 256 Farben)
Rot=0 > nichts
Rot=1 > Land 1
Rot=2 > Land 2
...
* Klick auf das sichtbare Bild
* das selbe Pixel im internen Farben-Bild auslesen
* Farbe = Index in der Länderliste

Bei SVG, braucht man nur 'ne ordentliche SVG-Klasse, wo man auslesen kann, welches "Polygon" an der gewünschten stelle liegt und dann muß man nur noch das Polygin mit dem Land verknüpfen ... z.B. Polygone Zählen und den Index als Index für Länderliste, oder Bezeichner/Kommentare im SVG hinterlegen.

[Jens01]

Naja, antworte ich doch.
Ich dachte, man könnte es so wie zB OpenGL machen. Da wird die Flächen bzw Linien in einer bestimmten Farbe eingefärbt -ohne sie auf dem Bildschirm anzeigen zu lassen-. Es kann dann die Farbe unter der Maus ermittelt werden und damit das Element. Nennt sich Colorpicking. Eventuell bringt es Dich ja auf eine Idee....

[Benedikt Magnus]

Vielleicht habe ich mich missverständlich ausgedrückt:
Mit Delphi findet nur das Rendering der Bilder statt (in regelmäßigen Abständen). Das Anzeigen erfolgt auf einer Webseite per HTML, sodass kein Flash mehr benötigt wird.

[Ghostwalker]

hmmm....ich würds so versuchen:


layer 01 (untester) -> png der Welt
Layer 02 (drüba) -> png der einzelnten Staaten.

Das ganze einfach über Divs mit entsprechenden css-Eigenschaften, js-handler an die Staaten-Divs..feddich.

Das kniffligste daran wär die Positionierung der Einzelstaaten, analog zur Weltkarte. Aber das muss nur einmal gemacht werden.

[himitsu]

Zitat:

Vielleicht habe ich mich missverständlich ausgedrückt:

Vom Prinzip her ist alles gleich, egal ob man den Code in Delphi oder in JavaScript/AJAX/HTML5/.... ausführt.

enweder/oder
* die Farben aus einem "unsichtbaren" Image-Layer auslesen
* die Farben aus zweiten Image auslesen
* extern eine Polygon/Staaten-Liste und beim Klick darein schauen
* beim SVG kann man eventuell die Staaten/Bezeichner intern zum Polygon/Gruppenobjekt speichern und beim Klick auslesen

[Benedikt Magnus]

Zitat von Ghostwalker:

layer 01 (untester) -> png der Welt
Layer 02 (drüba) -> png der einzelnten Staaten.

Das ganze einfach über Divs mit entsprechenden css-Eigenschaften, js-handler an die Staaten-Divs..feddich.

Und wie genau würde das für nichtrechteckige Staaten aussehen? Würde das Ganze nicht auch reagieren, wenn ich auf den transparenten Teil eines Staats-PNGs klicke, obwohl sich der eigentlich schon im nächsten befindet?

[Benedikt Magnus]

Zitat von himitsu:

Vom Prinzip her ist alles gleich, egal ob man den Code in Delphi oder in JavaScript/AJAX/HTML5/.... ausführt.

Ich werde mich mal erkundigen, wie sich das in JavaScript umsetzen ließe, das würde dann nämlich vielleicht gehen...

Edit: Okay, das Ganze dürfte sich mit Javascript per Canvas und Pixelvergleich lösen lassen. Vielen dank für eure Hilfe und himitsu für die Lösung!
Sollte es nicht klappen, melde ich mich nochmal.