WaBis

walter.bislins.ch

JSG: Einzel-Attribut Funktionen

Mit den Einzel-Attribut-Funktionen bestimmt man einzelne Eigenschaften von nachfolgend gezeichneten Grafikelementen wie Farbe, Strichdicke, Grösse usw.

Es gibt Funktionen, mit denen jede einzelne Eigenschaft eingestellt werden kann und Funktionen, mit denen ein ganzes Bündel von Eigenschaften eingestellt werden kann. Auf dieser Seite werden die Funktionen zum Setzen einzelner Eigenschaften aufgelistet.

Die Eigenschaften müssen vor dem Aufruf von Zeichen-Funktionen eingestellt werden. Sie werden allen neuen Grafikelementen zugewiesen. Die Eigenschaften müssen also nicht vor jedem Aufruf einer Grafik-Funktion erneut gesetzt werden, sofern sie nicht geändert werden sollen. Das Setzen von Eigenschaften hat keinen Einfluss auf bereits gezeichnete Elemente.

SetColor() Setzt die Farbe für Linien, Marker, Gitter und Achsen
SetBgColor() Setzt die Füllfarbe von Flächen
SetLineWidth() Setzt die Strichdicke von Linien
SetTextClass() Setzt eine CSS Klasse für Texte fest
SetTextFont() Setzt die Schriftart von Texten
SetTextSize() Setzt die Schriftgrösse
SetTextRotation() Rotiert einen Canvas-Text
SetTextColor() Setzt die Farbe für Texte
SetLineHeight() Setzt den Zeilenabstand
SetFontStyle() Setzt den Text-Stil (normal, italix)
SetFontWeight() Setzt die Text-Dicke (normal, bold)
SetFontAttr() Setzt die Text Stil und Dicke (italic, bold)
SetTextAlign() Setzt die Text-Ausrichtung (Horizontal und Vertikal)
SetTextAlignS() Setzt die Text-Ausrichtung (Horizontal und Vertikal) wie angegeben in einem String
SetTextHAlign() Setzt die horizontale Text-Ausrichtung
SetTextVAlign() Setzt die vertikale Text-Ausrichtung
SetTextPadding() Setzt das Text-Padding
SetMarkerSymbol() Wählt ein Marker-Symbol aus
SetMarkerSize() Setzt die Marker-Grösse

JsGraph.SetColor()

JsGraph.SetColor( Color )

Color: String or JsgColor
Format siehe Farben

Mit SetColor wird die Farbe für Linien (Polygon, Rechteck, Kreis, Ellipse), Marker, Gitternetz, Achsen, Tics und Rahmen eingestellt. Die Farbe für Texte kann mit SetTextColor() eingestellt werden.

Die aktuell eingestellte Farbe kann aus dem Property Color ausgelesen werden. Die Farbe kann auch mit einer der Funktionen SetLineAttr(), SetMarkerAttr() oder SetAreaAttr() gesetzt werden.

JsGraph.SetBgColor()

JsGraph.SetBgColor( BgColor )

BgColor: String or JsgColor or JsgGradient
BgColor steht für BackgroundColor. Füllfarbe oder Farbverlauf (Gradient) für alle Arten von Flächen (Format siehe Farben).

SetBgColor setzt die Füllfarbe für Grafikelemente, welche gefüllt werden können (Polygon, Rechteck, Kreis, Ellipse, einige Marker). Ob ein Element gefüllt wird oder nicht kann bei der entsprechenden Zeichenfunktion im Mode-Parameter angegeben werden.

Viele Grafikelemente wie Rechteck, Kreis, Ellipse, Polygon und einige Marker können auf drei Arten gezeichnet werden: Nur als Linien, nur als Flächen oder beides (siehe jeweilige Zeichen-Funktion). BgColor definiert die Füllfarbe für alle diese Elemente.

Die aktuell eingestellten Füllfarbe kann aus dem Property BgColor ausgelesen werden. Wenn ein Farbverlauf aktiv ist, verweist das Property BgGradient auf diesen. Wenn kein Farbverlauf aktiv ist, ist BgGradient = null und es wird mit der Farbe BgColor gefüllt.

Die Füllfarbe kann auch mit einer der Funktionen SetAreaAttr() oder SetMarkerAttr() gesetzt werden.

JsGraph.SetLineWidth()

JsGraph.SetLineWidth( LineWidth )

LineWidth: Number(>=0)
Strichdicke in Pixel.

Mit SetLineWidth wird die Strichdicke von Linien (Polygon, Rechteck, Kreis, Ellipse), Marker, Gitternetz, Achsen, Tics und Rahmen eingestellt. Für ein Beispiel, wie verschiedene Strichdicken aussehen, siehe JSG Test: LineWidth.

