| 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 |
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 | Beschreibung |
|---|---|
| 0 | Zeichnet weder Rahmen noch Hintergrund |
| 1 | Nur Rahmen zeichnen (default) |
| 2 | Nur Hintergrund zeichnen |
| 3 | Rahmen und Hintergrund zeichnen |
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( )
| 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 } |
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( )
Die Funktion GetFrameRect ruft intern die Funktion GetFrame() auf und speichert deren Resultat im JsgRect Objekt.
Weitere Infos siehe GetFrame().
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 )
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.
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.
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 )
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.
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 )
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( PosX, PosY, ArrowSymbol, ArrowSize )
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( PosY, ArrowSymbol, ArrowSize )
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( PosX, ArrowSymbol, ArrowSize )
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.
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 )
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().
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 );
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 )
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().
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 );
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 )
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().
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 = 'π').
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 )
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().