Auf Grund einer Anfrage bezüglich drehbarer Marker habe ich zu diesem Thema einmal eine kleine Demo erstellt.
Prinzipiell bieten sich dafür vier Wege an:
- Drehung per CSS mit Hilfe von
Filtern.
Dazu ist der Zugriff auf das IMG- bzw. DIV-Element notwendig, der jedoch vom (JavaScript-) Marker-Objekt nicht unterstützt wird. Die Ermittlung des Bild-Containers ist über Umwege zwar möglich, aber umständlich und es ist nicht sicher, ob derartige "Hacks" auch mit zukünftigen API-Versionen kompatibel sind.
- Drehung mit dem Canvas-Element von HTML 5.
Auch hier existieren die selben Probleme wie bei der ersten Lösung. Ein weiteres Gegenargument ist der Umstand, daß damit automatisch Windows XP (und älter) ausgeschlossen wird, da für diese Betriebssysteme kein HTML 5 fähiger IE angeboten wird.
- Erstellung einer entsprechenden Anzahl gedrehter Icons (zum Beispiel mit einem Bildbearbeitungsprogramm) und Zuweisung des gewünschten Bildes zum Marker.
Auch diese Methode hat einen gravierenden Nachteil: Das schlechte Speichermanagement des IE's, auf das man leider keinen Einfluß hat. Dadurch wächst der Speicherverbrauch schnell um zahlreiche Megabyte.
- Drehung des Bildes mit Delphi und Übergabe an das Marker-Objekt.
Dieser Weg bietet die meisten Vorteile, da er die größtmögliche Kontrolle über den Vorgang zuläßt. Das beginnt mit der Optimierung der Bildrotation (Schnelligkeit, Qualität des Antialiasing), geht über die Kontrolle des Speicherverbrauch (direkte Freigabe nicht mehr benötigter Objekte, kein Warten auf eine Garbage Collection und kein Cache, auf den man keinen Einfluß hat - wer kennt das nicht: Man hat 10 Seiten geöffnet und der Taskmanager bescheinigt dem IE einen Speicherverbrauch von einem GByte).
Als Marker-Icon wird ein Png-Bild mit Transparenz verwendet. Deshalb setzt die Demo die
Unit PNGImage voraus. Ab Delphi 2009 ist diese Bestandteil der Bibliothek, bei älteren Versionen muß sie nachträglich installiert werden. Zu finden ist sie zum Beispiel
hier.
Desweiteren muß in diesem Fall die Verwendung von Png-Bildern in der Datei
gmConfig.inc per Compilerschalter aktiviert werden, um die entsprechenden Funktionen im Framework nutzbar zu machen:
Delphi-Quellcode:
{$DEFINE USE_PNGIMG} //<- Punkt nach '{' entfernen
//...
Dadurch, daß die Bezeichnung von TPNGObject in TPNGImage geändert wurde, sind auch die
dfm-Dateien nicht kompatibel. In älteren Delphi-Versionen müssen deshalb die Picture-Eigenschaften der Image-Komponenten neu geladen werden. Ansonsten wurde die Demo mit Delphi 5 und XE getestet und sollte auch mit anderen Delphi-Versionen funktionieren.
Gedreht wird das Bild mit Hilfe von
SmoothRotate - einer Prozedur von
Gustavo Daud, dessen Beispiele leider nur noch sehr schwer zu finden sind. Nach langer Suche wurde ich auf
CodeCentral von Embarcadero fündig, wo unter
PNGDelph Method Shop Code Samples auch einige Demos von
Gustavo enthalten sind. Leider liegen die Dateien dort nur im txt-Format vor und enthalten einige Bugs. Deshalb wurden die benötigten Methoden von mir in eine
Unit gepackt, ein Speicherleck beseitigt und um die Möglichkeit, beim gedrehten Bild die Größe des Originalbildes beizubehalten, erweitert.
Nach der Drehung wird das Bild Base64 kodiert und an den Marker übergeben.
Der gesamte Vorgang (Drehung, Antialiasing, Kodierung, Übergabe und Anzeige im Browser) geschieht in Echtzeit und führt auch auf einem Netbook zu keinem Ruckeln oder Flackern.
Das Ergebnis sieht dann so aus:
