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.
Zeichenketten (Strings) und Nicht-Ganzzahlen (Fließkommazahlen) müssen mit den JavaScript-Standardfunktionen parseInt() bzw. 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);
|
fillArc(X, Y, width, height, Startwinkel, Endwinkel);
Füllt ein Ellipsen-Segment.
Die Werte für Start- und Endwinkel dürfen hier ausnahmsweise auch Dezimalpunkt-Zahlen sein.
Wie bei den anderen ...Ellipse()-Funktionen geben X und Y nicht den Mittelpunkt, sondern die linke obere Ecke des umfassenden Recktecks an.
|
jg.fillArc(20,20,41,12,270.0,220.0);
|
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.
Die Parameter Breite und Höhe sind optional
(können auch 0 oder null sein oder weggelassen werden, das Bild wird dann in seiner Normalgröße dargestellt),
erlauben aber nahezu beliebig 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. |
|
English version
Home