| AutoReset | wenn true wird die Funktion Reset() vor dem Aufruf der DrawFunc ausgeführt |
| AutoClear | wenn true wird bei AutoReset = true die Funktion Clear() vor dem Aufruf der DrawFunc ausgeführt. |
| AutoRedrawOnImgLoad | siehe DrawImage() |
| DrawFunc | Funktion, welche beim Load und Resize der Seite gerufen wird. |
| DeferedDrawFunc | Funktion, welche nach einer Verzögerung von DeferedDrawTime nach beenden der DrawFunc gerufen wird. |
| DeferedDrawTime | Zeitverzögerung zwischen dem Aufruf von DrawFunc und DeferedDrawFunc |
| BeforeResetFunc | Funktion, welche vor dem Reset() vor dem Aufruf der DrawFunc gerufen wird. |
| Trans | Aktuell verwendete Transformation ('window', 'viewport', 'canvas') |
| GraphClipEnabled | Gibt an ob das Grafik-Clipping aktiviert ist oder nicht |
| GraphClipExtend | Gibt an, wievielmal grösser der effektive Grafik-Clippbereich als der Canvas ist |
| Alpha | Globale Transparenz |
| AngleMeasure | Winkel-Einheit ('deg' oder 'rad') |
| HighResolution | Wenn true wird auf Retina-Displays in hoher Auflösung gezeichnet → SetHighResolution() |
| ScaleRef | Referenz Canvasbreite für die Funktionen wie ScalePix() |
| AutoScalePix | Bewirkt eine automatische Skalierung von Pixelwerten → ScaleRef |
| ScalePixInt | true → automatisches ScalePix() rundet auf ganze Zahlen |
| LimitScalePix | Funktionen ScalePix() usw. skalieren nur verkleinernd, nicht vergrössernd → SetScaleRef() |
| MaxCurveSegments | Maximale Anzahl Polygon-Segmente beim Erzeugen von Kreisen und Ellipsen als Polygone |
| NumBezierSegments | Anzahl Polygon-Segmente beim Erzeugen von Spline- und Bezier-Kurven |
| DisableNativeArc | Wenn true werden alle Kreise als Polygone erzeugt statt die Canvas-Arc Funktionen zu verwenden |
| DisableNativeBezier | Wenn true werden alle Spline- und Bezier-Kurven als Polygone erzeugt statt die Canvas BezierCurve Funktionen zu verwenden |
| MinLineWidth | Minimale Strichdicke bei automatischem ScalePix() |
| MinTextSize | Minimale Textgrösse bei automatischem ScalePix() |
| MinMarkerSize | Minimale Grösse der Markersymbole bei automatischem ScalePix() |
| PenDown | Status des Pen bei der Funktion MoveTo() |
| LastX, LastY | Letzte Position des Pen |
| Poly | JsgPolygon, welches von den Funktionen NewPoly(), AddPointToPoly(), DrawPoly() usw. verwendet wird. |
| WorkPoly, WorkPoly2 | Interne JsgPolygon für erzeugte Polygone einiger Funktionen |
| WorkRect | Internes JsgRect für das Speichern von berechneten Text-Boxen |
JsGraph.AutoReset: Boolean; Init = true
Wenn AutoReset true ist, wird vor dem Aufruf der DrawFunc die Funktion Reset() gerufen, um den Canvas und alle JsGraph-Attribute auf den Ursprungszustand zurückzusetzen. AutoReset kann beim Erzeugen eines JsGraph Objektes gesetzt werden.
JsGraph.AutoClear: Boolean; Init = true
Wenn AutoClear und AutoReset true sind, werden vor dem Aufruf der DrawFunc die Funktionen Reset() und Clear() in dieser Reihenfolge aufgerufen. AutoClear kann beim Erzeugen eines JsGraph Objektes gesetzt werden.
Hinweis: Wenn AutoReset false gesetzt wird, wird AutoClear ignoriert.
Anwendung: Beim Verwenden von MakeSnapshot() und DrawSnapshot() ist ein automatisches Löschen des Canvas mit Clear() nicht immer notwendig, da DrawSnapshot() den Canvas standardmässig überschreibt.
JsGraph.AutoRedrawOnImgLoad: Boolean; Init = true
Wenn ein Bild beim Aufruf von DrawImage() noch nicht geladen ist, wird standardmässig automatisch Redraw() aufgerufen, sobald das Bild geladen ist. Dies kann unterdrückt werden, indem AutoRedrawOnImgLoad = false gesetzt wird.
Für weitere Information siehe DrawImage().
JsGraph.DrawFunc: Function; Init = null
Eine installierte DrawFunc wird gerufen, sobald die Seite geladen ist, wenn die Grösse oder das Layout der Seite verändert wurde oder wenn Redraw() aufgerufen wird. Wenn AutoReset true ist, wird zuvor die Funktion Reset() und wenn AutoClear ebenfalls true ist (Standard) wird zusätzlich die Funktion Clear() aufgerufen. Vor dem Aufruf von Reset() wird eine allenfalls installierte BeforeResetFunc gerufen.
Die DrawFunc kann mit SetDrawFunc() oder beim Erzeugen eines JsGraph Objektes definiert werden.
JsGraph.DeferedDrawFunc: Function; Init = null
Eine installierte DeferedDrawFunc wird nach einer Verzögerung von DeferedDrawTime nach dem Aufruf der Funktion DrawFunc gerufen (siehe Redraw()).
Die DeferedDrawFunc kann mit SetDeferedDrawFunc() oder beim Erzeugen eines JsGraph Objektes definiert werden.
JsGraph.DeferedDrawTime: Integer(>0); Init = 50
Eine installierte DeferedDrawFunc wird nach einer Verzögerung von DeferedDrawTime nach dem Aufruf der Funktion DrawFunc gerufen (siehe Redraw()).
Die DeferedDrawTime kann beim Erzeugen eines JsGraph Objektes definiert werden.
JsGraph.BeforeResetFunc: Function; Init = null
Eine intallierte BeforeResetFunc wird gerufen, bevor eine installierte DrawFunc gerufen wird und bevor davor die Funktion Reset() implizit gerufen wird.
Die BeforeResetFunc kann mit SetBeforeResetFunc() oder beim Erzeugen eines JsGraph Objektes definiert werden.
JsGraph.GraphClipEnabled: Boolean; ReadOnly; Init = false
Gibt an, ob das Grafik-Clipping aktiviert ist oder nicht. Das Grafik-Clipping kann mit SetGraphClipping() aktiviert oder deaktiviert werden.
Grafik wird immer spätestens am Rand des Canvas geclippt. Man kann aber auch andere Clippbereiche mit SetClipping() oder Clip() wählen. Bei all diesen Clipp-Verfahren wird das Clipping des Browsers verwendet. Wenn Grafik generiert wird, die weit über den Clippbereich hinaus geht, wird diese Art Clipping extrem langsam. In diesem Fall hilft das definieren eines Grafik-Clippings.
Bei aktiviertem Grafik-Clipping werden alle Grafik-Elemente am definierten Rechteckbereich geometrisch geclippt, bevor sie dem Browser zur Rasterung übergeben werden.
Das GrahClipping wird mit der Funktion SetGraphClipping() ein und ausgeschaltet.
JsGraph.GraphClipExtend: Number; ReadOnly; Init = 1
Bei aktiviertem Grafik-Clipping wird der interne Clip-Bereich um diesen Faktor bezüglich der Canvas-Grösse vergrössert. Dadurch werden kleinere Elemente, die den Clippbereich überragen vom Browser geclippt, ohne dass das Grafik-Clipping angewandt wird. Dieser Faktor sollte jedoch nicht zu gross gewählt werden, da das Browser-Clipping bei weit überragender Grafik sehr langsam werden kann. Ich empfehle einen Faktor von ca. 0,01.
Der GrahClippingExtendFactor wird mit der Funktion SetGraphClipping() gesetzt.
JsGraph.Trans: String; ReadOnly; Init = 'window'
Aktuell verwendete Transformation, 'window', 'viewport' oder 'canvas'.
Die Koordinaten bei den Zeichenfunktionen beziehen sich auf ein bestimmtes Koordinatensystem. Mit dem Property Trans kann ausgelesen werden, welches Koordinatensystem bzw. welche Transformation verwendet wird. Eine der Transformationen kann mit der Funktion SelectTrans() ausgewählt werden.
JsGraph.Alpha: Number(0..1); ReadOnly; Init = 1; → 0: unsichtbar, 1: undurchsichtig
Globale Transparenz für alle Grafikelemente.
Es kann auch bei Color und BgColor eine Transparenz angegeben werden. Die dort angegebene Transparenz wird mit der globalen Transparenz multipliziert. Die globale Transparenz kann mit der Funktion SetAlpha() gesetzt werden.
JsGraph.AngleMeasure: String; ReadOnly; Init = 'deg'; → 'deg' oder 'rad'
Aktuell verwendete Winkel-Einheit, 'deg' oder 'rad'.
Bei den Kreis- und Ellipsenfunktionen werden Winkel in Grad oder Radians akzeptiert. Mit dem Property AngleMeasure kann ausgelesen werden, welche Winkel-Einheit momentan verwendet wird. Mit der Funktion SetAngleMeasure() kann die Winkel-Einheit eingestellt werden.
JsGraph.HighResolution: Boolean; ReadOnly; Init = true; → SetHighResolution()
Gibt an, ob auf Retina-Displays mit der vollen Auflösung gezeichnet werden soll oder ob ein JSG-Pixel mehrere Bildschirm-Pixel gross sein soll.
Sogenannte Retina-Displays haben eine so hohe Pixeldichte, dass die 1:1 Darstellung von Website-Inhalten viel zu klein ausfallen würde. Daher werden pro Inhalt-Pixel mehrere Display-Pixel verwendet. Die Website wird also quasi z.B. doppelt so gross gezeichnet, als sie definiert ist. Texte und andere HTML-Elemente werden jedoch in der vollen Display-Auflösung gerendert, wodurch sie schärfer erscheinen.
Mit HighResolution kann eingestellt werden, ob auch das JSG-Modul die volle Auflösung des Displays nutzen soll und entsprechend scharfe Grafiken ausgeben soll. Dies braucht jedoch ein mehrfaches an Resourcen und kann bei dynamischen Inhalten besonders auf mobilen Geräten zu langsamen Darstellungen führen. Daher lässt sich dieser Modus mit HighResolution ein- und ausschalten. Ist er ausgeschaltet, wirkt die Grafik etwas verschwommen, was bei Animationen aber nicht auffällt. Standbilder sollten in der hohen Auflösung gerendert werden.
JsGraph.ScaleRef: Number(>0); ReadOnly; Init = 800; → SetScaleRef()
Die Funktionen ScalePix(), ScalePixI(), ScalePixMax() und ScalePixMaxI() verwenden für die Skalierung von Pixelwerten die Referenzbreite ScaleRef.
Einige Grössenangaben wie TextSize und MarkerSize werden in Pixeln angegeben. Manchmal wäre es jedoch schön, wenn sich die entsprechenden Objekte zusammen mit dem Canvas skalieren, wenn dessen Grösse durch Verändern der Grösse des Browserfensters ändert. Um dies zu erreichen, kann man die Pixelwerte über eine der oben angegeben Funktionen transformieren und die transformierten Werte den Attribut-Funktionen übergeben. Für die Transformation muss eine Referenzbreite ScaleRef des Canvas definiert werden. Wenn der Canvas genau die Breite ScaleRef hat, werden die Pixelwerte nicht verändert. Ist der aktuelle Canvas jedoch z.B. nur halb so breit wie ScaleRef, so wird die Pixelgrösse halbiert.
Wenn AutoScalePix true ist, werden die Pixelwerte in den verschiedenen Funktion automatisch Skaliert.
JsGraph.AutoScalePix: Boolean; ReadOnly; Init = false; → SetScaleRef()
Wenn dieser Wert true ist, werden in den diversen SetAttribut Funktionen Pixelwerte entsprechend ScaleRef und der aktuellen Canvasgrösse transformiert.
Der Wert kann beim Erzeugen eines JsGraph Objektes mit NewGraph2D() definiert werden oder mit der Funktion SetScaleRef() jederzeit verändert werden.
JsGraph.ScalePixInt: Boolean; Init = false; → SetScaleRef()
Wenn AutoScalePix true ist, werden Pixelangaben bei Attributen intern mit Hilfe der Funktionen ScalePix() skaliert. Wenn ScalePixInt = true ist, werden die Skalierten Pixelwerte auf ganze Zahlen gerundet. Zahlen kleiner als 1 gibt es dann nicht.
Der Wert kann beim Erzeugen eines JsGraph Objektes mit NewGraph2D() definiert werden oder mit der Funktion SetScaleRef() jederzeit verändert werden.
JsGraph.LimitScalePix: Boolean; Init = true; → SetScaleRef()
Wenn AutoScalePix true ist, werden Pixelangaben intern mit Hilfe der Funktion ScalePix() mit der Grösse des Canvas skaliert. Wenn LimitScalePix = true ist, wird bei der Skalierung nie vergrössert, sondern nur verkleinert. Anwendung siehe SetScaleRef().
Der Wert kann beim Erzeugen eines JsGraph Objektes mit NewGraph2D() definiert werden oder mit der Funktion SetScaleRef() jederzeit verändert werden.
JsGraph.MaxCurveSegments: Integer; Init = 1024
Ellipsen oder transformierte oder geclippte Kreise werden intern als Polygone berechnet. Die Anzahl Segmente des Polygons wird so berechnet, dass das Polygon eine maximale Abweichung vom perfekten Kreis von 1/2 Pixel hat. Bei sehr grossen Kreisen ergibt das eine grosse Anzahl von Segmenten. Mit MaxCurveSegments kann diese Anzahl begrenzt werden.
Wenn MaxCurveSegments = 0 gestzt wird, wird die Anzahl Segmente nicht begrenzt.
MaxCurveSegments begrenzt auch die Anzahl Segmente bei der Funktion MakeEllipseArcPolygon().
JsGraph.DisableNativeArc: Boolean; Init = false
Wenn möglich werden Kreise und Kreisbogen mit der nativen Canvas-Funktion arc() gezeichnet. Verzerrte Kreise/-bögen und Ellipsen werden intern jedoch immer als Polygone gerendert. Mit DisableNativeArc = true kann erreicht werden, dass alle Kreise und Kreisbogen ebenfalls als Polygone gerendert werden.
Die Anzahl Segmente der Polygone kann auf MaxCurveSegments begrenzt werden.
JsGraph.NumBezierSegments: int; Init = 64
Bezier-Segmente, welche auch bei Splines verwendet werden, werden wenn möglich mit der nativen Canvas-Funktion bezierTo() gerendert. Werden Bezier Segmente geclippt, siehe Funktion SetGraphClipping(), werden sie als Polygone gerendert. NumBezierSehments bestimmt dann, wieviele Segmente diese Polygone haben.
Mit DisableNativeBezier = true kann erreicht werden, dass alle Beziez-Kurven als Polygone gezeichnet werden.
JsGraph.DisableNativeBezier: Boolean; Init = false
Wenn möglich werden Bezier- und Spline-Kurven mit der nativen Canvas-Funktion bezierTo() gezeichnet. Geclippte Bezier-Kurven und Splines werden intern jedoch immer als Polygone gerendert. Mit DisableNativeBezier = true kann erreicht werden, dass alle Bezier- und Spline-Kurven als Polygone gerendert werden.
Die Anzahl Segmente der Polygone kann mit NumBezierSegments eingestellt werden. Bei der Funktion MakeBezierPolygon() kann die Anzahl Segmente auch als Parameter übergeben werden.
JsGraph.MinLineWidth: Number(>0); Init = 0.01; Minimale Strickdicke bei automatischem ScalePix() → AutoScalePix
Hinweis: Diese Einstellung wird nicht gesichert und bleibt bei einem Reset(), RestoreAttrs(), ResetAttrs() erhalten. Der Wert wird auch nicht mit SaveAttrs() gesichert und wird nicht bei einem GetAttrs() gespeichert.
JsGraph.MinTextSize: Number(>0); Init = 1; Minimale Textgrösse bei automatischem ScalePix() → AutoScalePix
Hinweis: Diese Einstellung wird nicht gesichert und bleibt bei einem Reset(), RestoreAttrs(), ResetAttrs() erhalten. Der Wert wird auch nicht mit SaveAttrs() gesichert und wird nicht bei einem GetAttrs() gespeichert.
JsGraph.MinMarkerSize: Number(>0); Init = 1; Minimale Markergrösse bei automatischem ScalePix() → AutoScalePix
Hinweis: Diese Einstellung wird nicht gesichert und bleibt bei einem Reset(), RestoreAttrs(), ResetAttrs() erhalten. Der Wert wird auch nicht mit SaveAttrs() gesichert und wird nicht bei einem GetAttrs() gespeichert.
JsGraph.PenDown: Boolean; ReadOnly; Init = false
Wenn PenDown = true ist, wir beim nächsten Aufruf von LineTo() oder ArcTo() eine Linie bzw. ein Kreisbogen von der letzten Position (LastX, LastY) aus gezeichnet. Wenn PenDown = false ist, wird bei LineTo() keine Linie gezeichnet, sondern nur die Position in LastX und LastY gespeichert und PenDown = true gesetzt.
Mit der Funktion MoveTo() kann PenDown = true gesetzt werden, mit der Funktion PenUp() kann PenDown = false gesetzt werden.
JsGraph.LastX: Number; ReadOnly; Init = 0
JsGraph.LastY: Number; ReadOnly; Init = 0
Letzte Position des Pen.
Enthält die letzten mit MoveTo(), LineTo() usw. angefahrenen Koordinaten. LastX und LastY werden beim Erzeugen eines Canvas mit dem JsGraph Konstruktor zu Null initialisiert. Die Werte LastX und LastY sind bezüglich des aktuellen Koordinatensystems (siehe Property Trans).
JsGraph.Poly: JsgPolygon; ReadOnly; Init = new JsgPolygon
Dieses Polygon kann für das punktweise Erzeugen eines Polygons verwendet werden. Die folgenden Funktionen greifen auf dieses Polygon zu:
Das Polygon kann vor dem Zeichnen mit JsgPolygon.Invert() und JsgPolygon.Roll() wiefolgt manipuliert werden:
g.NewPoly();
for (x = 0; x < xmax; x += xdelta) {
var y = f( x );
g.AddPointToPoly( x, y );
}
g.Poly.Roll( n );
g.Poly.Invert();
g.DrawPoly();
JsGraph.WorkRect: JsgRect; ReadOnly; Init = new JsgRect()
Für das Speichern der berechneten Text-Boxen der folgenden Funktionen wird das WorkRect verwendet. Durch den Aufruf von Text() wird das WorkRect überschrieben.
JsGraph.WorkPoly: JsgPolygon; ReadOnly; Init = new JsgPolygon()
JsGraph.WorkPoly2: JsgPolygon; ReadOnly; Init = new JsgPolygon()
Für das Speichern der Polygone der folgenden Funktionen wird das WorkPoly verwendet. Durch den Aufruf der folgenden Zeichenfunktionen wird das WorkPoly überschrieben. Soll das Polygon der Make-Funktionen, welche das WorkPoly zurückgeben, weiter verwendet werden, muss allenfalls eine Kopie davon erstellt werden, siehe JsgPolygon.Copy().