WaBis

walter.bislins.ch

JSG: Gitter und Achsen Funktionen

Mit den Gitter-Funktionen kann ein Gitter (Grid) über den ganzen Window-Bereich gezeichnet werden. Mit den Achsen-Funktionen können Markierungen (Ticks) für die Achsen gezeichnet werden und es können die Achsen beschriftet werden.
Frame() Zeichnet einen Rahmen um Window, Viewport oder Canvas
GetFrame() Gibt den Bereich zurück, der mit Frame gezeichnet würde
GetFrameRect() Gibt den Bereich zurück, der mit Frame gezeichnet würde
Grid() Zeichnet ein Gitter in X- und Y-Richtung
GridX() Zeichnet ein Gitter nur in X-Richtung
GridY() Zeichnet ein Gitter nur in Y-Richtung
Axes() Zeichnet ein Achsenkreuz an einer beliebigen Position
AxesX() Zeichnet eine horizontale Achse
AxesY() Zeichnet eine vertikale Achse
TicsX() Zeichnet Strichmarkierungen (Tics) auf der X-Achse
TicsY() Zeichnet Strichmarkierungen (Tics) auf der Y-Achse
TicLabelsX() Beschriftet die Tics der X-Achse
TicLabelsY() Beschriftet die Tics der Y-Achse

JsGraph.Frame()

Mit Frame kann ein Rahmen um das Window bzw. den Viewport gezeichnet werden. Man kann das Rechteck auch füllen lassen, wobei aber dann bereits gezeichnete Grafik in diesem Bereich verdeckt wird. Für den Rahmen und die Füllung werden die aktuellen Linien- und Flächen-Attribute verwendet (siehe SetLineAttr() und SetAreaAttr()).

JsGraph.Frame( Mode )

Mode: Integer(0..3); Optional; Default = 1
Mode Beschreibung
0 Zeichnet weder Rahmen noch Hintergrund
1 Nur Rahmen zeichnen (default)
2 Nur Hintergrund zeichnen
3 Rahmen und Hintergrund zeichnen

JsGraph.GetFrame()

Mit GetFrame kann der aktuelle Zeichenbereich abgefragt werden. Es hängt von der aktiven Transformation ab, welcher Bereich (Canvas, Viewport, Window) zurückgegeben wird, siehe Property Trans. Die Transformation kann mit der Funktion SelectTrans() ausgewählt werden.

JsGraph.GetFrame( )

Return: { xmin, ymin, xmax, ymax }
Objekt mit den Frame-Ausmassen.
Trans return
'canvas' { xmin: 0, ymin: 0, xmax: CanvasWidth, ymax: CanvasHeight }
'viewport' { xmin: 0, ymin: 0, xmax: VpWidth-1, ymax: VpHeight-1 }
'window' { xmin: WinXmin, ymin: WinYmax, xmax: WinXmax, ymax: WinYmax }

JsGraph.GetFrameRect()

Mit GetFrameRect kann der aktuelle Zeichenbereich abgefragt werden. Es hängt von der aktiven Transformation ab, welcher Bereich (Canvas, Viewport, Window) zurückgegeben wird, siehe Property Trans. Die Transformation kann mit der Funktion SelectTrans() ausgewählt werden.

JsGraph.GetFrameRect( )

Return: JsgRect
Objekt mit den Frame-Ausmassen.

Die Funktion GetFrameRect ruft intern die Funktion GetFrame() auf und speichert deren Resultat im JsgRect Objekt.

Weitere Infos siehe GetFrame().

JsGraph.Grid()

Mit der Funktion Grid kann ein Gitternetz über den mit SelectTrans() gewählten Bereich (Canvas, Viewport, Window) gezeichnet werden. Das Gitter geht immer durch den Nullpunkt des Bereiches. Das Gitter wird in den aktuellen Linien-Attributen (siehe SetLineAttr()) gezeichnet. Diese Funktion ist eine Kombination von GridX() und GridY().

JsGraph.Grid( DeltaX, DeltaY, SkipZero, SkipLimit )

DeltaX, DeltaY: Number(>0); Optional; Default = 1
Abstand der Gitterlinien in X- und Y-Richtung in den mit SelectTrans() gewählten Koordinaten.
SkipZero: Boolean; Optional; Default = true
Wenn true werden die Linien durch den Nullpunkt nicht gezeichnet. Dies ist nützlich, damit bereits gezeichnete Achse nicht mit dem Gitter übermalt wird.
SkipLimit: Boolean; Optional; Default = false
Wenn true werden die ersten und letzten Gitterlinien nicht gezeichnet. Dies ist nützlich, damit ein bereits gezeichnetes Frame() nicht dem Gitter übermalt wird.

Tip: Um zu verhindern, dass das Gitternetz andere Grafik überzeichnet, empfiehlt es sich, das Gitter zu einem möglichst frühen Zeitpunkt zu zeichnen.

Wenn der Abstand DeltaX oder DeltaY kleiner als die Strichdicke gewählt wird, so wird die ganze Fläche gefüllt, statt entsprechend viele Linien zu zeichnen. Damit wird verhindert, dass bei einem Programmierfehler das System durch Zeichnen von sich überlappenden Linien überlastet wird.

Beispiel 1

var jsg = NewGraph2D( { Width: 250, Height: 200 } );
jsg.SetWindow( -1.05, -1.05, 1.05, 1.05 );
jsg.Axes( 0, 0, 'Arrow1' );
jsg.SetLineAttr( '#CCC', 1 );
jsg.Grid( 0.1, 0.1 );

Zeichnet ein Gitternetz in Hellgrau mit der Liniendicke 1 Pixel mit einem Linienabstand von 0,1 Einheiten in Window-Koordinaten in X- und Y-Richtung über den ganzen Wertebereich des Windows. Die Window-Koordinaten sind defaultmässig ausgewählt.

JsGraph.GridX()

Mit der Funktion GridX können vertikale Linien in einem bestimmten Abstand über den mit SelectTrans() gewählten Bereich (Canvas, Window, Window) gezeichnet werden. Eine Linie geht immer durch den Nullpunkt des Bereiches, auch wenn dieser ausserhalb des Bereiches liegt und diese Linie somit nicht dargestellt wird. Die Linien werden in den aktuellen Linien-Attributen (siehe SetLineAttr()) gezeichnet.

JsGraph.GridX( DeltaX, SkipZero, SkipLimit )

DeltaX: Number(>0); Optional; Default = 1
Abstand der Linien in X-Richtung in den mit SelectTrans() gewählten Koordinaten.
SkipZero: Boolean; Optional; Default = true
Wenn true wird die Linie durch den Nullpunkt nicht gezeichnet. Dies ist nützlich, damit bereits gezeichnete Achse nicht mit dem Gitter übermalt wird.
SkipLimit: Boolean; Optional; Default = false
Wenn true wird die erste und letzte Gitterlinie nicht gezeichnet. Dies ist nützlich, damit ein bereits gezeichnetes Frame() nicht dem Gitter übermalt wird.

Wenn der Abstand DeltaX kleiner als die Strichdicke gewählt wird, so wird die ganze Fläche gefüllt, statt entsprechend viele Linien zu zeichnen. Damit wird verhindert, dass bei einem Programmierfehler das System durch Zeichnen von sich überlappenden Linien überlastet wird.

JsGraph.GridY()

Mit der Funktion GridY können horizontale Linien in einem bestimmten Abstand über den mit SelectTrans() gewählten Bereich (Canvas, Viewport, Window) gezeichnet werden. Eine Linie geht immer durch den Nullpunkt des Bereiches, auch wenn dieser ausserhalb des Bereiches liegt und diese Linie somit nicht dargestellt wird. Die Linien werden in den aktuellen Linien-Attributen (siehe SetLineAttr()) gezeichnet.

JsGraph.GridY( DeltaY, SkipZero, SkipLimit )

