WaBis

walter.bislins.ch

JSG: Text und Marker Funktionen

Mit den Text- und Marker-Funktionen können Texte und Marker gezeichnet werden und die Textgrösse und Textbox kann abgefragt werden.

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()

JsGraph.SetTextRendering( TextRendering )

TextRendering: String
Mögliche Werte sind: 'canvas', 'html'
Return: String
Vorheriger Wert

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.

canvas
verwendet die nativen Canvas-Funktionen. Diese Texte sind reine Grafik und können nicht selektiert werden. HTML-Auszeichnungen werden nicht interpretiert sondern 1:1 ausgegeben. Canvas-Text kann durch später gezeichnete Grafik verdeckt werden.
html
Erzeugt Div-Elemente welche den Html-Text enthalten. Dieser Text kann in der Grafik selektiert werden. Html-Auszeichnungen werden interpretiert (z.B. Hoch-/Tiefstellen, Fett, Kursiv, Styles). Html-Text liegt immer über der Grafik.

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()

JsGraph.GetTextSize( Text, Width )

Text: String
Width: Number(>0); Optional
Begrenzende Breite für den Text im mit SelectTrans() gewählten Koordinatensystem
Return WorkRect: JsgRect
Berechnete Textboxgrösse im mit SelectTrans() gewählten Koordinatensystem

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()

JsGraph.GetTextBox( Text, x, y, Width )
JsGraph.GetTextBox( Text, p, Width )

Text: String
x, y: Number; Optional
Position des Text-Referenzpunktes im mit SelectTrans() gewählten Koordinatensystem
p: JsgVect2; Optional
Position des Text-Referenzpunktes im mit SelectTrans() gewählten Koordinatensystem
Width: Number(>0); Optional
Begrenzende Breite für den Text im mit SelectTrans() gewählten Koordinatensystem
Return WorkRect: JsgRect
Berechnete Textbox im mit SelectTrans() gewählten Koordinatensystem

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()

JsGraph.Text( Text, x, y, w )
JsGraph.Text( Text, x, y, Mode )
JsGraph.Text( Text, p, w )
JsGraph.Text( Text, p, Mode )

Text: String
x, y: Number
Position des Text-Referenzpunktes im mit SelectTrans() gewählten Koordinatensystem
p: JsgVect2
Position des Text-Referenzpunktes im mit SelectTrans() gewählten Koordinatensystem
w: Number(>=0); Optional; Default = 0
Begrenzende Breite für den Text bei TextRendering = 'html'
Mode: Integer; Optional; Default = 0
Gibt bei TextRendering = 'canvas' an, ob Text-Kontur und/oder Füllung gezeichnet werden sollen
Return this: JsGraph

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.

JsgGraph.TextBox()

JsGraph.TextBox( Text, X, Y, Mode, Roll, Width )
JsGraph.TextBox( Text, Pos, Mode, Roll, Width )

Text: String
X, Y: Number
Position des Text-Referenzpunktes im mit SelectTrans() gewählten Koordinatensystem
Pos: JsgVect2
Position des Text-Referenzpunktes im mit SelectTrans() gewählten Koordinatensystem
Mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert.
Roll: Integer; Optional; Default = 0
bestimmt welcher Punkt des Rechtecks der erste sein soll
Width: Number(>=0); Optional; Default = 0
Begrenzende Breite für den Text bei TextRendering = 'html'
Return this: JsGraph

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()

JsGraph.Marker( x, y, Mode, Mat )
JsGraph.Marker( p, Mode, Mat )
JsGraph.Marker( xArray, yArray, Mode, Mat, size )
JsGraph.Marker( poly, Mode, Mat )

x, y: Number
Position des Markers im mit SelectTrans() gewählten Koordinatensystem
p: JsgVect2
Position des Markers im mit SelectTrans() gewählten Koordinatensystem
xArray, yArray: Array[ ] of Number
Arrays mit Koordinaten im mit SelectTrans() gewählten Koordinatensystem
poly: JsgPolygon
Polygon-Objekt mit Koordinaten im mit SelectTrans() gewählten Koordinatensystem
Mode: Integer(1..7); Optional; Default = 3
Bitmaske, die verschiedene Modi steuert
Mat: JsgMat2; Optional; Default = undefined
Matrix, mit welcher der Marker vor dem Zeichnen transformiert wird. Dies ist in der Regel eine Rotations-Matrix. Sie wird intern zum Zeichnen von Pfeilen mittels Marker verwendet.
size: integer; Optional
Anzahl Punkte. Wird aus xArray berechnet, falls nicht angegeben.
Return this: JsGraph
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.

Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Samstag, 24. Februar 2018
von wabis