WaBis

walter.bislins.ch

JSG: Globale Properties

Globale Properties ermöglichen den lesenden Zugriff auf globale Einstellungen und Werte.
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JsGraph.MinLineWidth: Number(>0); Init = 0.25; 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

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

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

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, LastY

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

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

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, WorkPoly2

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

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