DJSGT - Vektorgrafik in HTML-Seiten
(DJSGT: Dröppez JavaScript Graphics Tool)
Problemstellung:
Es gibt Tage, da will man ein paar kleine Spielereien in eine Seite einbauen, nichts Großes, versteht sich, nur hier ein paar Rechtecke, da ein paar Linien, dort noch einen Kreis und ein Dreieck, vielleicht noch ein bisschen HTML-formatierten Text, unter Umständen mit Bildern.Und ein bißchen bewegen soll sich das ganze, und wenn man eine Taste drückt, sollen sich ein paar Farben ändern.
Und dann steht man vor HTML und merkt, daß eine Lösung damit ziemlich gruselig bis unmöglich wird.
Und extra ein Java-Applet für so ein bißchen Kram zu laden lohnt sich auch nicht.
Und Flash? Lohnt für solche Peanuts erstens nicht, ist zweitens viel zu teuer (ach ja, der verfluchte Geiz) und drittens hat nicht jeder ein Plugin, viertens will auch gar nicht jeder ein Flash-Plugin (wozu auch?).
Und dann kann man sich nur ein JavaScript runterladen und beten, daß man damit hinkriegt, was man will.
Und dann hofft man inständig, daß der Surfer einen DOM-Level-3- und JavaScript-fähigen Browser hat, also entweder mit Gecko- (Mozilla, Netscape, ...) oder KHTML-Maschine (KDE Konqueror, ...) oder halt, wenn's unbedingt sein muß, den Micro$oft Internet Explorer.
Wenn der von aufspringenden PopUps und bunt zappelnden Schriftzügen genervte Surfer allerdings JavaScript abschaltet, guckt man eben in die Röhre. Das ist dann zwar nicht schön, dafür aber selten.
Kompatibilität:
Die hier beschriebenen Scripts sind übrigens für den Bastlerbedarf kostenlos und nur für professionelle und kommerzielle Anwendungen kostenpflichtig.Mit Erfolg getestet wurden die Scripts an folgenden Browsern:
Konqueror3, Mozilla, Netscape7, Opera7, MSIE5 und Nachfolger.
Warnhinweise:
Weder HTML noch JavaScript sind dafür gedacht, Vektorgrafiken darzustellen.Maximal ein paar Rechtecke lassen sich einfach und unkompliziert als Div-Sektionen einbauen.
Und genau das ist es, was dieses Grafik-Werkzeug tut, nämlich Rechtecke zu grafischen Figuren zusammensetzen. Jede Linie und jedes gefüllte Polygon wird aus rechteckigen Div-Sektionen zusammengesetzt, bei Bedarf auch aus solchen, die nur einen Pixel breit oder einen Pixel hoch sind.
Dabei habe ich das Teil so geschrieben, daß möglichst viele Pixel zu einem Objekt zusammengebunden werden.
Trotzdem muß für jede Abstufung und jedes "Treppchen" eine neue Div-Sektion angelegt werden.
Für jede Feinheit muß also ein extra DOM-Objekt kreiert werden.
Beispiel:
Eine Linie, die unter 45° vom Punkt (0,0) zum Punkt (100,100) läuft, hat 100 "Treppchen".
Sie benötigt also 100 Div-Sektionen für ihre saubere Darstellung. Darunter geht in diesem Fall nichts. Das sind also 100 ausgewachsene DOM-Objekte mit allen Attributen und Unterobjekten, also je ein kräftiges Stück Speicherplatz und Zeitaufwand in der Darstellung.
Eine Linie, die waagerecht vom Punkt (0,0) zum Punkt (100,0) läuft, hat keine "Treppchen".
In diesem Fall genügt eine Div-Sektion.
Freilich sind die meisten Browser mit ein paar tausend DIV-Sektionen noch nicht überfordert, trotzdem bremst die Darstellung vieler feingliedriger und komplizierter Figuren den Seitenaufbau erheblich.
meine Testumgebungen:
AMD-K6 mit 266MHz, 64MB Arbeitsspeicher,
Mozilla und Konqueror3 unter Linux, X-Umgebung: Blackbox oder KDE
MSIE 5.0 unter MS Windows NT 4.0, Service Pack 6.0a
Die Beispielgrafiken sind für Gecko- und KHTML-Maschinen ausgelegt, das Erscheinungsbild ist also an Mozilla, Netscape und Konqueror identisch.
Am M$IE gibt es geringfügige Abweichungen in Position und Größe.
Beispiele:
Beispiel1 (djsgt1.html)Ein paar rechteckige Rahmen und etwas Text
Beispiel2 (djsgtpe1.html)
Ein paar Kreissegmente
Beispiel3 (djsgtpe2.html)
Ein paar Linien und, weil's langsam geht, etwas Animation
Konzept und Quelltextbesichtigung:
Grundobjekte (Bildbereich, Rahmen, Rechteck, Balken, Clip-Region, HTML-Bereich): djsgt.jsPixelgrafik (Balken, Linie, gefülltes Polygon, Tortenstück): djsgtpe.js
Diese Scripts werden in die Seiten dhsgt1.html dhsgtpe1.html und dhsgtpe2.html eingebunden.
Objektreferenz:
DJSGT-Objekte (Definiert in djsgt.js und djsgtpe.js)