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
Name | Typ | Beschreibung |
---|---|---|
values | Zahl[] | (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.
Name | Typ | Beschreibung |
---|---|---|
matrix | Matrix | 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
Name | Typ | Beschreibung |
---|---|---|
matrix | Matrix | Die 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
Name | Typ | Beschreibung |
---|---|---|
mat | Matrix | Die 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.
Name | Typ | Beschreibung |
---|---|---|
angle | Zahl | Der 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.
Name | Typ | Beschreibung |
---|---|---|
x | Zahl | Der horizontale Skalierungsfaktor. |
y | Zahl | Der 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().
Name | Typ | Beschreibung |
---|---|---|
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
Name | Typ | Beschreibung |
---|---|---|
point | Point | Der 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
Name | Typ | Beschreibung |
---|---|---|
rect | Rect | 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
Name | Typ | Beschreibung |
---|---|---|
dx | Zahl | Die Verschiebung entlang der x -Achse nach rechts. |
dy | Zahl | Die Verschiebung entlang der y -Achse nach unten. |