Beschrijving

De klasse Matrix vertegenwoordigt een transformatiematrix die bepaalt hoe punten van de ene coördinatieruimte naar de andere moeten worden toegewezen.

U kunt als volgt verschillende grafische transformaties toepassen op een weergaveobject:

  • Stel de eigenschappen van een Matrix-object in
  • Pas het Matrix-object toe op de matrixeigenschap van een Transform-object
  • Pas het Transform-object toe als transformatie-eigenschap van het weergaveobject.

Deze transformatiefuncties omvatten transleren (positie van x en y wijzigen), roteren en schalen.

Transformatiematrices

Deze transformatietypen samen staan bekend als affiene transformaties. 'Affine'-transformaties behouden rechte lijnen tijdens de transformaties, zodat parallelle lijnen ook parallel blijven.

Een transformatiematrixobject is een 3 x 3 matrix met de volgende inhoud:

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

In traditionele transformatiematrices bieden de eigenschappen u, v en w extra mogelijkheden. De Matrix-klasse kan alleen worden toegepast in een tweedimensionale ruimte. Daarom wordt er altijd van uitgegaan dat de eigenschapswaarden u en v gelijk zijn aan 0.0, en dat de eigenschapswaarde w gelijk is aan 1.0. De effectieve matrixwaarden zijn als volgt:

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

Syntaxis

new flwebgl.geom.Matrix(values)

Parameters

NaamTypeBeschrijving
valuesgetal[](optioneel) Een array waarmee de matrixwaarden worden gedefinieerd in de indeling [a b c d tx ty]. Indien niet opgegeven is de matrix ingesteld als identiteitsmatrix.

Methoden

clone()

Beschrijving

    Deze methode retourneert een kloon van de Matrix-instantie.

Retourneert

  • Een kloon van de Matrix-instantie.
  • Type - Matrix  

concat(matrix)

Beschrijving

    Deze methode voegt de matrix samen met de huidige matrix, zodat de geometrische effecten van de twee matrices worden gecombineerd.

Parameters

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix  

Voorbeeld

In dit voorbeeld wordt een roterende matrix samengevoegd met een schalende matrix.  

NaamTypeBeschrijving
matrixMatrix
De matrix die moet worden vermenigvuldigd
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)

Beschrijving

    Deze methode kopieert de opgegeven matrix naar deze matrix.

Parameters

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix
NaamTypeBeschrijving
matrixMatrixDe matrix waarvan de eigenschappen moeten worden gekopieerd

equals(mat)

Beschrijving

    Deze methode controleert of de opgegeven matrix dezelfde waarden heeft als deze instantie.

Parameters

Retourneert

  • Type - boolean
NaamTypeBeschrijving
matMatrixDe matrix die moet worden vergeleken

getValues()

Beschrijving

    Deze methode retourneert de waarden van de matrixelementen.

Retourneert

  • Een array waarmee de matrixwaarden worden gedefinieerd in de indeling [a b c d tx ty]
  • Type -  getal[]

Voorbeeld

In dit voorbeeld worden de waarden van een matrix opgehaald en gewijzigd, zodat de matrix schuiner wordt met een factor 0,5.

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

identity()

Beschrijving

    Deze methode stelt de matrix in als een identiteitsmatrix.

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix

invert()

Beschrijving

    Deze methode draait de matrix om. De omgekeerde matrix past in feite de tegenovergestelde transformatie toe.

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix

isIdentity()

Beschrijving

    Deze methode geeft de waarde 'true' aan als de matrix een identiteitsmatrix is.

Retourneert

  • Type - boolean

rotate(angle)

Beschrijving

    Deze methode past een rotatietransformatie toe op de matrix.

Parameters

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix

Voorbeeld

In dit voorbeeld wordt een nieuwe Matrix-instantie gestart naar de identiteitsmatrix en vervolgens gedraaid met 45 graden.

NaamTypeBeschrijving
anglegetalDe hoek in radialen Als u graden wilt gebruiken, moet u de waarde vermenigvuldigen met Math.PI/180.
var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

Beschrijving

    Deze methode past een schaaltransformatie toe op de matrix.

Parameters

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix

Voorbeeld

In dit voorbeeld wordt een nieuwe Matrix-instantie gestart naar de identiteitsmatrix en vervolgens zowel horizontaal als verticaal geschaald met een factor 2.

NaamTypeBeschrijving
xgetalDe horizontale schaalfactor.
ygetalDe verticale schaalfactor.
var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

setValues(values)

Beschrijving

    Deze methode stelt de waarden in voor de matrixelementen.

Parameters

Voorbeeld

Zie het voorbeeld voor de functie getValues().

NaamTypeBeschrijving
values
getal[]Een array waarmee de matrixwaarden worden gedefinieerd in de indeling [a b c d tx ty].

transformPoint(point)

Beschrijving

    Deze methode transformeert een punt op basis van deze matrix.

Parameters

Retourneert

  • Het getransformeerde punt.
  • Type - Point
NaamTypeBeschrijving
pointPointHet punt dat moet worden getransformeerd.

transformRect(rect)

Beschrijving

    Deze methode transformeert de vier punten van het Rect-object op basis van deze matrix.

Parameters

Retourneert

  • Het getransformeerde Rect-object.
  • Type - Rect
Het Rect-object dat moet worden getransformeerd.
NaamTypeBeschrijving
rectRect

translate(dx, dy)

Beschrijving

    Deze methode transleert de matrix op de x- en y-as.

Parameters

Retourneert

  • Deze matrix. Handig bij het koppelen van methodeaanroepen.
  • Type - Matrix
NaamTypeBeschrijving
dxgetalDe mate van beweging langs de x-as naar rechts.
dygetalDe mate van beweging langs de y-as.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid