Beschreibung

Die Matrix-Klasse stellt eine Transformationsmatrix dar, die festlegt, wie Punkte eines Koordinatenraums einem anderen Koordinatenraum zugeordnet sind.

Sie können wie folgt verschiedene grafische Transformationen an einem Anzeigeobjekt durchführen:

  • Festlegen der Eigenschaften eines Matrix-Objekts
  • Anwenden dieses Matrix-Objekts auf die matrix-Eigenschaft eines Transform-Objekts
  • Anwenden des Transform-Objekts als transform-Eigenschaft des Anzeigeobjekts

Die verfügbaren Transformationsfunktionen sind Schieben (x- und y-Neupositionierung), Drehen und Skalieren.

Transformationsmatrizen

Diese Transformationsfunktionen werden als affine Transformationen bezeichnet. Bei affinen Transformationen bleiben Linien bei der Transformation gerade, sodass Parallelen auch parallel bleiben.

Ein Transformationsmatrixobjekt ist eine 3 x 3-Matrix mit folgendem Inhalt:

| a c tx |
| b d ty |
| u v w  |

In herkömmlichen Transformationsmatrizen werden zusätzliche Funktionen über die Eigenschaften u, v und w bereitgestellt. Die Matrix-Klasse bezieht sich nur auf den zweidimensionalen Raum. Entsprechend wird immer davon ausgegangen, dass die Eigenschaftswerte u und v 0,0 betragen und dass der Eigenschaftswert w 1,0 beträgt. Die effektiven Werte der Matrix lauten wie folgt:

| a c tx |
| b d ty |
| 0 0 1  |

Syntax

new flwebgl.geom.Matrix(values)

Parameter

NameTypBeschreibung
valuesZahl[](optional) Ein Array, das die Werte der Matrix im Format [a b c d tx ty] definiert. Wenn nicht angegeben, ist die Matrix auf Identität eingestellt.

Methoden

clone()

Beschreibung

    Diese Methode gibt einen Klon der Matrix-Instanz zurück

Rückgabewerte

  • Ein Klon der Matrix-Instanz.
  • Typ - Matrix  

concat(matrix)

Beschreibung

    Diese Methode verkettet eine bereitgestellte Matrix mit der aktuellen Matrix und kombiniert auf diese Weise die geometrischen Effekte der beiden Matrizen.

Parameter

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix  

Beispiel

In diesem Beispiel wird das Drehen und Skalieren einer Matrix verkettet.

 
NameTypBeschreibung
matrixMatrix
Die zu multiplizierende Matrix
var m1 = new flwebgl.geom.Matrix();
m1.rotate(45 * Math.PI / 180);

var m2 = new flwebgl.geom.Matrix();
m2.scale(2, 2);

m1.concat(m2);

copy(matrix)

Beschreibung

    Diese Methode kopiert die angegebene Matrix in diese Matrix.

Parameter

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix  
NameTypBeschreibung
matrixMatrixDie Matrix, aus der Eigenschaften kopiert werden sollen

equals(mat)

Beschreibung

    Diese Methode prüft, ob die angegebene Matrix dieselben Werte aufweist wie diese Instanz.

Parameter

Rückgabewerte

  • Typ - Boolescher Wert
NameTypBeschreibung
matMatrixDie zu vergleichende Matrix

getValues()

Beschreibung

    Diese Methode gibt die Werte der Elemente in der Matrix zurück.

Rückgabewerte

  • Ein Array das die Werte der Matrix im Format [a b c d tx ty] definiert.
  • Typ - Zahl[]

Beispiel

In diesem Beispiel werden die Werte einer Matrix ermittelt und so angepasst, dass sie um den Faktor 0,5 geneigt wird.

var m = new flwebgl.geom.Matrix();
var arr = m.getValues();
arr[1] = 0.5;
m.setValues(arr);

Identität()

Beschreibung

    Diese Methode definiert die Matrix als Identitätsmatrix.

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix

Umkehren()

Beschreibung

    Diese Methode invertiert die Matrix. Bei der invertierten Matrix handelt es sich um die umgekehrte Transformation.

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix

isIdentity()

Beschreibung

    Diese Methode gibt „true“ aus, wenn es sich bei der Matrix um eine Identitätsmatrix handelt.

Rückgabewerte

  • Typ - Boolescher Wert

rotate(angle)

Beschreibung

    Diese Methode wendet eine Drehung auf die Matrix an.

Parameter

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix

Beispiel

Dieses Beispiel erstellt eine neue Matrix-Instanz, die für die Identitätsmatrix gestartet wird und diese um 45 Grad dreht.

NameTypBeschreibung
angleZahlDer Winkel im Bogenmaß. Um Gradzahlen zu verwenden, multiplizieren Sie mit Math.PI/180.
var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

Beschreibung

    Diese Methode wendet eine Skalierung auf die Matrix an.

Parameter

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix

Beispiel

In diesem Beispiel wird eine neue Matrix-Instanz erstellt, die zur Identifizierung der Matrix gestartet wird und sie mit einem Faktor von 2 sowohl horizontal als auch vertikal skaliert.

NameTypBeschreibung
xZahlDer horizontale Skalierungsfaktor.
yZahlDer vertikale Skalierungsfaktor.
var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

setValues(values)

Beschreibung

    Diese Methode legt die Werte der Elemente in der Matrix fest.

Parameter

Beispiel

Siehe Beispiel unter der Funktion getValues().

NameTypBeschreibung
values
Zahl[]Ein Array das die Werte der Matrix im Format [a b c d tx ty] definiert.

transformPoint(point)

Beschreibung

    Diese Methode transformiert einen Punkt entsprechend dieser Matrix.

Parameter

Rückgabewerte

  • Der transformierte Punkt.
  • Typ - Punkt
NameTypBeschreibung
pointPointDer zu transformierende Punkt.

transformRect(rect)

Beschreibung

    Diese Methode transformiert alle vier Punkte des Rechtecks entsprechend dieser Matrix.

Parameter

Rückgabewerte

  • Das transformierte Rechteck.
  • Typ - Rechteck
NameTypBeschreibung
rectRect
Das zu transformierende Rechteck.

translate(dx, dy)

Beschreibung

    Diese Methode übersetzt die Matrix für die x- und y-Achse.

Parameter

Rückgabewerte

  • Diese Matrix. Nützlich zum Verketten von Methodenaufrufen.
  • Typ - Matrix
NameTypBeschreibung
dxZahlDie Verschiebung entlang der x -Achse nach rechts.
dyZahlDie Verschiebung entlang der y -Achse nach unten.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie