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- Auf der JavaScript-Seite genügen die folgenden wenigen Zeilen für ein einfaches
Hello-World-Programm:
Linienziehen geht so:
Mit 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.
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- 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.)
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.
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 Damit das automatisch gemacht wird, gibt's aber auch den
IsoPad-Importfilter für JavaScript-Grafik.
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.
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 Noch eine Möglichkeit bietet die Funktion Mit der Klasse Nachdem eine Klasse, die bis dahin nur die Vektor-Infos der TrueType-Schrift enthält
mit den Funktionen der Klasse 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: Falls man die JavaScripts auf öffentlichen Web-Servern verwenden will, sollte man
darauf achten, dass man freie Fonts verwendet. Beispielsweise << Der JavaScript-PDF-eBook-Kreator
|
Der JavaScript-PostScript-Filter >>
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>
//--- 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");
//--- 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);
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);
//--- 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);
Mathematische Formeln
textOut
-Kommandos
um einen gewissen textgrößenabhängigen Faktor reduzieren muss.
Der IsoPad-Importfilter
div
-Tag
eingefügt werden, das ebenfalls die Klasse screen
hat, sonst
bekommt man eventuell unerwartete Ergebnisse.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
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.
Font_Schweiz
(in dieser HTML-Datei enthalten)
erweitert wurde, kann sie in JavaScript benutzt werden, um grafischen Text auf die
Seite zu bringen.
textOutRotation
, textOutSize
,
textOutXY
, textOut
,
textDelta
, paintChars
,
paintChar
, getAscStr
,
getTextWidth
.
Kurz gesagt alles, was nicht aussieht wie eine Zeichenkette-Definition.
Bitstream Vera
oder eine der DejaVu
-Schriften.
Tagebuch
textOut
-Funktionen/Objekte von PolyDraw
zeichnen jetzt auch grafischen Text (Outlines, rotierten Text,
transformierten Text ...).
Polygon
zeichnet jetzt auch Kreise, Ellipsen,
Tortenstücke und Kreisbögen.
IsoPadImporter
ermöglicht es Grafik auch
auf JavaScript-freie Seiten zu bringen.
Mit MakeScript ()
kann man aus IsoPad-Daten
JavaScript-Grafik-Programme machen.
PolyDraw
werden Polygone
gefüllt und umrandet.