DeltaY: Number(>0); Optional; Default = 1
Abstand der Linien in Y-Richtung in den mit SelectTrans() gewählten Koordinaten.
SkipZero: Boolean; Optional; Default = true
Wenn true wird die Linie durch den Nullpunkt nicht gezeichnet. Dies ist nützlich, damit bereits gezeichnete Achse nicht mit dem Gitter übermalt wird.
SkipLimit: Boolean; Optional; Default = false
Wenn true wird die erste und letzte Gitterlinie nicht gezeichnet. Dies ist nützlich, damit ein bereits gezeichnetes Frame() nicht dem Gitter übermalt wird.

Wenn der Abstand DeltaY kleiner als die Strichdicke gewählt wird, so wird die ganze Fläche gefüllt, statt entsprechend viele Linien zu zeichnen. Damit wird verhindert, dass bei einem Programmierfehler das System durch Zeichnen von sich überlappenden Linien überlastet wird.

JsGraph.Axes()

JsGraph.Axes( PosX, PosY, ArrowSymbol, ArrowSize )

PosX, PosY: Number; Optional; Default = (0,0)
Achsenschnittpunkt.
ArrowSymbol: String; Optional; Default = ''
Wenn hier ein Marker-Symbolname steht, wird das entsprechende Symbol (z.B. 'Arrow2') am Ende der Achse gezeichnet
ArrowSize: Number; Optional; Default = 8
Grösse des Pfeilsymbols

Mit der Funktion Axes kann ein Achsenkreuz über den mit SelectTrans() gewählten Bereich (Canvas, Viewport, Window) durch einen beliebigen Punkt mit den aktuellen Linien-Attributen gezeichnet werden.

Liegt eine Koordinate PosX oder PosY ausserhalb des Zeichenbereiches, wird die entsprechende Achse nicht gezeichnet.

JsGraph.AxesX()

JsGraph.AxesX( PosY, ArrowSymbol, ArrowSize )

PosY: Number; Optional; Default = 0
Vertikale Position der Achse.
ArrowSymbol: String; Optional; Default = ''
Wenn hier ein Marker-Symbolname steht, wird das entsprechende Symbol (z.B. 'Arrow2') am Ende der Achse gezeichnet
ArrowSize: Number; Optional; Default = 8
Grösse des Pfeilsymbols

Mit der Funktion AxesX kann eine horizontale Achse über den mit SelectTrans() gewählten Bereich (Canvas, Viewport, Window) bei einem beliebigen Y-Wert mit den aktuellen Linien-Attributen gezeichnet werden.

Liegt PosY ausserhalb des Zeichenbereiches, wird die Achse nicht gezeichnet.

JsGraph.AxesY()

JsGraph.AxesY( PosX, ArrowSymbol, ArrowSize )

PosX: Number; Optional; Default = 0
Horizontale Position der Achse.
ArrowSymbol: String; Optional; Default = ''
Wenn hier ein Marker-Symbolname steht, wird das entsprechende Symbol (z.B. 'Arrow2') am Ende der Achse gezeichnet
ArrowSize: Number; Optional; Default = 8
Grösse des Pfeilsymbols

Mit der Funktion AxesY kann eine vertikale Achse über den mit SelectTrans() gewählten Bereich (Canvas, Viewport, Window) bei einem beliebigen X-Wert mit den aktuellen Linien-Attributen gezeichnet werden.

Liegt PosX ausserhalb des Zeichenbereiches, wird die Achse nicht gezeichnet.

JsGraph.TicsX()

Mit der Funktion TicsX können Markierungsstriche auf einer beliebigen X-Achse generiert werden. Die Markierungen werden in den aktuellen Linien Attributen gezeichnet (siehe SetLineAttr()). Die Markierungen werden über den ganzen X-Bereich des mit SelectTrans() gewählten Bereiches (Canvas, Viewport, Window) gezeichnet, ausgehend vom Punkt (0, PosY).

JsGraph.TicsX( PosY, DeltaX, TicSizeP, TicSizeN, SkipZero, SkipLimit )

