Matrix Androidban: mi ez, mátrixtípusok és munka transzformációkkal

Mi az a Matrix Androidban?

Matrix (android.graphics.Matrix) — egy Android SDK osztály, amely egy matematikai 3×3-as mátrixot reprezentál, amely kétdimenziós koordináták transzformálására használatos. A Matrix az alapvető építőelem minden grafikus transzformációhoz Androidban — a Canvas mozgatásától és méretezésétől a Bitmap összetett perspektivikus torzításáig.

Ellentétben az iOS-szel, ahol különálló struktúrákat használnak CGAffineTransform (affin) és CATransform3D (3D), az Android az affin és perspektivikus transzformációkat egyetlen Matrix osztályban egyesíti. A 3×3-as mátrix lehetővé teszi mind a szabványos affin műveletek (utolsó sor [0, 0, 1]), mind a perspektivikus torzítások reprezentálását, amikor az utolsó sor tetszőleges értékeket tartalmaz. Ez nagyobb rugalmasságot biztosít, de megköveteli a mátrix matematika megértését.

A Matrix szorosan integrált a Canvas API-val. Amikor a fejlesztő meghívja a canvas.translate(), canvas.scale() vagy canvas.rotate() függvényeket, ezek a metódusok belsőleg módosítják a grafikus kontextus mátrixát. A Canvas aktuális mátrixát a canvas.getMatrix() segítségével lehet lekérni, és egy egyedi mátrixot manuálisan lehet alkalmazni a canvas.setMatrix() vagy canvas.concat() segítségével.

A Matrix transzformáció típusai

Matrix négy alapvető affin transzformációs típust támogat: translate, scale, rotate, skew (ferdeítés). Minden típushoz tartoznak metódusok elő-szorzáshoz (pre), utó-szorzáshoz (post) és beállításhoz (set). A különbség a preTranslate és postTranslate között a mátrixszorzás sorrendjében van, ami befolyásolja a végső transzformációt kombináláskor.

Translate — eltolás

Translate megváltoztatja az összes pont pozícióját a megadott dx, dy eltolással. Pozitív dx jobbra tol, dy — lefelé (az Android képernyő koordináta-rendszerében az Y tengely lefelé irányul). A Translate nem változtatja meg az objektum alakját — csak a pozícióját. Ez a legegyszerűbb és leggyakrabban használt művelet elemek pozicionálására.

Scale — méretezés

Scale megváltoztatja az objektum méretét sx (X mentén) és sy (Y mentén) tényezőkkel. A px, py paraméterek megadják a méretezés referenciapontját (pivot point). Ha px, py nincs megadva, a méretezés a koordináta-rendszer kezdőpontjához (0, 0) képest történik. Ha sx = sy, az objektum egyenletesen méreteződik. A negatív értékek tükrözést hoznak létre.

Rotate — forgatás

Rotate elforgatja az objektumot a megadott szöggel (fokban) a referenciapont (px, py) körül. A pozitív fokérték az óramutató járásával megegyező forgatásnak felel meg (ellentétben az iOS/macOS-szel, ahol a pozitív szög az óramutató járásával ellentétes). Ha px, py nincs megadva, a forgatás a koordináta-rendszer kezdőpontja körül történik.

Skew — ferdeítés

Skew (csúsztatás) deformálja az objektumot az X tengely (kx) vagy Y tengely (ky) mentén történő ferdeítéssel. Az 1.0 érték 45 fokkal ferdeít. A Skew ferdeítési effektusok létrehozására, háromdimenziós nézet szimulálására (pszeudo-3D) és perspektivikus torzításra használatos.

A 3×3-as mátrix szerkezete

Matrix a 3×3-as mátrix elemeit egy belső 9 lebegőpontos értékből álló tömbben tárolja (float[9]). A tárolási sorrend column-major (oszloponként), ami megfelel a szabványos matematikai reprezentációnak. Az egyes elemekhez konstansokon keresztül lehet hozzáférni: Matrix.MSCALE_X, Matrix.MSKEW_Y, Matrix.MTRANS_X és így tovább.

A mátrix elemei

A mátrix a következőképpen szerveződik: az első két oszlop (MSCALE_X, MSKEW_X, MSKEW_Y, MSCALE_Y) felelős a méretezésért, forgatásért és ferdeítésért. A harmadik oszlop (MTRANS_X, MTRANS_Y, MPERSP_2) — az eltolásért és perspektíváért. Affin transzformáció esetén az MPERSP_0 és MPERSP_1 0-val egyenlő, az MPERSP_2 pedig 1-gyel.

A mátrix értékeinek lekéréséhez a getValues(float[] values) használatos, amely egy 9 elemű tömböt tölt fel. Beállításhoz — setValues(float[] values). Ez lehetővé teszi a mátrix közvetlen manipulálását összetett egyedi transzformációkhoz, amelyek túlmutatnak a standard translate, scale, rotate és skew metódusokon.

A mátrix típusának ellenőrzése

