Die Zeichenfläche (Canvas) hat ein Koordinatensystem, welches den Ursprung oben links hat. Die Y-Achse schaut also nach unten. Ein solches Koordinatensystem ist für das Zeichnen von Graphen unpraktisch. Daher übernimmt das JSG-Modul die Abbildungstransformation von geeigneten Weltkoordinaten (Window-Koordinaten genannt) in Canvas-Koordinaten (siehe auch JSG: Abbildung).
Die Abbildungs-Transformationen werden durch das Definieren von zwei Wertebereichen festgelegt:
Die Abbildungs-Transformationen werden so berechnet, dass jeder Punkt des Windows vollständig innerhalb des zugehörigen Viewports liegt. Es kann eingestellt werden, ob am Viewport-Rand geclippt werden soll oder nicht. Am Canvas-Rand wird immer geclippt.
SetViewport() | Setzt den Viewport-Bereich |
SetViewportRel() | Setzt den Viewport-Bereich relativ zum bestehenden Bereich neu (Rahmen) |
SetWindow() | Setzt den Window-Bereich |
SetWindowWH() | Setzt den Window-Bereich mittels Breite und Höhe |
MapWindow() | Berechnet das Window so, dass ein bestimmter Bereich unverzerrt darin abgebildet wird |
GetCanvasRect() | Gibt die Grösse des Canvas als JsgRect Objekt zurück |
GetViewportRect() | Gibt die Grösse des Viewport als JsgRect Objekt zurück |
SetClipping() | Setzt den Clipping-Bereich auf Canvas, Viewport oder Window |
SetGraphClipping() | Aktiviert das Clipping auf Stufe der Grafik-Elemente |
SetClipRect() | Setzt einen belibigen rechteckigen Clipping-Bereich |
SelectTrans() | Wählt die bei den Zeichen- und Abfragefunktionen zu verwendende Transformation |
ResetTrans() | Setzt die Objekt-Transformation zurück (keine Transformation) |
SaveTrans() | Speichert eine Kopie der aktuellen Objekt-Transformation in einem internen Stack |
RestoreTrans() | Holt die letzte Objekt-Transformation vom Stack und setzt sie als aktuelle Transformation ein |
TransMove() | Addiert eine Verschiebung zur Objekt-Transformation |
TransScale() | Addiert eine Skalierung zur Objekt-Transformation |
TransRotate() | Addiert eine Rotation zur Objekt-Transformation |
TransRotateAtPoint() | Addiert eine Rotation um einen Punkt zur Objekt-Transformation |
AddTrans() | Addiert eine beliebige Transformations-Matrix zur aktuellen Objekt-Transformation |
SetAngleMeasure() | Wählt die Winkel-Einheiten ('deg', 'rad') |
SetHighResolution() | Aktiviert/Deaktiviert das hochaufgelöste Zeichnen auf Retina-Displays |
SetAutoScalePix() | Setzt das Property AutoScalePix |
SetLimitScalePix() | Setzt das Property LimitScalePix |
SetScalePixInt() | Setzt das Property ScalePixInt |
SetScaleRef() | Setzt die Referenz-Canvasbreite und andere Properties für Funktionen wie ScalePix() |
ScalePix() ScalePixI() | Skaliert einen Pixelwert, → ScaleRef |
ScalePixMin() ScalePixMinI() | Skaliert einen Pixelwert mit unterer Grenze → ScaleRef |
ScalePixMax() ScalePixMaxI() | Skaliert einen Pixelwert mit oberer Grenze → ScaleRef |
ScalePixMinMax() ScalePixMinMaxI() | Skaliert einen Pixelwert mit unterer und oberer Grenze → ScaleRef |
MinSize() MaxSize() MinMaxSize() | Funktionen zum Begrenzen eines Wertes |
ScaleToTic() | Berechnung der nächst grösseren Windowgrösse, ausgerichtet an einem Tic |
AngleToRad() | Umrechnung eines Winkelt im aktuellen Winkelformat in Radian |
DegToRad() RadToDeg() | Umrechnung von Winkeln von Grad in Radian und umgekehrt |
ScaleWinX() ScaleWinY() | Gibt den Umrechnungsfaktor von Window- in Viewport-/Canvas-Koordinaten zurück |
WinToPixX() WinToPixY() | Transformiert eine Länge von Window- in Pixel-Koordinaten |
PixToWinX() PixToWinY() | Transformiert eine Länge von Pixel- in Window-Koordinaten |
TransCnvsWinX() TransCnvsWinY() | Transformiert von Canvas- in Window-Koordinaten |
TransVpCnvsX() TransVpCnvsY() | Transformiert von Viewport- in Canvas-Koordinaten |
TransCnvsVpX() TransCnvsVpY() | Transformiert von Canvas- in Viewport-Koordinaten |
TransWinVpX() TransWinVpY() | Transformiert von Window- in Viewport-Koordinaten |
TransVpWinX() TransVpWinY() | Transformiert von Viewport- in Window-Koordinaten |
TransXY() | Transformiert einen Punkt x,y vom aktuellen Koordinatensystem in Canvas-Koordinaten, wobei auch die Objekt-Transformation angewandt wird. |
TransPoly() | Transformiert ein Polygon vom aktuellen Koordinatensystem in Canvas-Koordinaten, wobei auch die Objekt-Transformation angewandt wird. |
ObjTransXY() | Transformiert einen Punkt x,y nur mit der Objekt-Transformation |
ObjTransPoly() | Transformiert ein Polygon nur mit der Objekt-Transformation |
IsPointInsideRect() | Test, ob ein Punkt innerhalb eines Rechteck-Bereiches liegt |
IsPolygonInsideRect() | Test, ob ein Polygon innerhalb eines Rechteck-Bereiches liegt |
JsGraph.SetViewport( X, Y, Width, Height, ScaleArgs, Clip )
JsGraph.SetViewport( Left, Top, Right, Bottom, ScaleArgs, Clip )
Setzt den Viewport auf den mit den Parametern angegeben Bereich und Setzt das Window so, dass es eine 1:1 Abbildung in diesen Viewport macht, wobei der Nullpunkt unten Links im Viewport zu liegen kommt. Dies wird intern durch folgenden Aufruf erreicht:
jsg.SetWindow( 0, 0, jsg.VpInnerWidth, jsg.VpInnerHeight );
Jeder Canvas hat zu einer bestimmten Zeit genau einen Viewport. Dieser kann jedoch nacheinander auf verschiedene Bereiche gesetzt werden. Beim Erzeugen eines Canvas mit dem JsGraph Konstruktor wird der Viewport auf den ganzen Canvas-Bereich gesetzt. Um einen geänderten Viewport wieder auf den ganzen Canvas-Bereich zurückzusetzen, kann SetViewport() ohne Parameter aufgerufen werden:
jsg.SetViewport();
Die Parameter dieser Funktion können ungerade Zahlen sein, was insbesondere intern resultiert, wenn ScaleArgs = true ist. Wenn Pixel-genaues Zeichnen erwünscht ist, muss ScalePix = false gesetzt sein und die Parameter müssen ganze Zahlen sein.
Der Viewport-Bereich kann so gesetzt werden, dass er über den Canvas hinausragt. Dies wirkt sich auf die Abbildungs-Transformation entsprechend aus. Die Grafik wird jedoch am Canvas-Rand geclippt.
Wenn ScaleArgs = true werden die Argumente X, Y, Left, Top, Right, Bottom mit der Funktion ScalePix() skaliert. Dies ist insbesondere bei der zweiten Aufrufvariante sinnvoll, wenn der Rand zwischen Canvas und Viewport sich mit der Grösse des Canvas proportional ändert soll. Die zweite Aufrufvariante entspricht dem Aufruf von SetViewportRel().
Wenn auf einem Canvas mehrere Viewports mit Rändern gezeichnet werden sollen, kombiniert man SetViewport() am besten mit SetViewportRel():
// Viewport auf der linken Hälfte des Canvas jsg.SetViewport( 0, 0, jsg.CanvasWidth/2, jsg.CanvasHeight ); // Viewport um margin verkleinern und Clipping auf diesen Bereich setzen jsg.SetViewportRel( margin ); // Window setzen und Grafik zeichnen : // Viewport auf der rechten Hälfte des Canvas jsg.SetViewport( 0, jsg.CanvasWidth/2, jsg.CanvasWidth/2, jsg.CanvasHeight ); // Viewport um margin verkleinern und Clipping auf diesen Bereich setzen jsg.SetViewportRel( margin ); // Window setzen und Grafik zeichnen :
Wenn die Grafik am Viewport-Rand geclippt werden soll, kann Clip = true gesetzt werden. Wenn Clip = false oder undefiniert ist, wird der Clipping-Bereich auf den Canvas-Bereich gesetzt.
Siehe auch SetClipping() und SetGraphClipping().
JsGraph.SetViewportRel( Left, Top, Right, Bottom, ScaleArgs, Clip )
Mit SetViewportRel kann der aktuelle Viewport verkleinert werden, indem man die Grösse der vier Ränder angibt. Die Randgrössen werden Standardmässig mit der Funktion ScalePix() skaliert (wenn das Argument ScaleArgs = true ist). Die Rahmenbreite skaliert damit mit der Canvasgrösse.
Wenn die Grafik am Viewport-Rand geclippt werden soll, kann Clip = true gesetzt werden (Standardwert). Wenn Clip = false ist, wird der Clipping-Bereich auf den Canvas-Bereich gesetzt.
Siehe auch SetClipping() und SetGraphClipping().
Praktisch ist diese Funktion, wenn z.B. vier gleichmässig verteilte Grafiken innerhalb eines Canvas gezeichnet werden sollen, wobei jede Grafik einen Rahmen haben soll, der mit dem Canvas skaliert. In diesem Fall setzt man zunächt einen Viewport mit SetViewport() auf einen der vier Quadranten und verkleinert diesen dann mit SetViewportRel() um den gewünschten Rahmen. Dann zeichnet man die Grafik in diesen Bereich. Dies macht man hintereinander für jeden Quadranten.
// erster Quadrant g.SetViewport( 0, 0, g.CanvasWidth/2, g.CanvasHeight/2 ); g.SetViewportRel( 20, 30, 10, 20, false, true ); g.SetWindow(....) // Grafik im ersten Quadranten zeichnen : // zweiter Quadrant g.SetViewport( g.CanvasWidth/2, 0, g.CanvasWidth/2, g.CanvasHeight/2 ); g.SetViewportRel( 20, 30, 10, 20, false, true ); g.SetWindow(....) // Grafik im zweiten Quadranten zeichnen :
JsGraph.SetWindow( Xmin, Ymin, Xmax, Ymax )
Setzt die Abbildungs-Transformation von Welt-Koordinaten in aktuelle Viewport-Koordinaten. Beim Aufruf der Funktionen SetViewport() und SetViewportRel() bzw. nach dem Erzeugen des JsGraph Objektes wird die Window-Transformation wiefolgt gesetzt:
g.SetWindow();
was dem folgenden Aufruf entspricht:
g.SetWindow( 0, 0, g.VpInnerWidth, g.VpInnerHeight );
Dies entspricht einer 1:1 Abbildung von Welt- in Viewport-Koordinaten. Beachte folgende Unterschiede zwischen den Koordinatensystemen:
Window | Viewport | Canvas | |
---|---|---|---|
Ursprung | links unten | links oben | links oben |
Richtung X-Achse | links nach rechts | links nach rechts | links nach rechts |
Richtung Y-Achse | unten nach oben | oben nach unten | oben nach unten |
Alles, was innerhalb von Xmin-0.5px bis Xmax+0.5px und innerhalb von Ymin-0.5px und Ymax+0.5px gezeichnet wird, erscheint zumindest Teilweise innerhalb des Viewports. Ein Rechteck mit einer Strichdicke von 1 Pixel, das mit folgendem Aufruf gezeichnet wird, setzt genau die ersten und letzten Pixel innerhalb des aktuellen Viewport-Bereiches, siehe Abbildungen und Transformationen:
jsg.SetWindow( 0, 0, 1, 1 ); jsg.Rect( 0, 0, 1, 1 );
Achtung: Wenn bei den Argumenten Xmin > Xmax oder Ymin > Ymax angegeben wird, handelt es sich um eine Spiegel-Transformation. Der enstprechende Bereich wird gespiegel dargestellt.
Hinweise
Um in Viewport-Koordinaten zu zeichnen, muss man nicht extra ein Window mit einer Einheitstransformation definieren. Man wählt einfach mit SelectTrans() die Viewport-Transformation.
JsGraph.SetWindowWH( Xmin, Ymin, Width, Height )
Wenn Width und/oder Height negativ sind, wird die entsprechende Achse gespiegelt. Bei ungespiegelten Achsen definieren Xmin und Ymin den linken unteren Punkt des Windows, bei gespiegelten Achsen den oberen rechten Punkt des Windows.
Wenn Width = 0 angegeben wird, wird die Window-Breite aufgrund der Window-Höhe so berechnet, dass eine unverzerrte Abbildung in den aktuellen Viewport entsteht.
Wenn Height = 0 angegeben wird, wird die Window-Höhe aufgrund der Window-Breite so berechnet, dass eine unverzerrte Abbildung in den aktuellen Viewport entsteht.
JsGraph.MapWindow( Xcenter, Ycenter, Width, Height, Align )
Berechnet die Window-Koordinaten so, dass Xcenter und Ycenter in der Mitte des Viewport zu liegen kommen und eine unverzerrte Abbildung entsteht. Wird entweder Width oder Height gleich 0 gesetzt, wird die entsprechende Grösse aus dem Seitenverhältnis des Viewports berechnet und das Window wird im Viewport zentriert.
Wird sowohl Width als auch Height angegeben und ist das Seitenverhältnis von Window und Viewport ungleich, wird das Window so vergrössert, dass es genau in den Viewport passt. Dabei kann mit Align bestimmt werden, auf welcher Seite das Window vergrössert werden soll. Align = 0 zentriert das Window im Viewport. Align = - 1 richtet das Window links bzw. unten aus. Align = 1 richtet das Window rechts bzw. oben aus. Es sind auch Zwischenwerte erlaubt um das Window mehr oder weniger stark zu verschieben.
JsGraph.GetCanvasRect( )
JsGraph.GetViewportRect( )
Gibt die Grösse des aktuellen Viewports als möglichst eng umschliessendes Rechteck zurück. Wenn die Viewport-Koordinaten keine ganzen Zahlen sind, wird das umschliessende Rechteck erweitert. Die Koordinaten des zurückgegebenen Rechtecks sind immer ganze Zahlen.
Diese Funktion wird zum Ermitteln des Rechtecks für die Funktion MakeSnapshot() verwendet.
JsGraph.SetClipping( Range )
Setzt den Clipping-Bereich auf den mit Range angegebenen Bereich. Wenn Range nicht definiert oder ungültig ist, wird auf den 'canvas' Bereich geclippt.
Bei diesem Clipping handelt es sich um ein Clipping auf Pixel-Ebene, auch als Canvas-Clipping bezeichnet. Ein Clipping auf Grafik-Element-Ebene kann mit der Funktion SetGraphClipping() zusätzlich eingeschaltet werden.
JsGraph.SetGraphClipping( Clipping, Range, Extend )
Neben dem Clipping auf Canvas-Ebene, welches mit SetClipping(), SetClipRect() oder Clip() definiert werden kann, gibt es auch Clipping auf Grafik-Element Ebene. Dieses Grafik-Clipping wird mit dieser Funktion aktiviert.
Ist das Grafik-Clipping aktiviert, werden die Grafik-Elemente selbst geclippt, bevor sie gerendert werden. Zusätzlich wird auch das Clipping auf Canvas-Ebene aktiviert. Das Grafik-Clipping ist dann sinnvoll, wenn Grafik den Zeichenbereich stark überschreitet. Dies kann z.B. bei Kreisen mit sehr grossen Radien der Fall sein. Die Canvas-Funktionen sind in diesem Fall oft überfordert, werden extrem langsam oder es entstehen sogar Darstellungsfehler.
Mit dem Einschalten des Grafik-Klipping werden die Elemente auf Grafik-Ebene geclippt und diese geclippten Elemente werden an die Canvas-Funktionen weitergereicht.
Das Grafik-Clipping ist so optimiert, dass es nur für Elemente verwendet wird, welche den normalen Clippbereich verlassen. Mit Extend kann dieser Clippbereich vergrössert werden. Ein Faktor von 1 vergrössert den Bereich um die Breite bzw. Höhe des Canvas. Damit wird erreicht, dass Elemente innerhalb dieses Bereiches nur per Canvas-Clipping geclippt werde, während das Grafik-Clipping erst für Elemente verwendet wird, welche diesen Bereich verlassen. Dies kann auf bestimmten Systemen performanter sein. Elemente die komplett ausserhalb des sichtbaren Bereiches liegen werden gar nicht erst gezeichnet.
Range gibt den Canvas-Clippingbereich an, wie er auch bei der Funktion SetClipping() definiert wird. Wenn Range nicht angegeben wird oder ein Leerstring ist, wird der Canvas-Clippingbereich nicht verändert.
Wenn Extend nicht angegeben wird, wird der aktuelle Wert (Default = 1) verwendet.
Hinweis: Der Grafik-Clippingbereich wird intern um die Strichdicke des jeweiligen Elementes vergrössert. Pixel, die dadurch ausserhalb des Clipping-Bereiches zu liegen kommen, werden vom Canvas-Clipping geclippt. Der Canvas-Clippingbereich kann mit Range festgelegt werden.
Mit der Funktion SetClipRect() oder Clip() können beliebige Canvas-Clippingbereiche definiert werden. Sollen so definierte Bereiche zusammen mit dem Grafik-Clipping verwendet werden, muss hier Range entweder nicht angegeben werden oder auf einen Leerstring gesetzt werden, damit der bereits definierte Canvas-Clippingbereich nicht verändert wird.
Siehe auch Properties GraphClipEnabled und GraphClipExtend.
JsGraph.SetClipRect( X, Y, Width, Height, Trans )
Setzt den Clipping-Bereich auf einen Rechteckigen Bereich. Wenn Trans nicht definiert ist, beziehen sich die Koordinaten auf das aktuelle Koordinatensystem (siehe Property Trans). Sonst kann mit Trans angegeben werden, in welchem System die Koordinaten sind.
Hinweis: Mit der Funktion Clip() können beliebig geformte Clipping-Bereiche gesetzt werden.
JsGraph.SelectTrans( Trans )
Die Koordinaten bei den Zeichen- und Abfragefunktionen beziehen sich auf ein bestimmtes Koordinatensystem. Mit SelectTrans kann das Koordinatensystem ausgewählt werden, das verwendet werden soll. Standardmässig ist das Window-Koordinatensystem aktiv. Die aktuell gewählte Transformation kann auch mit dem Property Trans ausgelesen werden.
JsGraph.ResetTrans( )
Setzt die Objekt-Transformation zurück, d.h. die Transformations-Matrix wird zur Einheitsmatrix.
Bevor Objekte gezeichnet werden, werden sie der Objekt-Transformation unterzogen. Damit können Objekte verschoben, skaliert, rotiert oder über eine beliebige Matrix verzerrt werden.
Die Transformations-Matrix kann zusammen mit den Attributen mit SaveAttrs() zwischengespeichert und mit RestoreAttrs() wieder abgerufen werden.
Es gibt folgende Funktionen, um die Transformations-Matrix zu modifizieren:
ResetTrans() | Setzt die Transformations-Matrix zurück |
SaveTrans() | Speichert eine Kopie der aktuellen Objekt-Transformation in einem internen Stack |
RestoreTrans() | Holt die letzte Objekt-Transformation vom Stack und setzt sie als aktuelle Transformation ein |
TransMove() | Addiert eine Verschiebung zur aktuellen Objekt-Transformation |
TransScale() | Addiert eine Skalierung zur aktuellen Objekt-Transformation |
TransRotate() | Addiert eine Rotation zur aktuellen Objekt-Transformation |
AddTrans() | Addiert eine beliebige Transformations-Matrix zur aktuellen Objekt-Transformation |
Die einzelnen Transformationen können mit obigen Funktionen kombiniert werden. Wenn man zum Beispiel ein Rechteck mit Breite 4 und Höhe 2 um seinen Mittelpunkt rotieren will, so kann man zunächst mit TransMove() das Rechteck um (-2, -1) so verschieben, dass sein Mittelpunkt bei Null zu liegen kommt. Dann kann mit TransRotate() das Rechteck um diesen Punkt gedeht werden. Schliesslich wird mit einem weiteren TransMove() das Rechteck-Zentrum an seine Endposition (200, 150) gesetzt:
g2d.TransMove( -2, -1 ); g2d.TransRotate( 30 ); g2d.TransMove( 200, 150 ); g2d.RectWH( 0, 0, 4, 2 );
Da die Transformations-Funktionen das JsGraph Objekt zurückgeben, können sie verkettet werden. Das folgende Beispiel ist identisch mit dem obigen:
g2d.TransMove( -2, -1 ).TransRotate( 30 ).TransMove( 200, 150 ); g2d.RectWH( 0, 0, 4, 2 );
JsGraph.SaveTrans( Reset )
Speichert eine Kopie der aktuelle Objekt-Transformation in einem internen Stack. Von dort kann diese Transformation mit RestoreTrans() wieder abgerufen und als aktuelle Transformation eingesetzt werden.
SaveTrans() gibt die Kopie der aktuellen Transformation zurück. Diese kann bei AddTrans() verwendet werden.
// aktuelle objekt transformation sichern und zurücksetzen g.SaveTrans( true ); // neue transformationen setzen g.TransRotate( winkel ); g.TransMove( x, y ); // etwas zeichnen g.Polygon( ... ); // gesicherte Transformation wiederherstellen g.RestoreTrans();
JsGraph.RestoreTrans( )
Entfernt die zuletzt mit SaveTrans() auf dem Stack gespeicherte Objekt-Transformation von diesem und setzt sie als aktuelle Transformation ein. Wenn der Stack leer ist, macht diese Funktion nichts.
JsGraph.TransMove( x, y )
JsGraph.TransMove( p )
Addiert eine Verschiebung zur Objekt-Transformation.
JsGraph.TransScale( sx, sy )
JsGraph.TransScale( s )
Addiert eine Skalierung zur Objekt-Transformation.
JsGraph.TransRotate( angle )
Addiert eine Rotation um den Nullpunkt zur Objekt-Transformation. Eine Rotation um einen beliebigen Punkt kann mit der Funktion TransRotateAtPoint() erreicht werden.
Je nach gewählter Window/Viewport-Transformation ist bei einem positiven Winkel die Rotation im Gegenuhrzeigersinn oder im Uhrzeigersinn. Bei einer Window-Transformation ohne Spiegelung einer Achse entspricht ein positivier Wert von angle dem Gegenuhrzeigersinn. Bei der Viewport- und Canvas-Transformation ist der Sinn umgekehrt.
JsGraph.TransRotateAtPoint( x, y, angle )
JsGraph.TransRotateAtPoint( p, angle )
Addiert eine Rotation um einen Punkt zur Objekt-Transformation. Im Vergleich zu TransRotate() kann hier eine beliebige Rotationsachse (x, y) angegeben werden.
Je nach gewählter Window/Viewport-Transformation ist bei einem positiven Winkel die Rotation im Gegenuhrzeigersinn oder im Uhrzeigersinn. Bei einer Window-Transformation ohne Spiegelung einer Achse entspricht ein positivier Wert von angle dem Gegenuhrzeigersinn. Bei der Viewport- und Canvas-Transformation ist der Sinn umgekehrt.
TransRotateAtPoint ist eine Kombination folgender Aufrufe:
JsGraph.AddTrans( Mat )
JsGraph.AddTrans( Trans )
Addiert eine Transformation-Matrix oder eine Objekt-Transformation zur aktuellen Objekt-Transformation. Die Matrix muss aus mindestens 2x3 Elementen bestehen. Weitere Elemente werden ignoriert.
JsGraph.SetAngleMeasure( AngleUnit )
In den Zeichen- und Abfragefunktionen werden Winkel in Grad oder Radiant interpretiert bzw. ausgegeben. Mit SetAngleMeasure kann die gewünschte Winkel-Einheit eingestellt werden. Die aktuelle Einstellung kann aus dem Property AngleMeasure ausgelesen werden.
JsGraph.SetHighResolution( OnOff )
Steuert, 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.SetAutoScalePix( AutoScalePix )
Siehe SetScaleRef() für weitere Informationen.
JsGraph.SetLimitScalePix( LimitScalePix )
Siehe SetScaleRef() für weitere Informationen.
JsGraph.SetScalePixInt( ScalePixInt )
Siehe SetScaleRef() für weitere Informationen.
JsGraph.SetScaleRef( ScaleRef, LimitScalePix, AutoScalePix, ScalePixInt )
JsGraph.SetScaleRef( Params )
Die Funktionen ScalePix(), ScalePixI(), ScalePixMin(), ScalePixMinI(), ScalePixMax(), ScalePixMaxI(), ScalePixMinMax() und ScalePixMinMaxI() verwenden für die Skalierung von Pixelwerten die Referenzbreite ScaleRef.
Einige Grössenangaben wie LineWidth, TextSize und MarkerSize werden in Pixeln angegeben. Bei dynamischen Canvas, die sich der Fenstergrösse des Browsers anpassen, macht es Sinn, wenn sich die entsprechenden Objekte zusammen mit dem Canvas skalieren.
Es gibt zwei Methoden, dies zu erreichen: Alle Pixelwerte werden vor der Übergabe an Funktionen mit einer der oben aufgeführten Funktionen skaliert, oder man schaltet die automatische Skalierung mit AutoScalePix = true für alle Pixelwerte ein.
Für die Transformation muss eine Referenzbreite ScaleRef des Canvas definiert werden. Wenn der Canvas genau die Breite ScaleRef hat, werden Pixelwerte nicht verändert. Ist der aktuelle Canvas jedoch z.B. nur halb so breit wie ScaleRef, so werden alle Pixelgrössen halbiert. Ist der Canvas doppelt so breit wie ScaleRef, werden alle Pixelwerte verdoppelt, sofern LimitScalePix = false ist. Wenn LimitScalePix = true, werden Pixelwerte nur verkleinert, nicht jedoch vergrössert.
Anwendung von LimitScalePix: Eine Grafik werde für eine Canvasgrösse von 400 Pixeln optimiert gezeichnet: ScaleRef = 400. Nun wird dieser Canvas je nach Grösse des Browserfensters bis zu 800 Pixel breit. Wenn LimitScalePix = false ist, werden alle Pixelwerte verdoppelt: Striche werden doppelt so dick, Texte und Marker doppelt so gross usw. Dies sieht nicht schön aus, weil gegenüber dem Rest der Seite die Grafik so viel zu aufdringlich, fett wirkt. Wenn LimitScalePix = true ist, werden Pixelwerte nie vergrössert. Sie behalten ihren Designwert bei, wenn der Canvas breiter als 400 Pixel wird. Die Grafik selbst skaliert jedoch und wird doppelt so gross. Wird der Canvas hingegen kleiner als 400 Pixel, werden alle Pixelwerte und die Grafik proportional verkleinert.
Die zweite Aufrufvariante von SetScaleRef akzeptiert ein Objekt, z.B. ein JsgAttrsDef, in welchem die Parameter der ersten Variante definiert werden können. Es werden von Params hier nur die für diese Funktion relevanten Properties berücksichtigt.
g.SetScaleRef( { ScaleRef: 800, LimitScalePix: true, AutoScalePix: true, ScalePixInt: false } );
Nicht angegebene Properties behalten ihren aktuellen Wert.
JsGraph.ScalePix( PixelSize )
JsGraph.ScalePixI( PixelSize )
Damit Pixel-Grössen wie TextSize und MarkerSize mit der Canvas-Grösse skalieren, können sie mit einer dieser Funktionen umgerechnet werden. PixelSize entspricht der Grösse, die bei einer Canvasbreite von ScaleRef verwendet werden soll. Ist die aktuelle Canvasbreite z.B. nur 1/2 ScaleRef, so geben diese Funktionen PixelSize/2 zürück.
ScalePix gibt die berechnete Pixelgrösse als reelle Zahl zurück.
ScalePixI (ScalePixI) berechnet die Pixelgrösse mit ScalePix und rundet diese danach auf die nächste ganze Zahl auf oder ab. Es wird immer ein Wert grösser oder gleich 1 zurückgegeben.
Achung: Wenn LimitScalePix = true ist, wird PixelSize nie vergrössert, sondern nur verkleinert!
JsGraph.ScalePixMin( PixelSize, MinSize )
JsGraph.ScalePixMinI( PixelSize, MinSize )
Diese Funktionen sind analog den Funktionen ScalePix() und ScalePixI(). Es kann jedoch zusätzlich ein Minimalwert für die berechnete Pixelgrösse festgelegt werden.
Die Funktion ScalePixMinI() (ScalePixMinI) rundet PixelSize nach der Transformation auf ganze Zahlen nach dem Begrezen auf MinSize. Ist der Wert dann kleiner als 1, wird 1 zurückgegeben, sonst der berechnete Wert. Diese Funktion gibt nie einen Wert kleiner 1 zurück.
Achung: Wenn LimitScalePix = true ist, wird PixelSize nie vergrössert, sondern nur verkleinert!
JsGraph.ScalePixMax( PixelSize, MaxSize )
JsGraph.ScalePixMaxI( PixelSize, MaxSize )
Diese Funktionen sind analog den Funktionen ScalePix() und ScalePixI(). Es kann jedoch zusätzlich ein Maximalwert für die berechnete Pixelgrösse festgelegt werden.
Die Funktion ScalePixMaxI() (ScalePixMaxI) rundet PixelSize nach der Transformation auf ganze Zahlen nach dem Begrezen auf MaxSize. Ist der Wert kleiner als 1, wird 1 zurückgegeben. Diese Funktion gibt nie einen Wert kleiner 1 zurück.
Achung: Wenn LimitScalePix = true ist, wird PixelSize nie vergrössert, sondern nur verkleinert!
JsGraph.ScalePixMinMax( PixelSize, MinSize, MaxSize )
JsGraph.ScalePixMinMaxI( PixelSize, MinSize, MaxSize )
Diese Funktionen sind analog den Funktionen ScalePix() und ScalePixI(). Es kann jedoch zusätzlich ein Minimalwert und ein Maximalwert für die berechnete Pixelgrösse festgelegt werden.
Die Funktion ScalePixMinMaxI() (ScalePixMinMaxI) rundet PixelSize nach der Transformation auf ganze Zahlen nach dem Begrezen auf MinSize und MaxSize. Ist der Wert kleiner als 1, wird 1 zurückgegeben. Diese Funktion gibt nie einen Wert kleiner 1 zurück.
Achung: Wenn LimitScalePix = true ist, wird PixelSize nie vergrössert, sondern nur verkleinert!
JsGraph.MinSize( Size, LowerLimit )
JsGraph.MaxSize( Size, UpperLimit )
JsGraph.MinMaxSize( Size, LowerLimit, UpperLimit )
Mit diesen Funktionen kann man den Wert Size nach unten und/oder oben begrenzen.
JsGraph.ScaleToTic( Value, TicSpan )
Manchmal kann die Grösse eines Windows erst durch die Berechnung einer zu zeichnenden Funktion ermittelt werden. Damit die Window-Grösse so festgelegt wird, dass sie bei einem Tic endet und die Funktion enthält, kann die entsprechende Grösse mit Hilfe dieser Funktion berechnet werden.
var TicSpan = 5; var poly = ComputeFunction( windowXmin, windowXmax ); var yMin = GetMinimum( poly ); var yMax = GetMaximum( poly ); var windowYmin = jsg.ScaleToTic( yMin, TicSpan ); var windowYmax = jsg.ScaleToTic( yMax, TicSpan ); jsg.SetWindow( windowXmin, windowYmin, windowXmax, windowYmax );
JsGraph.AngleToRad( angle )
Wenn AngleMeasure = 'grad' ist, wird angle als Winkel in Grad interpretiert und in Radian umgewandelt. Wenn AngleMeasure = 'rad' ist, wird angle zurückgegeben.
JsGraph.DegToRad( angle )
JsGraph.RadToDeg( angle )
Mit der Funtkion DegToRad kann ein Winel von Grad in Radian umgerechnet werden. Mit der Funktion RadToDeg kann ein Winkel von Radian in Grad umgerechnet werden.
JsGraph.ScaleWinX( )
JsGraph.ScaleWinY( )
ScaleWinX und ScaleWinY geben den Skalierungsfaktor der Transformation von Windows- in Viewport-/Canvas-Koordinaten zurück.
Ähnliche Funktionen mit einfacherer Anwenung sind WinToPixX(), WinToPixY(), PixToWinX() und PixToWinY().
Anwendung:
pixelX = spanWinX * jsg.ScaleWinX(); pixelY = spanWinY * jsg.ScaleWinY();
spanWinX = pixelX / jsg.ScaleWinX(); spanWinY = pixelY / jsg.ScaleWinY();
Diese Funktionen sind praktisch, wenn man wissen will, wie viele Pixel lang eine bestimmte Einheit ist oder wenn man wissen will, wie gross in Weltkoordinaten man etwas zeichnen muss, damit es eine bestimmte Anzahl Pixel gross auf dem Viewport/Canvas wird.
Hinweis: Viewport- und Canvas-Koordinaten haben dieselbe Skalierung (Pixel). Sie unterscheiden sich nur im Offset des Viewports. Daher braucht es nur für jede Achse je eine Skalierungs-Funktion zum Umrechnen der Skalierung von Window- in Viewport- oder Canvas-Koordinaten.
Achtung: Wenn bei SetWindow() Xmin > Xmax oder Ymin > Ymax angegeben wird, handelt es sich um eine Spiegel-Transformation. Der Skalierungsfaktor ist jedoch immer positiv.
JsGraph.WinToPixX( winX, scalePix )
JsGraph.WinToPixY( winY, scalePix )
Diese Funktionen sind praktisch, wenn man wissen will, wie viele Pixel lang eine bestimmte Länge in Window-Koordinaten. Vergleiche auch mit den Funktionen ScaleWinX() und ScaleWinY().
Hinweis: Viewport- und Canvas-Koordinaten haben dieselbe Skalierung (Pixel). Sie unterscheiden sich nur im Offset des Viewports. Daher braucht es nur für jede Achse je eine Funktion zum Umrechnen der Skalierung von Window- in Pixel-Koordinaten.
Achtung: Wenn bei SetWindow() Xmin > Xmax oder Ymin > Ymax angegeben wird, handelt es sich um eine Spiegel-Transformation. Der Pixel-Wert ist jedoch immer positiv.
JsGraph.PixToWinX( pixX, scalePix )
JsGraph.PixToWinY( pixY, scalePix )
Diese Funktionen sind praktisch, wenn man wissen will, wie viel man ein Objekt in Window-Koordinaten verschieben muss dass es auf dem Bildschirm pix Pixel verschoben ist. Vergleiche auch mit den Funktionen ScaleWinX() und ScaleWinY().
Hinweis: Viewport- und Canvas-Koordinaten haben dieselbe Skalierung (Pixel). Sie unterscheiden sich nur im Offset des Viewports. Daher braucht es nur für jede Achse je eine Funktion zum Umrechnen der Skalierung von Pixel- in Window-Koordinaten.
Achtung: Wenn bei SetWindow() Xmin > Xmax oder Ymin > Ymax angegeben wird, handelt es sich um eine Spiegel-Transformation. Der Window-Wert ist jedoch immer positiv.
JsGraph.TransWinCnvsX( winX )
JsGraph.TransWinCnvsY( winY )
TransWinCnvsX und TransWinCnvsY transformieren von Windows- in Canvas-Koordinaten. Diese Funktionen werden intern von den Zeichenfunktionen verwendet.
cnvsX = jsg.TransWinCnvsX( winX ); cnvsY = jsg.TransWinCnvsY( winY );
Hinweis: Dank Anti-Aliasing beim Zeichnen können auch Bruchwerte als Canvas-Koordinaten verwendet werden (siehe auch Abbildung).
JsGraph.TransCnvsWinX( cnvsX )
JsGraph.TransCnvsWinY( cnvsY )
TransCnvsWinX und TransCnvsWinY transformieren von Canvas- in Window-Koordinaten. Diese Funktionen sind die Umkehrung der obigen beiden Funktionen.
winX = jsg.TransCnvsWinX( cnvsX ); winY = jsg.TransCnvsWinY( cnvsY );
Hinweis: Dank Anti-Aliasing beim Zeichnen können auch Bruchwerte als Canvas-Koordinaten verwendet werden (siehe auch Abbildung).
JsGraph.TransVpCnvsX( vpX )
JsGraph.TransVpCnvsY( vpY )
TransVpCnvsX und TransVpCnvsY transformieren von Viewport- in Canvas-Koordinaten. Diese Funktionen werden intern von den Zeichenfunktionen verwendet, welche Werte in Viewport-Koordinaten verwenden.
cnvsX = jsg.TransVpCnvsX( vpX ); cnvsY = jsg.TransVpCnvsY( vpY );
Hinweis: Dank Anti-Aliasing beim Zeichnen können auch Bruchwerte als Viewport/Canvas-Koordinaten verwendet werden (siehe auch Abbildung).
JsGraph.TransCnvsVpX( cnvsX )
JsGraph.TransCnvsVpY( cnvsY )
TransCnvsVpX und TransCnvsVpY transformieren von Canvas- in Viewport-Koordinaten. Diese Funktionen sind die Umkehrung der obigen beiden Funktionen.
vpX = jsg.TransCnvsVpX( cnvsX ); vpY = jsg.TransCnvsVpY( cnvsY );
Hinweis: Dank Anti-Aliasing beim Zeichnen können auch Bruchwerte als Viewport/Canvas-Koordinaten verwendet werden (siehe auch Abbildung).
JsGraph.TransWinVpX( winX )
JsGraph.TransWinVpY( winY )
TransWinVpX und TransWinVpY transformieren von Windows- in Viewport-Koordinaten. Diese Funktionen werden intern von einigen Zeichenfunktionen verwendet.
vpX = jsg.TransWinVpX( winX ); vpY = jsg.TransWinVpY( winY );
Hinweis: Dank Anti-Aliasing beim Zeichnen können auch Bruchwerte als Viewport-Koordinaten verwendet werden (siehe auch Abbildung).
JsGraph.TransVpWinX( vpX )
JsGraph.TransVpWinY( vpY )
TransVpWinX und TransVpWinY transformieren von Viewport- in Window-Koordinaten. Diese Funktionen sind die Umkehrung der obigen beiden Funktionen.
winX = jsg.TransVpWinX( vpX ); winY = jsg.TransVpWinY( vpY );
Hinweis: Dank Anti-Aliasing beim Zeichnen können auch Bruchwerte als Viewport-Koordinaten verwendet werden (siehe auch Abbildung).
JsGraph.TransXY( x, y )
Transformiert einen Punkt (x,y) vom aktuellen Koordinatensystem in Canvas-Koordinaten, wobei auch die Objekt-Transformation angewandt wird. Die resultierenden Koordinaten sind im zurückgegebenen Objekt this.CurrTrans in den Properties x und y gespeichert.
var pntCanvas = jsg.TransXY( 123, 456 ); var xCnvs = pntCanvas.x; var yCnvs = pntCanvas.y;
JsGraph.TransPoly( poly )
Transformiert die Koordinaten des Polygons poly vom aktuellen Koordinatensystem in Canvas-Koordinaten, wobei auch die Objekt-Transformation angewandt wird. Die Koordinaten in poly werden mit den neuen Werten überschrieben.
JsGraph.ObjTransXY( x, y )
Transformiert einen Punkt (x,y) über die aktuelle Objekt-Transformation. Die resultierenden Koordinaten sind im zurückgegebenen Objekt this.ObjTrans in den Properties x und y gespeichert.
var newPoint = jsg.ObjTransXY( 123, 456 ); var xNew = newPoint.x; var yNew = newPoint.y;
JsGraph.ObjTransPoly( poly )
Transformiert die Koordinaten des Polygons poly über die aktuelle Objekt-Transformation. Die Koordinaten in poly werden mit den neuen Werten überschrieben.
Im folgenden Beispiel wird ein Spline in ein Polygon umgerechnet, welches die dem Spline entsprechenden Bezier-Segmente enthält. Die Bezier-Punkte werden danach mit der aktuellen Objekt-Transformation transformiert.
// spline: JsgPolygon var spline = CreateSpline( ... ); // SplineCurve() gibt das jsg.WorkPoly zurück, welches die berechneten Bezier-Segmente enthält // mode = 0 -> Spline wird nicht gezeichnet, // es werden nur die nicht transformierten Bezier-Segmente berechnet var workPoly = jsg.SplineCurve( spline, tension, 0 ); // Bezier-Polygon kopieren und transformieren var bezierSegments = JsgPolygon.Copy( workPoly ); jsg.ObjTransPoly( bezierSegments );
Das Polygon bezierSegments enthält die Bezier Stütz- und Kontrollpunkte in folgender Reihenfolge:
poly: [ P1, C1b, C2a, P2, C2b, C3a, P3, C3b, C4a, P4, ... ]
Die Punkte P<i> sind die Stützpunkte der Bezier-Segmente, die Punkte C<i>a und C<i>b sind die zwischen zwei Stützpunkten liegenden Kotrollpunkte. Jeder Stützpunkt P<i>, ausser dem ersten und letzten Punkt des Polygons, hat zwei Kontrollpunkte C<i>a und C<i>b.
JsGraph.IsPointInsideRect( x, y, xmin, xmax, ymin, ymax )
Gibt True zurück, wenn der Punkt (x,y) vollständig innerhalb des Bereiches xmin bis ymax oder auf seiner Kante liegt.
JsGraph.IsPointInsideRect( xArray, yArray, size, xmin, xmax, ymin, ymax )
JsGraph.IsPointInsideRect( poly, xmin, xmax, ymin, ymax )
Gibt True zurück, wenn alle Punkte des Polygons vollständig innerhalb des Bereiches xmin bis ymax oder auf seiner Kante liegen.