PosY: Number; Optional; Default = 0
Vertikale Position der Markierungen (der X-Achse) in aktuellen Koordinaten (siehe SelectTrans()).
DeltaX: Number(>0); Optional; Default = 1
Abstand der Markierungen in X-Richtung in aktuellen Koordinaten (siehe SelectTrans()).
TicSizeP: Number(>=0); Optional; Default = 3
Grösse der Markierungen von PosY aus in Richtung positiver Y-Werte in Pixel.
TicSizeN: Number(>=0); Optional; Default = TicSizeP
Grösse der Markierungen von PosY aus in Richtung negativer Y-Werte in Pixel.
SkipZero: Boolean; Optional; Default = true
Wenn true wird der Tic durch den Nullpunkt nicht gezeichnet.
SkipLimit: Boolean; Optional; Default = false
Wenn true wird der erste und letzte Tic nicht gezeichnet. Dies ist nützlich, wenn der Tic über den Rand des Bereiches hinausragen sollte.

Wenn der Abstand DeltaX kleiner als die Strichdicke gewählt wird, so wird eine Fläche gezeichnet, welche alle Tics enthält, anstatt entsprechend viele Linien zu zeichnen. Damit wird verhindert, dass bei einem Programmierfehler das System durch Zeichnen von sich überlappenden Linien überlastet wird.

Wenn AutoScalePix true ist, werden die Tic-Werte mit ScalePix() skaliert → SetScaleRef().

Beispiel 2

var jsg = NewGraph2D( { Width: 250, Height: 200 } );
jsg.SetWindow( -1.05, -1.05, 1.05, 1.05 );
jsg.Axes();
jsg.SetColor( 'red' );
jsg.TicsX( 0, 0.1, 4, 2 );

JsGraph.TicsY()

Mit der Funktion TicsY können Markierungsstriche auf einer beliebigen Y-Achse generiert werden. Die Markierungen werden in den aktuellen Linien Attributen gezeichnet (siehe SetLineAttr()). Die Markierungen werden über den ganzen Y-Bereich des mit SelectTrans() gewählten Bereiches (Canvas, Viewport, Window) gezeichnet, ausgehend vom Punkt (PosX, 0).

JsGraph.TicsY( PosX, DeltaY, TicSizeP, TicSizeN, SkipZero, SkipLimit )

PosX: Number; Optional; Default = 0
Horizontale Position der Markierungen (der Y-Achse) in aktuellen Koordinaten (siehe SelectTrans()).
DeltaY: Number(>0); Optional; Default = 1
Abstand der Markierungen in Y-Richtung in aktuellen Koordinaten (siehe SelectTrans()).
TicSizeP: Number(>=0); Optional; Default = 3
Grösse der Markierungen von PosX aus in Richtung positiver X-Werte in Pixel.
TicSizeN: Number(>=0); Optional; Default = TicSizeP
Grösse der Markierungen von PosX aus in Richtung negativer X-Werte in Pixel.
SkipZero: Boolean; Optional; Default = true
Wenn true wird der Tic durch den Nullpunkt nicht gezeichnet.
SkipLimit: Boolean; Optional; Default = false
Wenn true wird der erste und letzte Tic nicht gezeichnet. Dies ist nützlich, wenn der Tic über den Rand des Bereiches hinausragen sollte.

Wenn der Abstand DeltaY kleiner als die Strichdicke gewählt wird, so wird eine Fläche gezeichnet, welche alle Tics enthält, anstatt entsprechend viele Linien zu zeichnen. Damit wird verhindert, dass bei einem Programmierfehler das System durch Zeichnen von sich überlappenden Linien überlastet wird.

Wenn AutoScalePix true ist, werden die Tic-Werte mit ScalePix() skaliert → SetScaleRef().

Beispiel 3

var jsg = NewGraph2D( { Width: 250, Height: 200 } );
jsg.SetWindow( -1.05, -1.05, 1.05, 1.05 );
jsg.Axes();
jsg.SetColor( 'red' );
jsg.TicsY( 0, 0.1, 4, 2 );

JsGraph.TicLabelsX()

