Mit welcher Schriftart, Grösse, Farbe, Strichdicke usw. Text bzw. Marker gezeichnet werden sollen, muss vorher über Attribut Funktionen eingestellt werden.
| GetTextSize() | Berechnet die Grösse eines Textes |
| GetTextBox() | Berechnet Position und Grösse einer Textbox |
| Text() | Zeichnet einen Text |
| TextBox() | Zeichnet ein Rechteck um einen Text |
| Marker() | Zeichnet Marker |
JsGraph.SetTextRendering( TextRendering )
Das TextRendering legt fest, mit welchem Verfahren der Text gezeichnet werden soll. Das TextRendering kann auch beim Erzeugen des JsGraph Objektes global festgelegt werden. Der aktuelle Wert kann vom Property TextRendering abgefragt werden.
Html-Text benötigt viele Resourcen und ist langsam und daher nur eingeschränkt für Animationen geeignet. Wenn immer wieder der selbe Text gezeichnet wird, ist der Resourcenverbrauch nicht so extrem (dank Caching).
Für statische Beschriftungen in animierten Grafiken empfiehlt sich, die Funktionen MakeSnapshot() und DrawSnapshot() zu verwenden, damit die Beschriftung nur einmal generiert werden muss und als Snapshot zur Wiederverwendung als Hintergrund herangezogen werden kann.
JsGraph.GetTextSize( Text, Width )
Berechnet den Platzbedarf eines Textes, der mit den aktuellen Text-Attributen gezeichnet würde. Das Padding TextHPad/TextVPad wird im Gegensatz zur Funktion GetTextBox() hier nicht einberechnet.
Achtung: Wenn AutoScalePix aktiviert ist, wird die Textberechnung mit skalierten Werten für TextSize und TextHPad/TextVPad vorgenommen. Wenn zum Beispiel die Position des Textes anhand seiner Grösse berechnet werden soll, so muss dies entsprechend berücksichtigt werden, z.B. indem bei SetViewportRel() die Skalierung der Argumente ausgeschaltet wird, da ja die Werte der Textbox bereits skaliert sind.
Beim TextRendering = 'html' kann der Text HTML Auszeichnungen enthalten! Die Grösse des Textes wird berechnet, nachdem der Text intern gerendert worden ist, d.h. nachdem alle HTML Auszeichnungen interpretiert worden sind.
Die Text-Grösse wird in den Properties w und h des WorkRect zurückgegeben. WorkRect ist ein internes Objekt zum Speichern von Rechteck-Daten.
Durch Angabe von Width bei TextRendering = 'html' kann die Breite des Textes limitiert werden. Der Text wird dann entsprechend umgebrochen und die BoxHeight wird entsprechend grösser. Wenn Width nicht vorgegeben wird, wird der Text nicht umbrochen. Bei TextRendering = 'canvas' hat Width keine Funktion und wird ignoriert.
Hinweis: Text, der im Mode TextRendering = 'canvas' gezeichnet wird, kann über eine Objekt-Transformation verzerrt werden. Diese Funktion gibt nur die Textbox des unverzerrten Textes zurück. Wird diese Box allerdings mit derselben Transformation gezeichnet, wird sie gleich verzerrt wie der Text.
JsGraph.GetTextBox( Text, x, y, Width )
JsGraph.GetTextBox( Text, p, Width )
Berechnet die Textbox eines Textes, der mit den aktuellen Text-Attributen gezeichnet würde. Insbesondere wird das Alignment TextHAlign/TextVAlign und das Padding TextHPad/TextVPad einberechnet, nicht jedoch die Rotation und Objekt-Transformationen.
Zum Zeichnen der Textbox kann die Funktion TextBox() verwendet, welche auch Rotation und Objekt-Transformation bezücksichtigt.
Achtung: Wenn AutoScalePix aktiviert ist, wird die Textberechnung mit skalierten Werten für TextSize und TextHPad/TextVPad vorgenommen. Wenn zum Beispiel die Position des Textes anhand seiner Grösse berechnet werden soll, so muss dies entsprechend berücksichtigt werden, z.B. indem bei SetViewportRel() die Skalierung der Argumente ausgeschaltet wird, da ja die Werte der Textbox bereits skaliert sind.
Wenn die Textposition nicht angegeben wird, wird der Nullpunkt verwendet.
Beim TextRendering = 'html' kann der Text HTML Auszeichnungen enthalten! Die Grösse des Textes wird berechnet, nachdem der Text intern gerendert worden ist, d.h. nachdem alle HTML Auszeichnungen interpretiert worden sind.
Die berechnete Textbox kann der Funktion Rect() zum Zeichnen der umschliessenden Textbox übergeben werden, siehe JSG Test: Html Text und JSG Test: Canvas Text oder noch besser mit der Funktion TextBox(), welche auch Text Rotation und Objekt-Transformation mit einberechnet.
x und y bzw. p ist die horizontale bzw. vertikale Position des Text-Referenzpunktes. Die Position des Referenzpunktes relativ zur Textbox kann durch das Alignment festgelegt werden (siehe SetTextHAlign(), SetTextVAlign() und SetTextAttr()). Der Abstand des Box-Rahmens zum Text und damit des Referenzpunktes vom Text kann mit dem Text-Padding festgelegt werden (siehe SetTextPadding()).
Die Text-Grösse wird in den Properties w und h des WorkRect zurückgegeben. WorkRect ist ein internes Objekt zum Speichern von Rechteck-Daten.
Im Gegensatz zur Funktion GetTextSize() wird der Text in GetTextBox() am Rande des Canvas umgebrochen, auch wenn keine Width vorgegeben wird. Die Textbreite kann aber über Width auf eine selber vorgegebene Breite limitiert werden.
Bei TextRendering = 'canvas' wird Text nie umgebrochen, sondern geclippt. Width hat also keine Funktion und wird ignoriert.
Hinweis: Text, der im Mode TextRendering = 'canvas' gezeichnet wird, kann über eine Objekt-Transformation verzerrt oder mit SetTextRotation() rotiert werden. Diese Funktion gibt nur die Textbox des unverzerrten Textes zurück. Wird diese Box allerdings mit derselben Transformation gezeichnet, wird sie gleich verzerrt wie der Text. Dies gilt nur für nicht rotierte Texte. Eine mit TextBox() gezeichnete Box berücksichtig jedoch alle Transformationen.
JsGraph.Text( Text, x, y, w )
JsGraph.Text( Text, x, y, Mode )
JsGraph.Text( Text, p, w )
JsGraph.Text( Text, p, Mode )
Zeichnet einen Text in den aktuellen Text-Attributen. Die erste Aufrufvariante muss gewählt werden für TextRendering = 'html', die zweite für TextRendering = 'canvas'.
Der Text kann HTML Auszeichnungen enthalten, wenn TextRendering = 'html' ist. Der Text wird dann am Rand des Canvas umbrochen, auch wenn kein w vorgegeben wird. Die Textbreite kann aber über w auf eine selber vorgegebene Breite limitiert werden.
x und y ist die horizontale bzw. vertikale Position des Text-Referenzpunktes. Die Position des Referenzpunktes relativ zur Textbox kann durch das Alignment festgelegt werden (siehe SetTextHAlign(), SetTextVAlign() und SetTextAttr()). Der Abstand des Referenzpunktes vom Text kann mit dem Text-Padding festgelegt werden (siehe SetTextPadding()), welches sich auch auf die Grösse der Textbox auswirkt (siehe GetTextBox()).
Die folgenden Mode Einstellungen gelten nur für TextRendering = 'canvas':
| Mode | Beschreibung |
|---|---|
| 0 | Text mit TextColor gefüllt zeichnen, keine Text-Kontur zeichnen |
| 1 | Nur Text-Kontur in der Farbe Color und der Strichdicke LineWidth zeichnen |
| 2 | Nur Text-Füllung in der BgColor zeichnen (auch Farbverläufe möglich) |
| 3 | Kombination von Mode 1 und 2 |
Wenn Mode = 3 gewählt ist, wird zuerst der Text gefüllt und danach die Kontur gezeichnet. Die Kontur liegt somit vor der Füllung. Wenn LineWidth zu dick gewählt wird, kann die Füllung von der Kontur vollständig verdeckt werden.
Hinweis: Wenn eine Objekt-Transformation definiert ist, wird die Kontur-Dicke mit dem Text transformiert. Die Strichdicke LineWidth gibt somit die Kontur-Dicke des untransformierten Textes wieder. Für ein Beispiel siehe JSG Test: AddTrans.
Über die Funktion GetTextBox() kann die Position und Grösse der den Text gerade umschliessenden Textbox abgefragt werden.
JsGraph.TextBox( Text, X, Y, Mode, Roll, Width )
JsGraph.TextBox( Text, Pos, Mode, Roll, Width )
Berechnet ein Rechteck, das Text umschliesst und zeichnet es in den aktuellen Flächen- und Linien-Attributen. Bei der Berechnung werden alle Text-Attribute wie Grösse, Alignment, Padding und Rotation berücksichtigt. Wenn eine Objekt-Transformation definiert ist, welche den Text verzerrt, wird die Textbox ebenfalls verzerrt.
Hinweis: Nur Texte welche im TextRendering = 'canvas' gezeichnet werden, können rotiert und transformiert werden.
| Mode | Beschreibung |
|---|---|
| 1 | Rechteck Umriss zeichnen |
| 2 | Rechteck füllen |
| 4 | Umlaufsinn des Rechteck umkehren (nur wenn Pfad offen ist) |
| 8 | Rechteck an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von Mode zusammengesetzt werden. Wenn also zum Beispiel das Rechteck gefüllt werden soll und gleichzeitig auch die Kontur gezeichnet werden soll, so muss Mode = 1 + 2 = 3 gesetzt werden.
Wenn das Rechteck Teil eines Pfades ist, muss eventuell sein Umlaufsinn mit dem Bit 4 von Mode entsprechend eingestellt werden, um ein rechteckiges Loch in einer Fläche zu erzeugen. Ein Loch entseht dann, wenn der Umlaufsinn des Rechtecks entgegen dem Umlaufsinn der umgebenden Fläche ist.
Wenn das Rechteck Teil eines Pfades ist und das Bit 8 von Mode gesetzt ist, d.h. die Rechteck-Kontur wird Teil eines Pfades, so kann mit Roll gesteuert werden, welcher Punkt des Rechtecks der erste bzw. letzte Punkt ist, der mit der Pfadkontur verbunden werden soll. Roll wird vor Invert (Bit 4 von Mode) angewandt.
Bei Roll = 0 ist der Punkt mit den kleinsten bzw. negativsten XY-Koordinaten der erste/letzte Punkt. Mit Roll kann dies geändert werden, indem die Punkte zirkulär verschoben werden.
Standardmässig ist Roll = 0. Wenn Roll = 1 ist, werden die Punkte eine Stelle in Richtung kleinerem Index rotiert. Damit wird Punkt mit Index 1 zum Start-/Endpunkt des Rechtecks. Mit negativem Roll wird in Richtung grösserem Index rotiert. Roll = 3 entspricht Roll = -1.
Mit der Funktion SetLineJoin() kann eingestellt werden, ob das Rechteck runde (round) oder eckige (miter oder bevel) Ecken haben soll.
JsGraph.Marker( x, y, Mode, Mat )
JsGraph.Marker( p, Mode, Mat )
JsGraph.Marker( xArray, yArray, Mode, Mat, size )
JsGraph.Marker( poly, Mode, Mat )
| Mode | Beschreibung |
|---|---|
| 1 | Markerkontur zeichnen |
| 2 | Marker füllen |
| 4 | Marker-Kontur invertieren, um Marker-Löcher in Flächen zu erhalten |
Zeichnet und/oder füllt Marker in den aktuellen Marker-Attributen. Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von Mode zusammen gesetzt werden. Wenn also zum Beispiel ein Marker gefüllt und gleichzeitig die Kontur des Markers gezeichnet werden soll, so muss Mode = 1 + 2 gesetzt werden.