JavaScript-Grafik Zu den JavaScript-Seiten

English (translated by Google ;)

JavaScript-Grafik
für die kleine
Grafik
zwischendurch
mit X: und Y:

Report:

JavaScript-Grafik ... wassn das?

Mit JavaScript-Grafik kann man den Java-Compiler stecken lassen, wenn's drum geht, nur ein paar Linien auf den Schirm zu bringen. Alles, was man braucht, um die Möglichkeiten der JavaScript-Klassenbibliothek zu nutzen, ist ein DIV-Tag der Klasse screen, dem man noch eine id z. B. screen (oder was anderes) und mit dem style-Attribut eine Breite und Höhe verpasst. Insgesamt sieht das dann so aus: 

<div id="screen" class="screen" style="width: 480px; height: 400px;">
</div>

Auf der JavaScript-Seite genügen die folgenden wenigen Zeilen für ein einfaches Hello-World-Programm: 

//--- Die Grafik-Klasse an das DIV-Tag mit 
//--- der id="screen" binden.
var gr = new JSgraphic ("screen");

//--- Ausgabe putzen
gr.clearscreen();

//--- Text in Standardgröße und Standardfarbe ausgeben
gr.textOut (10, 10, "Hallo Welt");

Linienziehen geht so: 

//--- Linie in Standardschwarz
gr.line (10, 30, 110, 40);

//--- Linie in hellem Rot
gr.setPenColor (RGB (255, 200, 200));
gr.line (20, 30, 120, 40);

Mit gr.setPenWidth (breite) kann die Linienstärke geändert werden. Kurven und Polygone werden so gemacht: 

//--- Eine neue PolyDraw-Klasse erzeugen
var poly = new PolyDraw ();

//--- Grafikinfo speichern
poly.moveTo (22, 191);
poly.curveTo (22, 124, 110, 70, 219, 70);
poly.lineTo (150, 50);

//--- und mit Füllfarbe Rot ausgeben
gr.polyDraw (poly, 0xFF0000, -1);

Ja, in der neuen Version kann die JavaScript-Grafik auch unregelmäßige Flächen füllen − zu bewundern im obigen PolyDraw-Beispiel.

Kreise, Ellipsen, Kreisbogen und Tortenstücke zeichnet man ebenfalls mit den entsprechenden Funktionen der PolyDraw-Klasse. Zu beachten ist, dass der Kreis bei steigenden Gradzahlen im Uhrzeigersinn verläuft. 

//--- Eine neue PolyDraw-Klasse erzeugen
var poly = new PolyDraw ();

//--- Mittelpunkt ist bei 100 90.
//--- x-Radius ist 50, y-Radius ist 40.
poly.ellipse (100, 90, 50, 40);

//--- Das Tortenstück beginnt bei 30 Grad und
//--- verläuft 10 Grad gegen den Uhrzeigersinn.
poly.pie (100, 90, 50, 40, 30, -10);

//--- Der Kreisbogen beginnt mit einem lineTo ()
poly.arc (100, 90, 50, 40, 30, -10, 1);

//--- und mit Füllfarbe Grün ausgeben
gr.polyDraw (poly, 0x00FF00, -1);

Ganz fantastisch (und noch nicht ganz fertig) ist die Bitmap-Unterstützung. Im Bitmap-Beispiel wird eine einfache 8x8-Pixel-Bitmap erst normal ausgegeben, dann vergrößert und zum Schluss noch mal an der x- und y-Achse gespiegelt. Die Bitmap-Pixel werden im Beispiel von einem unsichtbaren HTML-Tag geliefert. Natürlich kann man die Daten auch dynamisch generieren.

Wer nicht recht weiß, wie er seine Grafik in die HTML-Seite reinkriegen soll, der kann z. B. eine einfache Grafik mit IsoPad malen, die Daten über die Zwischenablage in den Texteditor bringen, dann die Nachkommastellen der Koordinaten wegmachen und mit einer PolyDraw-Klasse seine JavaScript-Grafik basteln. (Diese Info ist veraltet. Man kriegt die Daten viel einfacher vom IsoPad-Importfilter konvertiert. Der Importfilter ist weiter unten beschrieben.)