Mit TicLabelsX kann die X-Achse beschriftet werden. Die Beschriftung kann auf vielfältige Weise beeinflusst werden (siehe Beispiel 4). Die Beschriftung kann wahlweise oberhalb oder unterhalb der Achse gesetzt werden. Die Beschriftung wird in den aktuellen Text-Attributen gesetzt (siehe SetTextAttr()). Mit dem Text-Attribut TextHAlign kann die horizontale Position relativ zu den Tics bestimmt werden.

JsGraph.TicLabelsX( PosY, DeltaX, OffsetY, Scale, Digits, SkipZero, SkipLimit, Unit )

PosY: Number; Optional; Default = 0
Vertikale Position der X-Achse, welche beschriftet werden soll, in aktuellen Koordinaten (siehe SelectTrans()).
DeltaX: Number(>0); Optional; Default = 1
Abstand der Tics der X-Achse, welche beschriftet werden sollen, in aktuellen Koordinaten (siehe SelectTrans()).
OffsetY: Number; Optional; Default = -4
Abstand der Beschriftung von der Achse in Pixel. Für OffsetY < 0 wird die Beschriftung unterhalb der Achse angebracht, sonst oberhalb.
Scale: Number; Optional; Default = 1
Die Werte der X-Achse können mit Scale multipliziert werden, bevor sie angezeigt werden. Dadurch lassen sich sehr grosse oder sehr kleine Zahlen oder Zahlen, die z.B. ein Vielfaches von π sind kompakt darstellen (siehe Beispiel 4). Mit einem Wert von Scale = 1 werden die Originalwerte der Achse zur Beschriftung verwendet.
Digits: Integer(0..10); Optional; Default = 0
Anzahl anzuzeigende Nachkommastellen. Der angezeigte Wert wird auf diese Stellenzahl gerundet.
SkipZero: Boolean; Optional; Default = true
Wenn true wird der Nullpunkt der Achse nicht Beschriftet. Dies ist nützlich, damit die Beschriftung nicht durch die Y-Achse durchgeschnitten wird.
SkipLimit: Boolean; Optional; Default = true
Wenn true wird der erste und letzte Tic nicht beschriftet. Dies ist praktisch, wenn diese Tics zu nahe am Rand liegen und die Beschriftung somit über den Rand hinaus ragen würde.
Unit: String; Optional; Default = ''
Es kann an jeden Wert der Beschriftung eine Einheit angehängt werden (z.B. π). Im String Unit sind auch HTML-Tags und Codes für Sonderzeichen (z.B: Unit = '&pi;' → π) erlaubt, wenn TextRendering = 'html' ist. Bei TextRendering = 'canvas' kann man Unicodes für Sonderzeichen im String verwenden, zB. '\u03c0' für π

Mit einer speziellen Syntax in Unit ist es auch möglich, die Beschriftungs-Werte in beliebigen Text einzubetten:

Unit = 'vorher (#) nachher'