Die aktuell eingestellte Strichdicke kann aus dem Property LineWidth ausgelesen werden. Es können dank Anti-Aliasing auch Strichdicken mit Bruchteilen von Pixel-Breiten (z.B. 1.5 Pixel) gezeichnet werden. Eine Strichdicke von 0 zeichnet eine Linie mit genau 1 Pixel Breite, egal welche Skalierung der Viewport oder der Browser hat. Dieser Wert ist sinnvoll als Rahmenbreite für Flächen, wenn mehrere Flächen ohne Zwischenraum genau aneinander gefügt werden sollen.

Hinweis: Das Attribut LineWidth gilt nicht nur für Linien (Polygon, Rechteck, Kreis, Ellipse), sondern auch für Marker, Gitternetz, Achsen, Tics und Rahmen. Die Strichdicke kann auch mit einer der Funktionen SetLineAttr(), SetMarkerAttr() oder SetAreaAttr() gesetzt werden.

JsGraph.SetTextClass()

JsGraph.SetTextClass( Class, ClearAttr )

Class: String
Klassenname, welcher dem Text zugewiesen wird.
ClearAttr: Boolean; Optional; Default = false
true → alle individuellen Text-Attribute mit ClearTextAttr() löschen.

Mit SetTextClass kann Texten eine CSS-Klasse zugewiesen werden, welche das Aussehen des Textes beeinflusst. Einzelne Styles der Klasse können durch die Einzel-Attribut Funktionen überschrieben werden. Um alle Einzel-Attribute zu löschen, kann die Funktion ClearTextAttr() gerufen werden. Undefinierte Styles werden von übergeordneten Elementen geerbt.

Wenn Class = '' gesetzt wird (Standardwert), erhalten die nachfolgend erzeugten Texte keine Klasse zugewiesen.

Die aktuelle Text-Klasse kann im Property TextClass abgerufen werden.

JsGraph.SetTextFont()

JsGraph.SetTextFont( Font )

Font: String
Fontspezifikation, wie sie in CSS möglich sind.

Mit SetTextFont kann die Schriftart gewählt werden. Es können mehrere Schriftarten durch Komma voneinander getrennt angegeben werden. Es wird von links beginnend auf dem System nach der ersten vorhandenen Schriftart gesucht. Ist keine der gewünschten Schriftarten im System vorhanden, wird eine automatisch eine möglichst ähnliche vorhandene Schriftart verwendet.

Wennn Font = '' gesetzt wird, kann die Schriftart mit TextClass festgelegt werden oder sie wird von übergeordneten Elementen geerbt.

Beispiel

jsg.SetTextFont( 'Courier New,Courier,monospace' );

Der Aktuell gesetzte Font kann im Property TextFont abgerufen werden. Der Textfont kann auch mit der Funktion SetTextAttr() gesetzt werden.

JsGraph.SetTextSize()

JsGraph.SetTextSize( Size )

Size: Number(>=0); Optional; Default = 15
Textgrösse in Pixel. Empfohlene Minimalgrösse 7 Pixel. Es es sind auch Grössen wie 12.5 erlaubt.

Mit SetTextSize kann die Schriftgrösse in Pixel festgelegt werden. Wenn Size = 0 gesetzt wird, kann bei TextRendering = 'canvas' die Textgrösse in der Klasse TextClass definiert werden oder der Text erbt die Grösse von übergeordneten Elementen.

Die aktuell eingestellte Textgrösse kann im Property TextSize ausgelesen werden. Size wird intern mit ScalePix() skaliert, wenn AutoScalePix true ist. Der Wert von TextSize entspricht jedoch immer dem mit SetTextSize() eingestellten Wert.

Die Textgrösse kann auch mit der Funktion SetTextAttr() gesetzt werden.

JsGraph.SetTextRotation()

JsGraph.SetTextRotation( Rot )

Rot: Number; Optional; Default = 0
Rotationswinkel bezüglich der X-Achse in Grad oder Radian