Um die obige Grafik zu füllen, malt man in IsoPad eine Grafik, die etwa 450 mm x 400 mm groß ist. Wenn die IsoDraw-Zeichnung im negativen Y-Koordinatenbereich liegt, muss man für die JavaSkript-Grafik nur die Minuszeichen weglassen, dann stimmt das Koordinatensystem.

Natürlich kann man sich auch einen kleinen Importfilter machen, ähnlich wie beim JavaScript-PostScript-Filter oder man generiert alle Grafikdaten über einen Funktionsplotter in JavaScript. Die Möglichkeiten sind vielfältig. (Den Importfilter gibt es jetzt. Er ist weiter unten beschrieben.)

Mathematische Formeln

JavaScript-Grafik ist auch eine nette Einsatzmöglichkeit zur Darstellung von Formeln. Wenn man das direkt in HTML kodieren wollte, täte man sich bei allem, was über Pythagoras raus geht, doch ein bisschen schwer.

a² + b² = c²

Man kann die Formel in IsoPad malen und dann relativ einfach in JSgraphic-Kommandos konvertieren. Hauptnachteil der Methode ist, dass IsoPad den Nullpunkt von Text an der Textgrundlinie ausrichtet und JSgraphic an der linken oberen Ecke. Das führt dazu, dass man die Y-Koordinaten der textOut-Kommandos um einen gewissen textgrößenabhängigen Faktor reduzieren muss.

Damit das automatisch gemacht wird, gibt's aber auch den IsoPad-Importfilter für JavaScript-Grafik.

Der IsoPad-Importfilter

Ein Importfilter für JavaScript-Grafik lag einfach zu nahe, als dass man dran vorbei sehen könnte. Und hier ist er. Einfach eine IsoPad-Grafik in die Zwischenablage, dann mit Strg-V in das Textfeld IsoPad-Daten kopieren, auf Importieren klicken und fertig.

Grafik
IsoPad-Daten:

Eine weiter Möglichkeit eine JavaScript-Grafik auf die HTML-Seite zu bekommen, besteht darin, nach dem Importieren einer IsoPad-Grafik die erzeugten Daten mittels JavaScript auszulesen, in ein Textfeld zu kopieren, von dort in die Zwischenablage zu kopieren und schließlich direkt im HTML-Editor in die HTML-Datei zu nehmen.


Man sollte aber beachten, dass die Daten in ein div-Tag eingefügt werden, das ebenfalls die Klasse screen hat, sonst bekommt man eventuell unerwartete Ergebnisse.

Noch eine Möglichkeit bietet die Funktion MakeScript () der Klasse IsoPadImporter. Sie macht fast das Gleiche wie die Funktion Import () nur erzeugt sie einen JavaScript-Code, der etwas platzsparender ist als die Grafikdaten selbst. Aufrufen kann man die Funktion mit dem JSgrafik-Script erzeugen-Schalter.

Grafischer Text

Mit der Klasse Font_Schweiz kann JavaScript-Grafik nun Text in fast beliebiger Art darstellen. Als Fontdaten können beliebige TrueType-Schriften benutzt werden, die mit Hilfe des kleinen Konverterprogramms JavaScript-Font-Schreiber (Windows) in JavaScript-Font-Klassen konvertiert und in eine JS-Datei gespeichet werden.

Nachdem eine Klasse, die bis dahin nur die Vektor-Infos der TrueType-Schrift enthält mit den Funktionen der Klasse Font_Schweiz (in dieser HTML-Datei enthalten) erweitert wurde, kann sie in JavaScript benutzt werden, um grafischen Text auf die Seite zu bringen.

Natürlich könnte auch der Font-Schreiber die Funktionen eintragen, vermutlich wären sie aber nach kurzer Zeit veraltet, weil sich so ein JavaScript doch schneller verändert ... als man glaubt.

Zur Zeit müssen die folgenden Elemente kopiert werden (das kann sich ändern), bevor die Klasse funktioniert:
textOutRotation, textOutSize, textOutXY, textOut, textDelta, paintChars, paintChar, getAscStr, getTextWidth. Kurz gesagt alles, was nicht aussieht wie eine Zeichenkette-Definition.

Falls man die JavaScripts auf öffentlichen Web-Servern verwenden will, sollte man darauf achten, dass man freie Fonts verwendet. Beispielsweise Bitstream Vera oder eine der DejaVu-Schriften.

Tagebuch

<< Der JavaScript-PDF-eBook-Kreator | Der JavaScript-PostScript-Filter >>