Name der Methode
(Bildchen selbstverständlich von der
Vektorgraphik-Bibliothek in die Tabelle gezeichnet) |
Codebeispiel (am Beispiel von jg) |
Allgemeine Hinweise
1.) Zahlen, die den Funktionen übergeben werden, müssen Ganzzahlen
(Integers) sein. Nicht-Ganzzahlen (Fließkommazahlen) und
Zeichenketten (Strings) müssen mit den
JavaScript-Standardfunktionen parseInt() oder Math.round()
in Integers umgewandelt werden. JavaScript-Berechnungen
beispielsweise haben überwiegend Fließkommazahlen als Ergebnis,
Werte von Formulareingabefeldern sind immer Strings, auch wenn
Zahlen eingegeben wurden. Codebeispiel:
jg.setStroke(parseInt(document.MyForm.Linewidth.value));
2.) Falls Sie gezeichnete Elemente sehr genau positionieren
müssen/wollen: Beachten Sie, dass Koordinaten zwischen Pixeln
liegen, nicht auf ihnen, und dass der "Malstift" die Pixel
rechts unterhalb des durch die Koordinaten vorgegebenen Pfades
färbt, auch bei Linien dicker als 1 px. |
setColor("#Hexfarbwert");
Setzt Malfarbe für die nachfolgend aufgerufenen Zeichenmethoden,
und zwar so lange, bis sie durch einen erneuten Aufruf von setColor()
geändert wird. Der Farbwert muss in Anführungszeichen stehen. Mit
Rücksicht auf Cross-Browser-Funktionalität sollte er hexadezimal,
nach dem in HTML üblichen Schema "#rrggbb", angegeben
werden. Erlaubt sind aber auch die in HTML zulässigen Farbnamen. |
jg.setColor("#ff0000");
oder mit identischem Ergebnis
jg.setColor("red"); |
setStroke(Zahl);
Kann optional aufgerufen werden und setzt die Liniendicke für die
nachfolgend aufgerufenen Zeichenmethoden, und zwar so lange, bis sie
durch einen erneuten Aufruf von setStroke() geändert wird.
Voreingestellte Dicke, solange .setStroke() nicht
aufgerufen wurde, ist 1 px.
Um eine gepunktete Linie (gültig auch für Umrandungen von
Ellipsen, Polygonen etc.) zu erzeugen, können Sie setStroke()
als Parameter die Konstante Stroke.DOTTED übergeben. Die
Liniendicke wird automatisch auf 1 Pixel gesetzt, andere Dicken sind
nicht möglich. |
jg.setStroke(3);
oder
jg.setStroke(Stroke.DOTTED) |
drawLine(X1, Y1, X2, Y2);
1 Pixel breite Linie (Gerade) von Anfangs- zu Endkoordinaten. Um die
Linienstärke zu ändern, kann zuvor die Methode .setStroke(Zahl)
aufgerufen werden. Diese Einstellung bleibt für alle nachfolgend
aufgerufenen Linienmethoden erhalten, bis .setStroke() erneut
aufgerufen wird. |
jg.drawLine(0, 11, 40, 0); |
drawPolyline(X-Werte Anfang/Knicke/Ende, Y-Werte);
(Mehrfach) geknickte Linie, beginnend beim ersten X- und Y-Wert. X-
und Y-Werte sind Arrays. Sie können entweder direkt im
Methodenaufruf definiert, oder vorher nach folgendem Schema angelegt
werden:
var xWerte = new Array(x1,x2,x3,x4,x5);
var yWerte = new Array(y1,y2,y3,y4,y5);
Liniendicke entweder, wie per .setStroke()
eingestellt, oder 1px. |
jg.drawPolyline(new Array(10,85,93,60), new
Array(50,10,105,87));
oder alternativ
var xWerte = new Array(10,85,93,60);
var yWerte = new Array(50,10,105,87);
jg.drawPolyline(xWerte,yWerte); |
drawRect(X,Y,Breite,Höhe);
Rechteck, nicht gefüllt, aus 1 px dicken Linien. Koordinaten
beziehen sich auf die linke obere Ecke. Die Liniendicke kann mit .setStroke(Dicke)
geändert werden. |
jg.drawRect(0, 0, 40, 11); |
fillRect(X,Y,Breite,Höhe);
Gefülltes Rechteck. Koordinaten beziehen sich auf linke obere Ecke. |
jg.fillRect(0, 0, 40, 11); |
drawPolygon(X-Werte Ecken, zugehörige Y-Werte);
Vieleck. X- und Y-Werte sind Arrays. Sie können entweder direkt im
Methodenaufruf definiert, oder vorher nach folgendem Schema angelegt
werden:
var xWerte = new Array(x1,x2,x3,x4,x5);
var yWerte = new Array(y1,y2,y3,y4,y5);
Falls das letzte X-/Y-Wertepaar nicht identisch mit dem ersten ist,
schließt das Programm von sich aus das Polygon, indem es eine Linie
vom letzten zum ersten Koordinatenpaar zieht.
Liniendicke entweder, wie per .setStroke()
eingestellt, oder 1px. |
jg.drawPolygon(new Array(10,85,93,60), new
Array(50,10,105,87));
oder alternativ
var xWerte = new Array(10,85,93,60);
var yWerte = new Array(50,10,105,87);
jg.drawPolygon(xWerte,yWerte);
Statt "xWerte" bzw. "yWerte" können Sie
natürlich andere Variablennamen verwenden. |
fillPolygon(X-Werte Ecken, zugehörige Y-Werte);
Gefülltes Polygon. Parameter analog zu drawPolygon() |
jg.fillPolygon(new Array(10,85,93,60), new
Array(50,10,105,87)); |
drawEllipse(X,Y,Breite,Höhe);
Ellipse. Liniendicke entweder, wie per .setStroke()
eingestellt, oder 1px. Koordinaten beziehen sich auf das virtuelle
Rechteck, das die Ellipse (genauer: den Pfad, dem der Malstift
folgt) umfasst. |
jg.drawEllipse(0, 0, 40, 12);
oder
jg.drawOval(0, 0, 40, 12); |
fillEllipse(X, Y, Breite, Höhe);
Gefüllte Ellipse. Koordinaten beziehen sich auf das virtuelle
Rechteck, das die Ellipse exakt umfasst. |
jg.fillEllipse(0, 0, 41, 13);
oder
jg.fillOval(0, 0, 41, 13); |
drawString("Text", X, Y);
Text an definierte Position schreiben. Die Koordinaten X und Y
beziehen sich auch hier, anders als bei Java, auf die linke obere
Ecke der (ersten) Textzeile. Der Text muss in Anführungszeichen
gesetzt werden. Enthaltene HTML-Tags werden interpretiert. Ein
(nicht maskiertes) <br> würde also tatsächlich einen
Zeilenumbruch bewirken.
setFont("Schiftfamilie", "Größe+Einheit",
Stil);
Damit können Sie zuvor auch die Schriftart und -Größe setzen oder
ändern. Schriftfamilie und Größenangabe in Anführungszeichen.
Mögliche Stilangaben:
Font.PLAIN für normale Schrift
Font.BOLD für fette Schrift
Font.ITALIC für Kursivschrift
Font.ITALIC_BOLD oder Font.BOLD_ITALIC, um letztere zu kombinieren |
jg.setFont("arial","15px",Font.BOLD);
jg.drawString("Geschwalle",20,50); |
drawStringRect("Text", X, Y, Breite,
Ausrichtung);
Wie drawString. Zusätzlich können die Breite des
Text-"Containers" und die Textausrichtung innerhalb dieses
Rechtecks festgelegt werden. Textausrichungswert muss ein String
sein (d.h. in Anführungszeichen oder Apostrophe eingeschlossen
sein) und kann entweder "left", "center",
"right" or "justify" sein. |
jg.setFont("verdana","11px",Font.BOLD);
jg.drawStringRect("Text",20,50,300,"right"); |
drawImage("Pfad", X, Y, Breite, Höhe);
Bild exakt an definierter Position in angegebener Größe
darstellen.
"Pfad"-Angabe wie in HTML. Selbstverständlich ist die
Größenangabe (nahezu) beliebig und erlaubt verzerrte Darstellung.
Optional kann als fünfter Parameter ein Eventhandler definiert
werden, der dann automatisch in das erzeugte <img>-Tag
eingefügt wird. Beispiel: jg.drawImage('anImg.jpg',8,5,95,70,'onmouseover="YourFunc()"'); |
jg.drawImage("DerTutNix.jpg", 20,50,100,150); |
paint();
Die mit den obigen Methoden zunächst nur intern erzeugte Grafik
wird ausgegeben. Für optimale Performance empfiehlt es sich, paint()
nicht unnötig oft (in unnötig kleinen Intervallen zwischen den
einzelnen Zeichenmethoden) aufzurufen, sondern erst zum Abschluss
der internen Grafikerzeugung.
Vermeiden Sie also
jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...
sondern schreiben Sie besser
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/* ...weitere Zeichenmethoden... */
jg.paint(); |
jg.paint(); |
clear();
Alle vom jsGraphics-JavaScript gezeichneten Inhalte der betreffenden
Malfläche werden gelöscht. Der ursprüngliche Inhalt bleibt aber
erhalten, also Text oder Bilder innerhalb des <div>-Elements,
die im HTML-Quelltext definiert waren. |
jg.clear();
Alle script-generierten Inhalte in "myCanvas" werden
gelöscht. |
setPrintable(true);
Normalerweise werden die gezeichneten Elemente beim Drucken nicht
sichtbar, weil die Browser unter den Standard-Druckereinstellungen
keine Hintergrundfarben mitdrucken. Mit setPrintable() und dem
Parameter true werden die nachfolgend gezeichneten Elemente
drucker-wiedergabefähig (zumindest im Mozilla/Netscape 6+ und
IE). Allerdings auf Kosten der Darstellungsgeschwindigkeit auf dem
Bildschirm, die je nach Browser um 10% bis 25% langsamer wird. |
jg.setPrintable(false);
Setzt die Zeichenmethoden auf "nicht-druckerfähig"
zurück. |
|