Der Ausdruck (#) wird durch die aktuelle Zahl ersetzt.

Wenn durch zu kleine Vorgabe von DeltaX die Beschriftungen sich überlagern würden, wird der Abstand DeltaX automatisch soweit vervielfacht, bis sich die Beschriftungen nicht mehr überlagern.

Wenn AutoScalePix true ist, werden die OffsetY mit ScalePix() skaliert → SetScaleRef().

Beispiel 4

var jsg = NewGraph2D( { Width: 250, Height: 200 } );
jsg.SetWindow( -3*Math.PI, -1.05, 3*Math.PI, 1.05 );
jsg.Axes();
jsg.TicsX( 0, Math.PI/2 );
jsg.TicsY( 0, 0.2 );
jsg.SetTextAttr( 'Arial', 10, 'black', 'normal', 'normal', 'center', 'middle' );
jsg.TicLabelsX( 0, Math.PI, -3, 1/Math.PI, 0, true, true, '\u03c0' );
jsg.TicLabelsY( 0, 0.2, -5, 1, 1, true, false );

Im obigen Beispiel sind die X-Tics mit einem Abstand von π/2 gesetzt. Beschriftet wird jeder zweite Tic mit TicX = Math.PI. Damit aber bei der Beschriftung die Zahlen als Vielfaches von π (also 1, 2, 3) angezeigt werden und nicht als krumme Werte (3.14, 6.28, usw.), wird Scale = 1/Math.PI angegeben und es werden keine Nachkommastellen ausgegeben (Digits = 0). Um zu verdeutlichen, dass es sich um Vielfache von π handelt, wird π als Einheit an die Zahlen angehängt (bei TextRendering = 'canvas': Unit = '\u03c0' oder bei TextRendering = 'html': Unit = '&pi;').

JsGraph.TicLabelsY()

Mit TicLabelsY kann die Y-Achse beschriftet werden. Die Beschriftung kann auf vielfältige Weise beeinflusst werden (siehe Beispiel 4). Die Beschriftung kann wahlweise links oder rechts der Achse gesetzt werden. Die Beschriftung wird in den aktuellen Text-Attributen gesetzt (siehe SetTextAttr()). Mit dem Text-Attribut TextVAlign kann die vertikale Position relativ zu den Tics bestimmt werden.

JsGraph.TicLabelsY( PosX, DeltaY, OffsetX, Scale, Digits, SkipZero, SkipLimit, Unit )

PosX: Number; Optional; Default = 0
Horizontale Position der Y-Achse, welche beschriftet werden soll, in aktuellen Koordinaten (siehe SelectTrans()).
DeltaY: Number(>0); Optional; Default = 1
Abstand der Tics der Y-Achse, welche beschriftet werden sollen, in aktuellen Koordinaten (siehe SelectTrans()).
OffsetX: Number; Optional; Default = -4
Abstand der Beschriftung von der Achse in Pixel. Für OffsetX < 0 wird die Beschriftung links der Achse angebracht, sonst rechts.
Scale: Number; Optional; Default = 1
Die Werte der Y-Achse können mit Scale multipliziert werden, bevor sie angezeigt werden. Dadurch lassen sich sehr grosse oder sehr kleine Zahlen oder Zahlen, die z.B. ein Vielfaches von π sind kompakt darstellen (siehe Beispiel 4). Mit einem Wert von Scale = 1 werden die Originalwerte der Achse zur Beschriftung verwendet.
Digits: Integer(0..10); Optional; Default = 0
Anzahl anzuzeigende Nachkommastellen. Der angezeigte Wert wird auf diese Stellenzahl gerundet.
SkipZero: Boolean; Optional; Default = true
Wenn true wird der Nullpunkt der Achse nicht Beschriftet. Dies ist nützlich, damit die Beschriftung nicht durch die X-Achse durchgeschnitten wird.
SkipLimit: Boolean; Optional; Default = true
Wenn true wird der erste und letzte Tic nicht beschriftet. Dies ist praktisch, wenn diese Tics zu nahe am Rand liegen und die Beschriftung somit über den Rand hinaus ragen würde.
Unit: String; Optional; Default = ''
Es kann an jeden Wert der Beschriftung eine Einheit angehängt werden (z.B. π). Im String Unit sind auch HTML-Tags und Codes für Sonderzeichen (z.B: Unit = '&pi;' → π) erlaubt, wenn TextRendering = 'html' ist. Bei TextRendering = 'canvas' kann man Unicodes für Sonderzeichen im String verwenden, zB. '\u03c0' für π

Mit einer speziellen Syntax in Unit ist es auch möglich, die Beschriftungs-Werte in beliebigen Text einzubetten:

Unit = 'vorher (#) nachher'

Der Ausdruck (#) wird durch die aktuelle Zahl ersetzt.

Wenn durch zu kleine Vorgabe von DeltaY die Beschriftungen sich überlagern würden, wird der Abstand DeltaY automatisch soweit vervielfacht, bis sich die Beschriftungen nicht mehr überlagern.

Wenn AutoScalePix true ist, werden die OffsetX mit ScalePix() skaliert → SetScaleRef().

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