Rotation des Textes in Grad oder Radian (siehe SetAngleMeasure(). Positive Werte rotieren immer im Uhrzeigersinn, unabhängig von der aktuelle gewählten Transformation (siehe SelectTrans()).

Solange keine Objekt-Transformation definiert ist, rotiert der Text immer unverzerrt, selbst wenn im Bild für die X- und Y-Achsen verschiedene Skalierungen definiert sind.

Die Text Rotation wird im Peroperty TextRotation gespeichert.

Ein den Text umschliessendes Rechteck kann mit der Funktion TextBox() gezeichnet werden.

Hinweis: Es können nur Texte rotiert werden, welche im TextRendering = 'canvas' gezeichnet werden.

JsGraph.SetTextColor()

JsGraph.SetTextColor( Color )

Color: String or JsgColor
Format siehe Farben

Mit SetTextColor wird die Farbe für Text eingestellt. Wenn Color = '' gesetzt wird, kann die Textfarbe mit TextClass eingestellt werden oder sie wird von übergeordneten Elementen geerbt.

Die aktuell eingestellte Farbe kann aus dem Property TextColor ausgelesen werden. Die Farbe kann auch mit der Funktion SetTextAttr() gesetzt werden.

JsGraph.SetLineHeight()

JsGraph.SetLineHeight( Height )

Height: Number(>=0); Optional; Default = 0
Textgrösse als Zahl in Pixel oder 0 für Standardwert 100%.

Mit SetLineHeight kann die Zeilenhöhe und damit der Zeilenabstand von mehrzeiligem Text festgelegt werden. Wenn Height = 0 ist, wird eine Zeilenhöhe von 100% eingestellt. Wenn Height = -1 ist, kann die Zeilenhöhe mit TextClass eingestellt werden oder wird von übergeordneten Elementen übernommen.

Der aktuell eingestellte Zeilenabstand kann im Property LineHeight ausgelesen werden. Height wird intern mit ScalePix() skaliert, wenn AutoScalePix true ist. Der Wert von LineHeight entspricht jedoch immer dem mit SetLineHeight() eingestellten Wert.

JsGraph.SetFontStyle()

JsGraph.SetFontStyle( Style )

Style: String; Optional; Default = 'normal'
Gültige Werte: '', 'normal' oder 'italic'.

Mit SetFontStyle kann der Schriftstil 'normal' oder 'italic' (Schrägschrift) festgelegt werden. Wenn Style = '' gesetzt wird, kann der Schriftstil (fontStyle-Property) mit TextClass festgelegt werden oder es wird die Einstellung des übergeordneten Elementes geerbt.

Der aktuell eingestellte Stil kann im Property FontStyle ausgelesen werden. Der Schriftstil kann auch mit der Funktion SetTextAttr() gesetzt werden. Die Schriftdicke (Fett) kann mit der Funktion SetFontWeight() gesetzt werden.

JsGraph.SetFontWeight()

JsGraph.SetFontWeight( Weight )

Weight: String; Optional; Default = 'normal'
Gültige Werte: '', 'normal' oder 'bold'.

Mit SetFontWeight kann die Schriftdicke 'normal' oder 'bold' (Fettschrift) festgelegt werden. Wenn Weight = '' gesetzt wird, kann die Schriftdicke (fontWeight-Property) mit TextClass festgelegt werden oder es wird die Einstellunug des übergeordneten Elementes geerbt.

Die aktuell eingestellte Schriftdicke kann im Property FontWeight ausgelesen werden. Die Schriftdicke kann auch mit der Funktion SetTextAttr() gesetzt werden. Der Schriftstil (Schrägschrift) kann mit der Funktion SetFontStyle() gesetzt werden.

JsGraph.SetFontAttr()

JsGraph.SetFontAttr( Attr )

Attr: String; Optional; Default = ''
'ib...' = style und bold

Mit SetFontAttr kann die Schriftdicke 'normal' oder 'bold' (Fettschrift) und der Schiftstyle 'normal' oder 'italic' in einem String festgelegt werden. Wenn im String Attr der Buchtatbe i enthalten ist, wird style = 'italic' festgelegt, sonst 'normal'. Wenn im String Attr der Buchtatbe b enthalten ist, wird weight = 'bold' festgelegt, sonst 'normal'. Die beiden Attribute können auch kombiniert werden.

JsGraph.SetTextAlign()

JsGraph.SetTextAlign( HAlign, VAlign )

HAlign: String
Horizontale Ausrichtung: 'left', 'center', 'right' oder 'justify'.
VAlign: String; Optional
Vertikale Ausrichtung: 'top', 'middle' oder 'bottom'.

Mit SetTextAlign kann die Ausrichtung des Textes bezüglich des Text-Referenzpunktes festgelegt werden. Der Text-Referenzpunkt ist der Punkt, der beim Zeichnen des Textes der Zeichenfunktion übergeben wird, um die Position des Textes festzulegen. Diese Funktion ist eine Kombination der Funktionen SetTextHAlign() und SetTextVAlign().

Die aktuell eingestellten Ausrichtungen können in den Properties TextHAlign und TextVAlign ausgelesen werden. Die Ausrichtung kann auch mit den Funktionen SetTextAttr(), SetTextHAlign() und SetTextVAlign() gesetzt werden.

JsGraph.SetTextAlignS()

JsGraph.SetTextAlign( Align )

Align: String
Ausrichtung: 'NSEWC'

Mit SetTextAlignS kann die Ausrichtung des Textes bezüglich des Text-Referenzpunktes festgelegt werden. Der Text-Referenzpunkt ist der Punkt, der beim Zeichnen des Textes der Zeichenfunktion übergeben wird, um die Position des Textes festzulegen. Diese Funktion ist eine Kombination der Funktionen SetTextHAlign() und SetTextVAlign().

Die aktuell eingestellten Ausrichtungen können in den Properties TextHAlign und TextVAlign ausgelesen werden. Die Ausrichtung kann auch mit den Funktionen SetTextAttr(), SetTextHAlign() und SetTextVAlign() gesetzt werden. Vergleiche auch mit SetTextAlign() für mehr Informationen.

Dies ist eine simplere Version der Funktion SetTextAlign(), da hier mehrere Attribute in einem String festgelegt werden können: Attr = 'NSWEC'

  • N: align top
  • S: align bottom
  • W: align left
  • E: align right
  • C: align center (optional, default wenn kein NSWE angegeben wird)

Die Ausrichtungen NS und WE können kombiniert werden. So ist zum Beisiel 'NW' = 'top left'. Wird keine Ausrichtung angegeben, so wird 'C' = 'center middle' eingestellt. Achtung, die Funktion setzt style, weigth und alignment auf jeden fall, selbst wenn nichts angegeben wird.

JsGraph.SetTextHAlign()

JsGraph.SetTextHAlign( HAlign )

HAlign: String
Horizontale Ausrichtung: 'left', 'center', 'right' oder 'justify'.

Mit SetTextHAlign kann die horizontale Ausrichtung des Textes bezüglich des Text-Referenzpunktes festgelegt werden. Der Text-Referenzpunkt ist der Punkt, der beim Zeichnen des Textes der Zeichenfunktion übergeben wird, um die Position des Textes festzulegen.

Die aktuell eingestellte Ausrichtung kann im Property TextHAlign ausgelesen werden. Die horizontale Ausrichtung kann auch mit den Funktionen SetTextAttr() und SetTextAlign() gesetzt werden.

JsGraph.SetTextVAlign()

JsGraph.SetTextVAlign( VAlign )

VAlign: String
Vertikale Ausrichtung 'top', 'middle' oder 'bottom'.

Mit SetTextVAlign kann die vertikale Ausrichtung des Textes bezüglich des Text-Referenzpunktes festgelegt werden. Der Text-Referenzpunkt ist der Punkt, der beim Zeichnen des Textes der Zeichenfunktion übergeben wird, um die Position des Textes festzulegen.

Die aktuell eingestellte Ausrichtung kann im Property TextVAlign ausgelesen werden. Die vertikale Ausrichtung kann auch mit den Funktionen SetTextAttr() und SetTextHAlign() gesetzt werden.

JsGraph.SetTextPadding()

JsGraph.SetTextPadding( HPadding, VPadding )

HPadding: Number(>=0); Optional; Default = 0
Horizontales Padding in Pixel
VPadding: Number(>=0); Optional; Default = HPadding
Vertikales Padding in Pixel

Zwischen Referenzpunkt und Text kann ein Abstand (Padding) mit dieser Funktion definiert werden. Das Padding wird wie die Textgrösse immer in Pixeln angegeben. Das Padding wirkt sich auch entsprechend auf die mit GetTextBox() erzeugte Textbox aus. GetTextSize() liefert hingegen immer nur die Grösse des Textes ohne Padding.

Das Text-Padding kann auch mit der Funktion SetTextAttr() festgelegt werden.

Die aktuell eingestellten Paddings können in den Properties TextHPad und TextVPad ausgelesen werden. Die Paddings werden intern mit ScalePix() skaliert, wenn AutoScalePix true ist. Die Werte der Properties entsprechen jedoch immer den mit SetTextPadding() eingestellten Werten.

JsGraph.SetMarkerSymbol()

JsGraph.SetMarkerSymbol( SymbolName )

SymbolName: String
Name eines existierenden Marker-Symbols (siehe Grafik rechts).

Mit SetMarkerSymbol wird festgelegt, welcher Marker mit der Funktion Marker() gezeichnet werden soll.

Das aktuell eingestellte Marker-Symbol kann im Property MarkerSymbol ausgelesen werden. Das Marker-Symbol kann auch mit der Funktion SetMarkerAttr() gesetzt werden.

 Weitere Informationen und eine Liste aller Marker-Symbole

JsGraph.SetMarkerSize()

JsGraph.SetMarkerSize( Size )

Size: Number(>=0)
Markergrösse in Pixel. Der Marker wird aus Symmetriegründen effektiv um 1 Pixel grösser gezeichnet.

Mit SetMarkerSize kann die Grösse der Marker in Pixel festgelegt werden.

Die aktuell eingestellte Markergrösse kann im Property MarkerSize ausgelesen werden. Die Markergrösse kann auch mit der Funktion SetMarkerAttr() gesetzt werden.

Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Freitag, 6. September 2019
von wabis