WaBis

walter.bislins.ch

JSG: Abbildungen und Transformationen

Grundlagen : Begriffe | Abbildungen | Pen | Pfade | Flächen

Wenn ein Graph oder eine Funktion zu zeichnen ist, so liegen die Werte in der Regel nicht in Koordinaten vor, welche sich zum Zeichnen auf einen Bereich einer Seite eignen. Auf Webseiten liegt der Koordinatenursprung zudem oben links, die Y-Achse verläuft also nach unten.

Das JsGraph-Modul übernimmt die Transformation eines beliebigen Wertebereiches, Window genannt, auf einen beliebigen Bereich auf der Seite, Viewport genannt.

Ein Viewport ist ein Bereich eines Div-Elementes, Canvas genannt, auf einer Webseite. Der Viewport muss nicht das ganze Canvas ausfüllen. Man kann hintereinander mehrere Viewports definieren, sodass mehrere Graphen auf der Fläche des Canvas nacheinander gezeichnet werden können. Wichtig ist, dass man den Zeichenfunktionen direkt die Funktionwerte übergeben kann, wie sie aus den Berechnungen hervorgehen.

Abbildung von Window nach Viewport

Transformationen

Das JsGraph-Modul verwaltet drei Transformationen. Eine davon ist jeweils aktiv und bestimmt, in welchem Koordinatensystem die Koordinaten der Zeichenfunktionen interpretiert werden sollen. Standardmässig ist die Window-Transformation aktiv. Mit der Funktion SelectTrans() kann aber auch die Viewport- oder die Canvas-Transformation aktiviert werden, um direkt in Viewport- oder Canvas-Koordinaten zeichnen zu können.

Textgrösse, Markergrösse und Liniendicke werden immer in Pixel angegeben, also in Viewport/Canvas-Koordinaten. Dadurch bleibt die Grafik auch nach einer nachträglichen Änderung des Window-Bereiches immer gut ausgezeichnet.

Es existieren eine Reihe von Abbildungs-Funktionen, mit denen Koordinaten von einem System ins andere umgerechnet werden können.

Objekt-Transformation

Zusätzlich zu obigen Abbildungs-Transformationen kann eine Objekt-Transformation definiert werden. Diese Transformation muss vor dem Zeichnen von Objekten definiert werden und wird auf alle nachfolgenden Zeichenfunktionen angewandt. Damit lassen sich Objekte skalieren, rotieren, verschieben und verzerren.

Es gibt folgende Funktionen zum Definieren einer Objekt-Transformation:

ResetTrans() Setzt die Objekt-Transformation zurück (keine Transformation)
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 Transformationsmatrix zur Objekt-Transformation

Für eine Anwendung dieser Funktionen siehe:

Pixel-genaues Zeichnen

JSG: Abbildung

Das JsGraph-Modul bzw. die Grafik-Funktionen des Browsers können zwischen Pixel zeichnen. Wenn z.B. die Mittelachse einer horizontalen Linie mit Strichdicke 1 genau durch die Mitte eines Pixels verläuft, werden genau diese Pixel entsprechend der gesetzten Farbe eingefärbt. Wenn die Mittelachse der Linie jedoch zwischen zwei Pixel zu liegen kommt, so werden die Pixel oberhalb und unterhalb der Achse aufgrund des Anti-Aliasing je zu 50% mit Farbe gefüllt. Wenn man also präzise Linien mit genau 1 Pixel breite zeichnen will, muss man genau wissen, mit welchen Koordinaten diese Linien gezeichnet werden sollen.

Die Grafik rechts zeigt stark vergrössert an einem Beispiel, wie im JsGraph-Modul die verschiedenen Koordinaten-Systeme zu liegen kommen und welche Pixel eingefärbt werden. Für präzise Grafiken ist es wichtig, diese Zusammenhänge zu verstehen.

Vergrösserung der Script-Grafik

Der rot eingerahmte Bereich stellt den Canvas dar mit einer Breite von 20 Pixel und einer Höhe von 15 Pixel. Jedes kleine Rechteck in diesem Bereich stellt ein Pixel auf dem Bildschirm dar. Mit SetViewport() wurde der Viewport an die Stelle (3,3) verschoben und auf die Breite 14 Pixel und Höhe 9 Pixel gesetzt (Bereich innerhalb des dicken blauen Rahmens).

Die Abbildungs-Transformationen des JsGraph-Moduls sind nun derart, dass der Nullpunkt des Viewport-Koordinatensystems in die Mitte des Pixels oben links im Viewport gelegt wird und der Window-Bereich so transformiert wird, dass genau der Bereich innerhalb der dünnen blauen Linie abgedeckt wird. Wenn also ein Rechteck gezeichnet wird, das genau den Window-Bereich umfasst (z.B. mit der Funktion Frame()), so werden die hellblauen Pixel eingefärbt.

Ganzzahlige Viewport-Koordinaten entsprechen immer einem Pixel-Zentrum, da sich der Viewport-Nullpunkt im Zentrum des ersten Pixels oben links des Viewports befindet. In der Grafik zeigen die grau eingefärbten Flächen, welche Pixel beim Zeichnen des Rechtecks im Beispiel-Code eingefärbt wird.

Das obige Bild ist bei einem Browser-Zoom von 1000 der Ausgabe des folgenden Scripts gemacht worden. Ganz klein ist darüber die Ausgabe der aktuellen Browsereinstellung zu sehen. Vergrössere den Zoom des Browsers, um die Auswirkung zu sehen.

Beispiel-Code zur Grafik oben rechts

var jsg = NewGraph2D( { 
  Width: 20+2, Height: 15+2, 
  BorderWidth: 1, BorderColor: 'red', 
  DrawFunc: Graf1 } );

function Graf1( jsg ) {
  jsg.SelectTrans( 'canvas' );
  jsg.SetLineWidth( 0 );
  jsg.SetColor( 'gray' );
  jsg.Grid( 1, 1, false );
  jsg.SetViewport( 3, 3, 14, 9 );
  jsg.SelectTrans( 'viewport' );
  jsg.SetLineWidth( 1 );
  jsg.SetColor( 'blue' );
  jsg.Frame();
  jsg.SetColor( 'black' );
  jsg.RectWH( 4, 3, 6, 3 );
}

Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Freitag, 27. Mai 2016
von wabis