Matrix több metódust is kínál az aktuális állapot osztályozására. Az isIdentity() ellenőrzi, hogy a mátrix egységmátrix-e. Az isAffine() — hogy csak affin transzformációkat tartalmaz-e (MPERSP_0 = 0, MPERSP_1 = 0, MPERSP_2 = 1). Ezek az ellenőrzések hasznosak optimalizáláshoz: ha a mátrix egységmátrix, a transzformáció kihagyható.

Alapvető műveletek a Matrix-szal

Matrix több műveleti kategóriát támogat: beállítás (set), elő-szorzás (pre), utó-szorzás (post), konkatenáció (concat), inverzió (invert) és leképezés (map). Minden kategória a saját feladatát oldja meg összetett transzformációk építésekor.

Pre és Post műveletek

preTranslate balról szorozza az aktuális mátrixot az eltolási mátrixszal: result = translate × current. postTranslate jobbról szoroz: result = current × translate. A különbség az alkalmazás sorrendjében van: a pre-műveletek az aktuális transzformációk előtt, a post-műveletek — után kerülnek alkalmazásra. Hasonlóan működik a preScale, postScale, preRotate, postRotate és preSkew, postSkew is.

Inverzió és konkatenáció

invert(Matrix inverse) kiszámítja az inverz mátrixot. Ha a forrásmátrix szinguláris (a determináns nulla), false értéket ad vissza. concat(Matrix other) megszorozza az aktuális mátrixot a megadott mátrixszal: set = set × other. Fordított sorrendhez használja a setConcat(other, this) függvényt.

Map — alkalmazás pontokra és téglalapokra

mapRect(RectF rect) transzformálja a téglalapot és visszaadja az eredményt egy új RectF-ben. mapPoints(float[] dst, float[] src) transzformálja a pontok tömbjét. mapVectors(float[] dst, float[] src) transzformálja a vektorokat — az eltolás (translate) figyelembevétele nélkül. A mapRect hasznos a bounding box kiszámításához transzformáció után.

Alkalmazás Canvas-ban és Bitmap-ben

Matrix aktívan használatos az Android grafika két kulcsfontosságú forgatókönyvében: Canvas transzformáció és Bitmap transzformáció. Mindkét esetben a Matrix határozza meg, hogy a grafikus kimenet hogyan változik meg.

Canvas transzformáció Matrix segítségével

Canvas biztosítja a canvas.setMatrix(matrix) metódust az aktuális mátrix teljes cseréjéhez és a canvas.concat(matrix) metódust az aktuális transzformáció megszorzásához a megadottal. A Matrix alkalmazása után minden további rajzolás — drawBitmap, drawRect, drawPath hívások — a transzformált koordináta-rendszerben történik. A Canvas emellett saját mentett állapotok vermét is tárolja a save() és restore() segítségével.

Bitmap transzformáció Matrix segítségével

Bitmap.createBitmap(Bitmap source, int x, int y, int width, int height, Matrix matrix, boolean filter) létrehoz egy új Bitmap-et a megadott transzformáció alkalmazásával. Ez egy hatékony eszköz méretezett, elforgatott vagy deformált képmásolatok létrehozására az eredeti Bitmap elvesztése nélkül. A filter paraméter szabályozza a simítást pixel interpolációnál.

setPolyToPoly — perspektivikus transzformációk

setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) — a Matrix egyedi képessége, amelynek nincs közvetlen analógja a CGAffineTransform-ben. Kiszámítja azt a mátrixot, amely a megadott pontokat az egyik sokszögből a másikba transzformálja. pointCount = 4 esetén egy teljes perspektivikus (projektív) transzformáció jön létre, amely lehetővé teszi a Bitmap alkalmazását perspektivikus torzítással.

Kód példák Kotlin-ban

Nézzünk gyakorlati példákat a Matrix használatára grafikus transzformációhoz egy Android alkalmazásban Kotlin-ban.

Alapvető affin transzformációk

A példa létrehoz egy Matrix-ot kombinált transzformációhoz: eltolás (100, 50), 1.5-szeres méretezés és 45 fokos forgatás. A postTranslate használata a preRotate és preScale után megváltoztatja a műveletek alkalmazási sorrendjét.

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

// Alkalmazás pontokra
val pts = floatArrayOf(0f, 0f, 100f, 100f)
matrix.mapPoints(pts)

// Alkalmazás téglalapra
val rect = RectF(0f, 0f, 200f, 100f)
matrix.mapRect(rect)

Canvas transzformáció save és restore használatával

A példa bemutatja a Matrix alkalmazását Canvas-ra onDraw-ban egy kör forgatásához és méretezéséhez a középpontja körül. A Canvas állapotának mentése és visszaállítása garantálja, hogy a transzformáció nem befolyásolja a későbbi rajzolási elemeket.

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()
}

Perspektivikus torzítás setPolyToPoly segítségével

A példa a setPolyToPoly-t használja a Bitmap perspektivikus torzításának létrehozására. Négy forráspont (az eredeti téglalap sarkai) négy célpontra vannak leképezve, amelyek egy trapézt alkotnak. Az eredmény — egy térben ferde kép effektusa.

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
    )
}