Matrix sa Android: ano ito, mga uri ng matrix at paggawa gamit ang mga transformasyon

Ano ang Matrix sa Android?

Matrix (android.graphics.Matrix) — ay isang Android SDK class na kumakatawan sa isang mathematical 3×3 matrix na ginagamit para sa pag-transform ng two-dimensional coordinates. Ang Matrix ay ang pangunahing building block para sa lahat ng graphic transformations sa Android — mula sa paggalaw at pag-scale ng Canvas hanggang sa kumplikadong perspective distortions ng Bitmap.

Hindi tulad ng iOS, kung saan ginagamit ang magkahiwalay na mga structure na CGAffineTransform (affine) at CATransform3D (3D), pinagsasama ng Android ang affine at perspective na mga transformasyon sa iisang klase na Matrix. Ang 3×3 matrix ay nagbibigay-daan sa representasyon ng parehong standard affine operations (huling row [0, 0, 1]) at perspective distortions kapag ang huling row ay naglalaman ng arbitrary values. Ito ay nagbibigay ng higit na flexibility, ngunit nangangailangan ng pag-unawa sa matematika ng matrix.

Ang Matrix ay malapit na isinama sa Canvas API. Kapag ang developer ay tumawag ng canvas.translate(), canvas.scale() o canvas.rotate(), ang mga method na ito ay panloob na nagmo-modify ng matrix ng graphic context. Ang kasalukuyang matrix ng Canvas ay maaaring makuha sa pamamagitan ng canvas.getMatrix(), at ang custom na matrix ay maaaring manu-manong ilapat sa pamamagitan ng canvas.setMatrix() o canvas.concat().

Mga uri ng transformasyon ng Matrix

Matrix ay sumusuporta sa apat na pangunahing uri ng affine transformations: translate, scale, rotate, skew (pagtagilid). Ang bawat uri ay may mga method para sa pre-multiplication (pre), post-multiplication (post), at set. Ang pagkakaiba sa pagitan ng preTranslate at postTranslate ay nasa pagkakasunod-sunod ng multiplication ng matrix, na nakakaapekto sa huling transformasyon kapag pinagsama.

Translate — paggalaw

Translate ay nagbabago ng posisyon ng lahat ng punto sa ibinigay na paggalaw dx, dy. Ang positibong dx ay gumagalaw pakanan, dy — pababa (sa Android screen coordinate system, ang Y axis ay nakaturo pababa). Ang Translate ay hindi nagbabago ng hugis ng bagay — tanging ang posisyon nito. Ito ang pinakasimple at pinakamadalas na ginagamit na operasyon para sa pagpoposisyon ng mga elemento.

Scale — pag-scale

Scale ay nagbabago ng laki ng bagay na may mga factor na sx (sa kahabaan ng X) at sy (sa kahabaan ng Y). Ang mga parameter na px, py ay tumutukoy sa reference point ng pag-scale (pivot point). Kung hindi tinukoy ang px, py, ang pag-scale ay ginagawa kaugnay sa origin (0, 0). Kapag sx = sy, ang bagay ay pare-parehong na-scale. Ang mga negatibong halaga ay lumilikha ng reflection.

Rotate — pag-ikot

Rotate ay umiikot ng bagay sa ibinigay na anggulo (sa degrees) sa paligid ng reference point (px, py). Ang positibong halaga ng degrees ay tumutugma sa pag-ikot pakanan (kabaligtaran ng iOS/macOS, kung saan ang positibong anggulo ay pakanan). Kung hindi tinukoy ang px, py, ang pag-ikot ay ginagawa sa paligid ng origin.

Skew — pagtagilid

Skew (pag-slide) ay nagde-deform ng bagay sa pamamagitan ng pagtagilid nito sa kahabaan ng X axis (kx) o Y axis (ky). Ang halagang 1.0 ay nagtagilid ng 45 degrees. Ang Skew ay ginagamit para sa paglikha ng mga epekto ng pagtagilid, pag-simulate ng three-dimensional na view (pseudo-3D), at perspective distortion.

Istraktura ng 3×3 matrix

Matrix ay nag-iimbak ng mga elemento ng 3×3 matrix sa isang internal array ng 9 na floating-point values (float[9]). Ang pagkakasunod-sunod ng imbakan ay column-major (bawat column), na tumutugma sa standard na mathematical representation. Ang access sa mga indibidwal na elemento ay ginagawa sa pamamagitan ng constants: Matrix.MSCALE_X, Matrix.MSKEW_Y, Matrix.MTRANS_X at iba pa.

Mga elemento ng matrix

Ang matrix ay nakaayos tulad ng sumusunod: ang unang dalawang column (MSCALE_X, MSKEW_X, MSKEW_Y, MSCALE_Y) ay responsable para sa pag-scale, pag-ikot, at pagtagilid. Ang ikatlong column (MTRANS_X, MTRANS_Y, MPERSP_2) — para sa paggalaw at perspective. Para sa affine transformation, ang MPERSP_0 at MPERSP_1 ay katumbas ng 0, at ang MPERSP_2 ay katumbas ng 1.

Para sa pagkuha ng mga halaga ng matrix ay ginagamit ang getValues(float[] values), na pumupuno ng array ng 9 na elemento. Para sa pag-set — setValues(float[] values). Ito ay nagpapahintulot ng direktang pagmamanipula ng matrix para sa mga kumplikadong custom na transformasyon na lampas sa standard na mga method na translate, scale, rotate, at skew.

Pagsusuri ng uri ng matrix

