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 letztere 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.

JsGraph.ResetAttrs()

JsGraph.ResetAttrs( )

Setzt alle Attribute auf ihre Standardwerte zurück. Diese Funktion wird unter anderem von Reset() gerufen.

Siehe JsgAttrs für die Liste der betroffenen Attribute.

JsGraph.CreateLinearGradient()

JsGraph.CreateLinearGradient( GradDef )

GradDef: JsgLinearGradientDef

Beschreibung des linearen Gradienten

Return: JsgGradient

return.Type = 'linear'

JsgLinearGradientDef

}

}

Das erzeugte JsgGradient Objekt kann mit SetBgColor() aktiviert werden. Bei den Funktionen SetAreaAttr() und SetMarkerAttr() kann an Stelle der Hintergrundfarbe auch ein Gradient-Objekt übergeben werden.

Anwendung siehe JSG Test: Linear Gradient.

JsGraph.SetLinearGradientGeom()

JsGraph.SetLinearGradientGeom( LinGrad, Geom )

LinGrad: JsgGradient

Ein mit CreateLinearGradient() erzeugter Farbverlauf (LinGrad.Type = 'linear')

}

Ändert die Geometrie eines bestehenden Linearen Gradienten. Wenn dieser Gradient aktiv ist, also dem Property BgGradient zugewiesen ist, wird sich diese Änderung unmittelbar auf die folgenden Zeichenfunktionen auswirken.

Um die Farben eines Gradienten zu ändern, muss ein neuer Gradient mit CreateLinearGradient() erzeugt und mit SetBgColor() aktiviert werden.

JsGraph.CreateRadialGradient()

JsGraph.CreateRadialGradient( GradDef )

GradDef: JsgRadialGradientDef

Beschreibung des radialen Gradienten

Return: JsgGradient

return.Type = 'radial'

JsgRadialGradientDef

}

}

Forderung: R2 muss so gross gewählt werden, dass der Kreis (X1, Y1, R1) innerhalb des Kreises (X2, Y2, R2) liegt!

Die Radien werden in mit SelectTrans() gewählten X-Koordinaten interpretiert. Wenn die Y-Skalierung nicht gleich der X-Skalierung ist, wird trotzdem ein kreisförmiger Gradient gezeichnet. Der Gradient kann nicht in eine Ellipsen-Form verzerrt werden.

Das erzeugte JsgGradient Objekt kann mit SetBgColor() aktiviert werden. Bei den Funktionen SetAreaAttr() und SetMarkerAttr() kann an Stelle der Hintergrundfarbe auch ein Gradient-Objekt übergeben werden.

Anwendung siehe JSG Test: Radial Gradient.

JsGraph.SetRadialGradientGeom()

JsGraph.SetRadialGradientGeom( RadGrad, Geom )

RadGrad: JsgGradient

Ein mit CreateRadialGradient() erzeugter Farbverlauf (RadGrad.Type = 'radial')

}

Wird eine Koordinate nicht definiert, so bleibt die entsprechende Koordinate von RadGrad unverändert.

Forderung: R2 muss so gross gewählt werden, dass der Kreis (X1, Y1, R1) innerhalb des Kreises (X2, Y2, R2) liegt!

Ändert die Geometrie eines bestehenden Radialen Gradienten. Wenn dieser Gradient aktiv ist, also dem Property BgGradient zugewiesen ist, wird sich diese Änderung unmittelbar auf die folgenden Zeichenfunktionen auswirken.

Um die Farben eines Gradienten zu ändern, muss ein neuer Gradient mit CreateRadialGradient() erzeugt und mit SetBgColor() aktiviert werden.

JsGraph.AddMarkerDef()

JsGraph.AddMarkerDef( aName, aMarkerDef )

aName: String

Name des Marker Symbols

aMarkerDef: Object

Geometrie des Marker Symbols

Definiert ein neues Marker Symbol. Dieses kann mit SetMarkerAttr() oder SetMarkerSymbol() ausgewählt werden und mit Marker() gezeichnet werden.

Wenn ein Marker Symbol mit demselben Namen bereits existiert, wird das bisherige Symbol ersetzt durch dan neue Symbol.

