Matrix in Android: wat is het, soorten matrices en werken met transformaties

Wat is Matrix in Android?

Matrix (android.graphics.Matrix) — is een Android SDK-klasse die een wiskundige 3×3-matrix vertegenwoordigt, gebruikt voor het transformeren van tweedimensionale coördinaten. Matrix is de fundamentele bouwsteen voor alle grafische transformaties in Android — van het verplaatsen en schalen van Canvas tot complexe perspectivische vervormingen van Bitmap.

In tegenstelling tot iOS, waar afzonderlijke structuren CGAffineTransform (affiene) en CATransform3D (3D) worden gebruikt, combineert Android affiene en perspectivische transformaties in één klasse Matrix. De 3×3-matrix maakt het mogelijk zowel standaard affiene bewerkingen (laatste rij [0, 0, 1]) als perspectivische vervormingen weer te geven wanneer de laatste rij willekeurige waarden bevat. Dit biedt meer flexibiliteit, maar vereist inzicht in de wiskunde van matrices.

Matrix is nauw geïntegreerd met Canvas API. Wanneer een ontwikkelaar canvas.translate(), canvas.scale() of canvas.rotate() aanroept, wijzigen deze methoden intern de matrix van de grafische context. De huidige matrix van Canvas kan worden verkregen via canvas.getMatrix() en een aangepaste matrix kan handmatig worden toegepast via canvas.setMatrix() of canvas.concat().

Soorten Matrix-transformaties

Matrix ondersteunt vier basistypen affiene transformaties: translate, scale, rotate, skew (kantelen). Elk type heeft methoden voor pre-vermenigvuldiging (pre), post-vermenigvuldiging (post) en instellen (set). Het verschil tussen preTranslate en postTranslate zit in de volgorde van matrixvermenigvuldiging, wat de uiteindelijke transformatie bij combinatie beïnvloedt.

Translate — verplaatsing

Translate wijzigt de positie van alle punten met een gegeven verplaatsing dx, dy. Positieve dx verplaatst naar rechts, dy — naar beneden (in het Android-schermcoördinatensysteem is de Y-as naar beneden gericht). Translate verandert de vorm van het object niet — alleen de positie. Dit is de eenvoudigste en meest gebruikte bewerking voor het positioneren van elementen.

Scale — schalen

Scale wijzigt de grootte van het object met factoren sx (langs X) en sy (langs Y). De parameters px, py geven het referentiepunt voor schalen (pivot point) aan. Als px, py niet zijn opgegeven, wordt schalen uitgevoerd ten opzichte van de oorsprong (0, 0). Bij sx = sy wordt het object uniform geschaald. Negatieve waarden creëren een spiegeling.

Rotate — roteren

Rotate roteert het object over een gegeven hoek (in graden) rond het referentiepunt (px, py). Een positieve graadwaarde komt overeen met rotatie met de klok mee (in tegenstelling tot iOS/macOS, waar een positieve hoek tegen de klok in is). Als px, py niet zijn opgegeven, wordt rotatie uitgevoerd rond de oorsprong.

Skew — kantelen

Skew (schuiven) vervormt het object door het te kantelen langs de X-as (kx) of Y-as (ky). Een waarde van 1.0 kantelt 45 graden. Skew wordt gebruikt voor het maken van kantel effecten, het simuleren van een driedimensionaal aanzicht (pseudo-3D) en perspectivische vervorming.

Structuur van de 3×3-matrix

Matrix slaat de elementen van de 3×3-matrix op in een interne array van 9 drijvende-kommawaarden (float[9]). De opslagvolgorde is column-major (per kolom), wat overeenkomt met de standaard wiskundige weergave. Toegang tot afzonderlijke elementen gebeurt via constanten: Matrix.MSCALE_X, Matrix.MSKEW_Y, Matrix.MTRANS_X enzovoort.

Elementen van de matrix

De matrix is als volgt georganiseerd: de eerste twee kolommen (MSCALE_X, MSKEW_X, MSKEW_Y, MSCALE_Y) zijn verantwoordelijk voor schalen, roteren en kantelen. De derde kolom (MTRANS_X, MTRANS_Y, MPERSP_2) — voor verplaatsing en perspectief. Voor een affiene transformatie zijn MPERSP_0 en MPERSP_1 gelijk aan 0, en MPERSP_2 is gelijk aan 1.

Voor het verkrijgen van matrixwaarden wordt getValues(float[] values) gebruikt, dat een array van 9 elementen vult. Voor instellen — setValues(float[] values). Dit maakt directe manipulatie van de matrix mogelijk voor complexe aangepaste transformaties die verder gaan dan de standaardmethoden translate, scale, rotate en skew.

Controleren van het matrixtype

Matrix biedt verschillende methoden voor het classificeren van de huidige toestand. isIdentity() controleert of de matrix eenheidsmatrix is. isAffine() — of deze alleen affiene transformaties bevat (MPERSP_0 = 0, MPERSP_1 = 0, MPERSP_2 = 1). Deze controles zijn nuttig voor optimalisatie: als de matrix eenheidsmatrix is, kan de transformatie worden overgeslagen.

Basishandelingen met Matrix

Matrix ondersteunt verschillende categorieën bewerkingen: instellen (set), pre-vermenigvuldiging (pre), post-vermenigvuldiging (post), concatenatie (concat), inversie (invert) en mapping (map). Elke categorie lost zijn eigen taak op bij het bouwen van complexe transformaties.

Pre- en Post-bewerkingen

preTranslate vermenigvuldigt de huidige matrix aan de linkerkant met de verplaatsingsmatrix: result = translate × current. postTranslate vermenigvuldigt aan de rechterkant: result = current × translate. Het verschil zit in de toepassingsvolgorde: pre-bewerkingen worden vóór de huidige transformaties toegepast, post-bewerkingen — erna. preScale, postScale, preRotate, postRotate en preSkew, postSkew werken op dezelfde manier.

Inversie en concatenatie

invert(Matrix inverse) berekent de inverse matrix. Als de bronmatrix gedegenereerd is (determinant is nul), wordt false geretourneerd. concat(Matrix other) vermenigvuldigt de huidige matrix met de doorgegeven matrix: set = set × other. Gebruik setConcat(other, this) voor omgekeerde volgorde.

Map — toepassen op punten en rechthoeken

mapRect(RectF rect) transformeert de rechthoek en retourneert het resultaat in een nieuwe RectF. mapPoints(float[] dst, float[] src) transformeert een array van punten. mapVectors(float[] dst, float[] src) transformeert vectoren — zonder rekening te houden met verplaatsing (translate). mapRect is handig voor het berekenen van de bounding box na transformatie.

Toepassing in Canvas en Bitmap

Matrix wordt actief gebruikt in twee belangrijke scenario's van Android-graphics: Canvas-transformatie en Bitmap-transformatie. In beide gevallen bepaalt Matrix hoe de grafische uitvoer wordt gewijzigd.

Canvas-transformatie via Matrix

Canvas biedt methoden canvas.setMatrix(matrix) voor volledige vervanging van de huidige matrix en canvas.concat(matrix) voor vermenigvuldiging van de huidige transformatie met de doorgegeven matrix. Na toepassing van Matrix wordt al het daaropvolgende tekenwerk — aanroepen van drawBitmap, drawRect, drawPath — uitgevoerd in het getransformeerde coördinatensysteem. Canvas bewaart ook zijn eigen stapel opgeslagen toestanden via save() en restore().

Bitmap-transformatie via Matrix

Bitmap.createBitmap(Bitmap source, int x, int y, int width, int height, Matrix matrix, boolean filter) maakt een nieuwe Bitmap met toepassing van de gegeven transformatie. Dit is een krachtig hulpmiddel voor het maken van geschaalde, geroteerde of vervormde kopieën van afbeeldingen zonder verlies van de originele Bitmap. De parameter filter regelt de afvlakking bij pixelinterpolatie.

setPolyToPoly — perspectivische transformaties

setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) — een unieke mogelijkheid van Matrix, zonder directe analoog in CGAffineTransform. Het berekent een matrix die gegeven punten van de ene veelhoek naar de andere transformeert. Bij pointCount = 4 wordt een volledige perspectivische (projectieve) transformatie gecreëerd, waarmee Bitmap met perspectivische vervorming kan worden toegepast.

Codevoorbeelden in Kotlin

Laten we praktische voorbeelden bekijken van het gebruik van Matrix voor grafische transformatie in een Android-applicatie in Kotlin.

Basis affiene transformaties

Het voorbeeld maakt een Matrix voor een gecombineerde transformatie: verplaatsing van (100, 50), 1.5 keer schalen en rotatie van 45 graden. Het gebruik van postTranslate na preRotate en preScale verandert de volgorde van toepassing van bewerkingen.

val matrix = Matrix()
matrix.preScale(1.5f, 1.5f)
matrix.preRotate(45f)
matrix.postTranslate(100f, 50f)

// Toepassen op punten
val pts = floatArrayOf(0f, 0f, 100f, 100f)
matrix.mapPoints(pts)

// Toepassen op rechthoek
val rect = RectF(0f, 0f, 200f, 100f)
matrix.mapRect(rect)

Canvas-transformatie met save en restore

Het voorbeeld demonstreert toepassing van Matrix op Canvas in onDraw voor het roteren en schalen van een cirkel rond zijn middelpunt. Het opslaan en herstellen van de Canvas-toestand garandeert dat de transformatie geen invloed heeft op volgende teken elementen.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    val cx = width / 2f
    val cy = height / 2f
    val radius = 100f

    canvas.save()
    val matrix = Matrix()
    matrix.postTranslate(cx, cy)
    matrix.postRotate(30f)
    matrix.postScale(1.2f, 1.2f)
    canvas.concat(matrix)

    val paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.FILL
    }
    canvas.drawCircle(0f, 0f, radius, paint)
    canvas.restore()
}

Perspectivische vervorming via setPolyToPoly

Het voorbeeld gebruikt setPolyToPoly om een perspectivische vervorming van Bitmap te creëren. Vier bronpunten (hoeken van de originele rechthoek) worden gemapt op vier doelpunten die een trapezium vormen. Het resultaat — een effect van een in de ruimte gekantelde afbeelding.

fun applyPerspective(
    bitmap: Bitmap,
    skew: Float
): Bitmap {
    val w = bitmap.width.toFloat()
    val h = bitmap.height.toFloat()

    val src = floatArrayOf(0f, 0f, w, 0f,
                         0f, h, w, h)
    val dst = floatArrayOf(skew, 0f, w - skew, 0f,
                         0f, h, w, h)

    val matrix = Matrix()
    matrix.setPolyToPoly(src, 0, dst, 0, 4)

    return Bitmap.createBitmap(
        bitmap, 0, 0,
        w.toInt(), h.toInt(),
        matrix, true
    )
}