Matrix ay nagbibigay ng ilang mga method para sa pag-classify ng kasalukuyang estado. Ang isIdentity() ay nagsusuri kung ang matrix ay identity. Ang isAffine() — kung naglalaman lamang ito ng affine transformations (MPERSP_0 = 0, MPERSP_1 = 0, MPERSP_2 = 1). Ang mga pagsusuring ito ay kapaki-pakinabang para sa optimization: kung ang matrix ay identity, ang transformasyon ay maaaring laktawan.

Mga pangunahing operasyon sa Matrix

Matrix ay sumusuporta sa ilang kategorya ng mga operasyon: set, pre-multiplication (pre), post-multiplication (post), concatenation (concat), inversion (invert), at mapping (map). Ang bawat kategorya ay lumulutas ng sarili nitong gawain sa pagbuo ng mga kumplikadong transformasyon.

Pre at Post na mga operasyon

preTranslate ay nagmu-multiply ng kasalukuyang matrix sa kaliwang bahagi ng translation matrix: result = translate × current. postTranslate ay nagmu-multiply sa kanang bahagi: result = current × translate. Ang pagkakaiba ay sa pagkakasunod-sunod ng pag-apply: ang pre-operations ay inilalapat bago ang kasalukuyang mga transformasyon, ang post-operations — pagkatapos. Ang preScale, postScale, preRotate, postRotate at preSkew, postSkew ay gumagana nang pareho.

Inversion at concatenation

invert(Matrix inverse) ay nagkakalkula ng inverse matrix. Kung ang source matrix ay degenerate (ang determinant ay zero), ang false ay ibinabalik. concat(Matrix other) ay nagmu-multiply ng kasalukuyang matrix sa ibinigay na matrix: set = set × other. Para sa baligtad na pagkakasunod-sunod, gamitin ang setConcat(other, this).

Map — paglalapat sa mga punto at parihaba

mapRect(RectF rect) ay nag-transform ng parihaba at ibinabalik ang resulta sa isang bagong RectF. mapPoints(float[] dst, float[] src) ay nag-transform ng array ng mga punto. mapVectors(float[] dst, float[] src) ay nag-transform ng mga vector — nang hindi isinasaalang-alang ang paggalaw (translate). Ang mapRect ay kapaki-pakinabang para sa pagkalkula ng bounding box pagkatapos ng transformasyon.

Paglalapat sa Canvas at Bitmap

Matrix ay aktibong ginagamit sa dalawang pangunahing scenario ng Android graphics: Canvas transformation at Bitmap transformation. Sa parehong kaso, tinutukoy ng Matrix kung paano babaguhin ang graphic output.

Canvas transformation sa pamamagitan ng Matrix

Canvas ay nagbibigay ng mga method na canvas.setMatrix(matrix) para sa kumpletong pagpapalit ng kasalukuyang matrix at canvas.concat(matrix) para sa pag-multiply ng kasalukuyang transformasyon sa ibinigay. Pagkatapos ng pag-apply ng Matrix, lahat ng kasunod na pag-drawing — mga tawag sa drawBitmap, drawRect, drawPath — ay isinasagawa sa transformed coordinate system. Ang Canvas ay nag-iimbak din ng sarili nitong stack ng mga naka-save na estado sa pamamagitan ng save() at restore().

Bitmap transformation sa pamamagitan ng Matrix

Bitmap.createBitmap(Bitmap source, int x, int y, int width, int height, Matrix matrix, boolean filter) ay lumilikha ng bagong Bitmap na may pag-apply ng ibinigay na transformasyon. Ito ay isang makapangyarihang tool para sa paglikha ng mga naka-scale, pinaikot, o na-deform na kopya ng mga imahe nang hindi nawawala ang orihinal na Bitmap. Ang parameter na filter ay kumokontrol ng smoothing sa panahon ng pixel interpolation.

setPolyToPoly — perspective transformations

setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) — isang natatanging kakayahan ng Matrix, walang direktang analog sa CGAffineTransform. Ito ay nagkakalkula ng matrix na nagpapalit ng mga ibinigay na punto mula sa isang polygon patungo sa isa pa. Sa pointCount = 4, ang isang buong perspective (projective) na transformasyon ay nilikha, na nagpapahintulot sa paglalapat ng Bitmap na may perspective distortion.

Mga halimbawa ng code sa Kotlin

Tingnan natin ang mga praktikal na halimbawa ng paggamit ng Matrix para sa graphic transformation sa isang Android application sa Kotlin.

Pangunahing affine transformations

Ang halimbawa ay lumilikha ng Matrix para sa isang pinagsamang transformasyon: paggalaw ng (100, 50), pag-scale ng 1.5 beses, at pag-ikot ng 45 degrees. Ang paggamit ng postTranslate pagkatapos ng preRotate at preScale ay nagbabago ng pagkakasunod-sunod ng pag-apply ng mga operasyon.

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

// Ilapat sa mga puntos
val pts = floatArrayOf(0f, 0f, 100f, 100f)
matrix.mapPoints(pts)

// Ilapat sa parihaba
val rect = RectF(0f, 0f, 200f, 100f)
matrix.mapRect(rect)

Canvas transformation na may save at restore

Ang halimbawa ay nagpapakita ng paglalapat ng Matrix sa Canvas sa onDraw para sa pag-ikot at pag-scale ng isang bilog sa paligid ng sentro nito. Ang pag-save at pag-restore ng Canvas state ay ginagarantiyahan na ang transformasyon ay hindi makakaapekto sa mga kasunod na elemento ng pag-drawing.

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

Perspective distortion sa pamamagitan ng setPolyToPoly

Ang halimbawa ay gumagamit ng setPolyToPoly para sa paglikha ng perspective distortion ng Bitmap. Apat na source points (mga sulok ng orihinal na parihaba) ay nai-map sa apat na target points na bumubuo ng trapezoid. Ang resulta — isang epekto ng imahe na nakatagilid sa espasyo.

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