Marker Definition:

aMarkerDef = [ <MarkerElement>, ... ]

MarkerElement = {
  type: 'Line' | 'Polygon' | 'Circle',
  <type Geometry>
}

Line Geometry = x1, y1, x2, y2
Polygon Geometry = [ x, y, .... ]
Circle Geometry = x, y, r

Beschränke die Geometrie so, dass die Geometrie Definition innerhalb eines Quadrats mit Ausdehnung 1x1 liegt, damit die Marker Skalierung wie erwartet funktioniert.

Beispiel:

// Flight Path Vector Symbol

g.AddMarkerDef( 'FPSymbol',
  [ 
    { type: 'Circle', x: 0, y: 0, r: -0.5 },
    { type: 'Line', x1: -1.5, y1:    0, x2: -0.5, y2:    0 },
    { type: 'Line', x1:  1.5, y1:    0, x2:  0.5, y2:    0 },
    { type: 'Line', x1:    0, y1: -0.5, x2:    0, y2: -1.0 }
  ]
);

// Aircraft Symbol

g.AddMarkerDef( 'Aircraft', 
  [
    { type: 'Line', x1: -0.5, y1: 0, x2: 1, y2: 0 },
    { type: 'Polygon', x: [ -0, 0.5, 0 ], y: [ -1, 0, 1 ] },
    { type: 'Polygon', x: [ -0.75, -0.5, -0.75 ], y: [ -0.5, 0, 0.5 ] },
  ]
);

JsGraph.SetAlpha()

JsGraph.SetAlpha( Alpha )

Alpha: Number(0..1); Init = 1

Globale Transparenz für alle Grafikelemente. 0 → unsichtbar, 1 → undurchsichtig.

Mit SetAlpha kann die globale Transparenz für alle nachfolgend gezeichneten Grafikelemente (mit Ausnahme von Text) eingestellt werden. Transparenten Text kann man erzeugen, indem man mit SetColor() eine transparente Farbe definiert. Es kann auch bei SetBgColor() eine Transparenz angegeben werden. Die so definierte Transparenz wird mit der globalen Transparenz multipliziert (ausser bei Texten).

g.SetColor( 'rgba(0, 0, 0, 0.5)' );
g.Text( 'Transparenter Text', x, y );

Die aktuelle globale Transparenz kann mit dem Property Alpha ausgelesen werden.

JsGraph.SetLineJoin()

JsGraph.SetLineJoin( Join )

Join: String, Init = 'round'

Gibt vor, wie zwei Liniensegmente eines dicken Polygons grafisch aneinander gezeichnet werden sollen. Gültige Werte sind: 'miter', 'round', 'bevel'

Wenn zwei Liniensegmente eines Polygons unter einem grösseren Winkel zusammen treffen und die LineWidth grösser als 1 ist, so kann der Übergang von einer Linie zur nächsten mit SetLineJoin eingestellt werden. Die Aktuelle Einstellung kann über das Property LineJoin abgefragt werden.

JsGraph.SetLineCap()

JsGraph.SetLineCap( Cap )

Cap: String; Init = 'butt'

Gibt vor, wie die Enden von dicken Linien gezeichnet werden sollen. Gültige Werte sind: 'butt', 'round', 'square'

Bei Linien mit LineWidth grösser als 1 kann die grafische Darstellung der Linienenden mit SetLineCap eingestellt werden. Die aktuelle Einstellung kann über das Property LineCap abgefragt werden.

JsGraph.SetLineAttr()

JsGraph.SetLineAttr( Color, LineWidth )

Color: String or JsgColor; Optional

Zeichenfarbe für Linien, Rahmen, Gitter, Achsen, Text und Marker (Format siehe Farben).

LineWidth: Number(>=0); Optional

Strichdicke in Pixel. Dicke 0 und 1 sind identisch.

Mit SetLineAttr werden die Linien-Eigenschaften Farbe und Strichdicke eingestellt. SetLineAttr ist eine Kombination der Funktionen SetColor() und SetLineWidth().

Die aktuell eingestellten Werte können in den Properties Color und LineWidth ausgelesen werden.

Hinweis: Das Attribut Color gilt nicht nur für Linien, sondern auch für alle anderen grafischen Elemente ausser Texten!

JsGraph.SetAreaAttr()

JsGraph.SetAreaAttr( BgColor, Color, LineWidth )

BgColor: String or JsgColor or JsgGradient; Optional

BgColor steht für BackgroundColor. Füllfarbe für alle Arten von Flächen (Format siehe Farben). Statt einer Farbe kann auch ein Farbverlauf JsgGradient übergeben werden (siehe CreateLinearGradient()).

Color: String or JsgColor; Optional

Zeichenfarbe für Linien, Rahmen, Gitter, Achsen, Text und Marker (Format siehe Farben).

LineWidth: Number(>=0); Optional

Strichdicke in Pixel. Dicke 0 und 1 sind identisch.

SetAreaAttr setzt alle Eigenschaften, welche sich auf das Zeichnen von Flächen oder Marker auswirken: Flächen-Farbe, Rahmen-Farbe, Rahmen-Strichdicke. SetAreaAttr ist eine Kombination der Funktionen SetColor(), SetBgColor() und SetLineWidth().

Viele Grafikelemente wie Rechteck, Kreis, Ellipse, Polygon und 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. Color und LineWidth bestimmen das Aussehen des Randes, wenn er gezeichnet werden soll.

Die aktuell eingestellten Eigenschaften können in den Properties Color, BgColor und LineWidth ausgelesen werden.

JsGraph.SetMarkerAttr()

JsGraph.SetMarkerAttr( MarkerSymbol, MarkerSize, Color, BgColor, LineWidth )

MarkerSymbol: String; Optional

Name eines Marker-Symbols (siehe Grafik).

MarkerSize: Number(>=0); Optional

Grösse des Markers in Pixel. Der Marker wird aus Symmetriegründen effektiv um 1 Pixel grösser gezeichnet.

Color: String or JsgColor; Optional

Zeichenfarbe für Linien, Rahmen, Gitter, Achsen, Text und Marker (Format siehe Farben).

BgColor: String or JsgColor or JsgGradient; Optional

BgColor steht für BackgroundColor. Füllfarbe für alle Arten von Flächen, hier also von füllbaren Markern (Format siehe Farben). Statt einer Farbe kann auch ein Farbverlauf JsgGradient übergeben werden (siehe CreateLinearGradient()).

LineWidth: Number(>=0); Optional

Strichdicke in Pixel. Dicke 0 und 1 sind identisch.

SetMarkerAttr setzt alle Eigenschaften, welche sich auf das Zeichnen von Markern auswirken: Markersymbol, Markergrösse, Markerfarben und Strichdicke. SetMarkerAttr ist eine Kombination der Funktionen SetMarkerSymbol(), SetMarkerSize() und SetAreaAttr().

Einige Marker können auf drei Arten gezeichnet werden: Nur als Linien, nur als Flächen oder beides. BgColor definiert die Füllfarbe für diese Marker. Color und LineWidth bestimmen das Aussehen des Randes, wenn er gezeichnet werden soll, oder das Aussehen der Marker, die nicht gefüllt werden können.

Die aktuell eingestellten Eigenschaften können in den Properties MarkerSymbol, MarkerSize, Color, BgColor und LineWidth ausgelesen werden.

Es gibt eine Tabelle aller zur Verfügung stehender Marker-Symbole. Diese Tabelle ist nützlich, wenn man per Script durch alle Marker-Symbole iterieren möchte (siehe Beispiel). Die Tabelle kann mit AddMarkerDef() um weitere Symbole ergänzt werden.

Auf die Tabelle kann wiefolgt zugegriffen werden:

jsg.SetMarkerSymbol( jsg.MarkerName[i] );

Beispiel

Die Grafik mit allen Marker-Symbolen und deren Namen wurde mit folgendem JavaScript generiert:

var jsg = NewGraph2D( { Width: 200, Height: 300 } );
var nMarkers = jsg.MarkerName.length;
jsg.SetWindow( 0, nMarkers+1, 10, 0 ); 
// hellgraue Referenzlinien zeichnen
jsg.SetLineAttr( '#CCC', 1 );
jsg.Line( 2, 0, 2, nMarkers+1 );
jsg.Line( 3, 0, 3, nMarkers+1 );
for (var i = 0; i < nMarkers; i++) {
  jsg.Line( 1, i+1, 4, i+1 );
}
// Marker zeichnen und beschriften
jsg.SetTextAttrS( 'Arial', 15, 'black', 'E' );
for (var i = 0; i < nMarkers; i++) {
  jsg.SetMarkerAttr( jsg.MarkerName[i], 8, 'black', 'yellow', 1 );
  jsg.Marker( 2, i+1 );
  jsg.SetMarkerAttr( jsg.MarkerName[i], 10, 'black', 'yellow', 2 );
  jsg.Marker( 3, i+1 );
  jsg.Text( jsg.MarkerName[i], 5, i+1 );
}

JsGraph.ClearTextAttr()

JsGraph.ClearTextAttr( )

Löscht alle individuellen Text-Attribute (Font, Farbe, Grösse, usw.). Die Attribute können dadurch mit SetTextClass() definiert werden. Alle nicht definierten Attribute werden von übergeordneten Elementen geerbt.

Hinweis: Diese Funktion kann auch implizit über die Funktion SetTextClass() gerufen werden.

JsGraph.SetTextAttr()

JsGraph.SetTextAttr( Font, Size, Color, Weight, Style, HAlign, VAlign, HPad, VPad, Rot )

Font: String; Optional

Als Font kann der Name eines oder mehrer Fonts angegeben werden, so wie es in HTML möglich ist. Wenn mehrere Fonts mit Komma getrennt angegeben werden, wird der erste Font genommen, der im System installiert ist. Wird keiner der Fonts im System gefunden, wird ein im System vorhandener Font gewählt. Mit Font = '' kann der Font durch TextClass eingestellt werden.

Size: Number(>0); Optional

Textgrösse in Pixel. Mit Size = 0 kann die Textgrösse durch TextClass eingestellt werden.

Color: String or JsgColor; Optional

Zeichenfarbe für Text (Format siehe Farben). Mit Color = '' kann die Textfarbe durch TextClass eingestellt werden.

Weight: String; Optional

einer der Werte: '', 'normal' oder 'bold'. Mit Weight = '' kann die Fettschrift durch TextClass eingestellt werden.

Style: String; Optional

einer der Werte: '', 'normal' oder 'italic'. Mit Style = '' kann die Schrägschrift durch TextClass eingestellt werden.

HAlign: String; Optional

Horizontale Ausrichtung bezüglich der bei der Funktion Text() angegebenen Position. Mögliche Werte sind: 'left', 'center' und 'right'.

VAlign: String; Optional

Vertikale Ausrichtung bezüglich der bei der Funktion Text() angegebenen Position. Mögliche Werte sind: 'top', 'middle', 'bottom'.

HPad: Number(>=0); Optional

Horizontales Padding

VPad: Number(>=0); Optional; Default = HPad

Horizontales Padding

Rot: Numver; Optional; Default = 0

Rotationswinkel des Textes bez. X-Achse: > 0 für Uhrzeigersinn

SetTextAttr setzt alle Eigenschaften, welche sich auf das Zeichnen von Text auswirken: Schriftart, Grösse, Stil, Farbe, Ausrichtung, Padding. SetTextAttr ist eine Kombination der Funktionen SetTextFont(), SetTextSize(), SetFontStyle(), SetTextColor(), SetTextAlign(), SetTextPadding() und SetTextRotation().

Mit der Funktion ClearTextAttr() können alle Text-Attribute auf jene Werte gesetzt werden, welche das Definieren der entsprechenden Attribute mit TextClass erlauben.

Die horizontale Ausrichtung des Textes bezieht sich sowohl auf den Bezugspunkt der Positionierung, als auch auf die Ausrichtung innerhalb der Textbox. Die Ausrichtung innerhalb der Textbox wird jedoch erst bei mehrzeiligen Texten erkennbar. Die vertikale Ausrichtung hat nur einen Einfluss auf die Ausrichtung bezüglich dem Bezugspunkt der Positionierung. Der Text innerhalb der Textbox wird immer an der oberen Kante ausgerichtet.

Mit VPad und HPad kann der Abstand des Referenzpunktes zum Text vergrössert werden. Die Funktionen GetTextBox() und TextBox() beziehen das Padding ebenfalls in die Berechnungen ein.

Mit Rot kann der Text gedreht werden, sofern TextRendering = 'canvas' ist. Siehe SetTextRotation() für mehr Indos.

JsGraph.SetTextAttrS()

JsGraph.SetTextAttrS( Font, Size, Color, Attr, HPad, VPad, Rot )

Font: String; Optional

Als Font kann der Name eines oder mehrer Fonts angegeben werden, so wie es in HTML möglich ist. Wenn mehrere Fonts mit Komma getrennt angegeben werden, wird der erste Font genommen, der im System installiert ist. Wird keiner der Fonts im System gefunden, wird ein im System vorhandener Font gewählt. Mit Font = '' kann der Font durch TextClass eingestellt werden.

Size: Number(>0); Optional

Textgrösse in Pixel. Mit Size = 0 kann die Textgrösse durch TextClass eingestellt werden.

Color: String or JsgColor; Optional

Zeichenfarbe für Text (Format siehe Farben). Mit Color = '' kann die Textfarbe durch TextClass eingestellt werden.

Attr: String; Optional

legt style, weight und alignment fest.

HPad: Number(>=0); Optional

Horizontales Padding

VPad: Number(>=0); Optional; Default = HPad

Horizontales Padding

Rot: Numver; Optional; Default = 0

Rotationswinkel des Textes bez. X-Achse: > 0 für Uhrzeigersinn

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

• i: style italic (optional, default = normal)
• b: weight bold (optional, default = normal)
• 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.

SetTextAttrS setzt alle Eigenschaften, welche sich auf das Zeichnen von Text auswirken: Schriftart, Grösse, Stil, Farbe, Ausrichtung, Padding. SetTextAttrS ist eine Kombination der Funktionen SetTextFont(), SetTextSize(), SetFontStyle(), SetTextColor(), SetTextAlignS(), SetTextPadding() und SetTextRotation().

Mit der Funktion ClearTextAttr() können alle Text-Attribute auf jene Werte gesetzt werden, welche das Definieren der entsprechenden Attribute mit TextClass erlauben.

Für mehr Informationen siehe auch SetTextAttr().

JsGraph.SaveAttrs()

JsGraph.SaveAttrs( )

SaveAttrs speichert alle aktuellen Attribut-Einstellungen in einem internen Zwischenspeicher. Mit der Funktion RestoreAttrs() können sie von diesem Zwischenspeicher wieder hergestellt werden.

Siehe JsgAttrs für die Liste der betroffenen Attribute.

JsGraph.RestoreAttrs()

JsGraph.RestoreAttrs( )

RestoreAttrs setzte alle Attribute auf den Stand zurück, wie sie beim letzten Aufruf von SaveAttrs() waren bzw. auf den Initialzustand, wenn SaveAttrs() noch nicht aufgerufen wurde.

Siehe JsgAttrs für die Liste der betroffenen Attribute.

JsGraph.GetAttrs()

JsGraph.GetAttrs( )

Return: JsgAttrs

GetAttrs speichert alle aktuellen Attribut-Einstellungen in einem Objekt und gibt dieses Objekt zurück. Mit der Funktion SetAttrs() können alle Einstellungen auf die im Objekt gespeicherten Werte zurückgesetzt werden.

Siehe JsgAttrs für die Liste der betroffenen Attribute.

JsGraph.SetAttrs()

JsGraph.SetAttrs( Attrs )

Attrs: JsgAttrsDef or JsgAttrs

Objekt mit zu setzenden Attributen

JsgAttrsDef

}

SetAttrs belibige Attribute in einem einzigen Aufruf. Siehe auch GetAttrs().

Attribute, welche in Attrs nicht definiert sind, behalten ihren aktuellen Wert. Wenn Reset = true ist, werden vor dem Setzen der anderen Attribute alle Attribute auf ihre Standardwerte zurückgesetzt. Damit werden alle in Attrs nicht definierten Attribute auf ihren Standardwert gesetzt.