Matrix di Android: apa itu, jenis matriks dan bekerja dengan transformasi

Apa itu Matrix di Android?

Matrix (android.graphics.Matrix) — adalah kelas Android SDK yang merepresentasikan matriks matematika 3×3 yang digunakan untuk mentransformasi koordinat dua dimensi. Matrix adalah blok bangunan fundamental untuk semua transformasi grafis di Android — dari memindahkan dan menskalakan Canvas hingga distorsi perspektif kompleks Bitmap.

Tidak seperti iOS, di mana struktur terpisah CGAffineTransform (affine) dan CATransform3D (3D) digunakan, Android menggabungkan transformasi affine dan perspektif dalam satu kelas Matrix. Matriks 3×3 memungkinkan representasi baik operasi affine standar (baris terakhir [0, 0, 1]) maupun distorsi perspektif ketika baris terakhir berisi nilai arbitrer. Ini memberikan lebih banyak fleksibilitas, tetapi memerlukan pemahaman matematika matriks.

Matrix terintegrasi erat dengan Canvas API. Ketika pengembang memanggil canvas.translate(), canvas.scale() atau canvas.rotate(), metode ini secara internal memodifikasi matriks konteks grafis. Matriks Canvas saat ini dapat diperoleh melalui canvas.getMatrix(), dan matriks kustom dapat diterapkan secara manual melalui canvas.setMatrix() atau canvas.concat().

Jenis transformasi Matrix

Matrix mendukung empat jenis dasar transformasi affine: translate, scale, rotate, skew (miring). Setiap jenis memiliki metode untuk pra-perkalian (pre), pasca-perkalian (post), dan pengaturan (set). Perbedaan antara preTranslate dan postTranslate terletak pada urutan perkalian matriks, yang mempengaruhi transformasi akhir saat dikombinasikan.

Translate — pergeseran

Translate mengubah posisi semua titik dengan pergeseran dx, dy yang diberikan. dx positif menggeser ke kanan, dy — ke bawah (dalam sistem koordinat layar Android sumbu Y mengarah ke bawah). Translate tidak mengubah bentuk objek — hanya posisinya. Ini adalah operasi paling sederhana dan paling sering digunakan untuk memposisikan elemen.

Scale — penskalaan

Scale mengubah ukuran objek dengan faktor sx (sepanjang X) dan sy (sepanjang Y). Parameter px, py menentukan titik referensi penskalaan (pivot point). Jika px, py tidak ditentukan, penskalaan dilakukan relatif terhadap titik asal (0, 0). Saat sx = sy, objek diskalakan secara seragam. Nilai negatif menciptakan pantulan.

Rotate — rotasi

Rotate memutar objek sebesar sudut yang diberikan (dalam derajat) di sekitar titik referensi (px, py). Nilai derajat positif sesuai dengan rotasi searah jarum jam (berlawanan dengan iOS/macOS, di mana sudut positif berlawanan arah jarum jam). Jika px, py tidak ditentukan, rotasi dilakukan di sekitar titik asal.

Skew — pemiringan

Skew (geser) mendistorsi objek dengan memiringkannya sepanjang sumbu X (kx) atau sumbu Y (ky). Nilai 1.0 memiringkan sebesar 45 derajat. Skew digunakan untuk membuat efek kemiringan, simulasi tampilan tiga dimensi (pseudo-3D), dan distorsi perspektif.

Struktur matriks 3×3

Matrix menyimpan elemen matriks 3×3 dalam array internal 9 nilai floating-point (float[9]). Urutan penyimpanan — column-major (per kolom), yang sesuai dengan representasi matematika standar. Akses ke elemen individual dilakukan melalui konstanta: Matrix.MSCALE_X, Matrix.MSKEW_Y, Matrix.MTRANS_X dan seterusnya.

Elemen matriks

Matriks diorganisir sebagai berikut: dua kolom pertama (MSCALE_X, MSKEW_X, MSKEW_Y, MSCALE_Y) bertanggung jawab untuk penskalaan, rotasi, dan pemiringan. Kolom ketiga (MTRANS_X, MTRANS_Y, MPERSP_2) — untuk pergeseran dan perspektif. Untuk transformasi affine, MPERSP_0 dan MPERSP_1 sama dengan 0, dan MPERSP_2 sama dengan 1.

Untuk mendapatkan nilai matriks digunakan getValues(float[] values), yang mengisi array 9 elemen. Untuk pengaturan — setValues(float[] values). Ini memungkinkan manipulasi langsung matriks untuk transformasi kustom kompleks yang melampaui metode standar translate, scale, rotate, dan skew.

Memeriksa jenis matriks

Matrix menyediakan beberapa metode untuk mengklasifikasikan status saat ini. isIdentity() memeriksa apakah matriks adalah identitas. isAffine() — apakah hanya berisi transformasi affine (MPERSP_0 = 0, MPERSP_1 = 0, MPERSP_2 = 1). Pemeriksaan ini berguna untuk optimasi: jika matriks adalah identitas, transformasi dapat dilewati.

Operasi dasar dengan Matrix

Matrix mendukung beberapa kategori operasi: pengaturan (set), pra-perkalian (pre), pasca-perkalian (post), konkatenasi (concat), inversi (invert), dan pemetaan (map). Setiap kategori memecahkan tugasnya dalam membangun transformasi kompleks.

Operasi Pre dan Post

preTranslate mengalikan matriks saat ini di sisi kiri dengan matriks pergeseran: result = translate × current. postTranslate mengalikan di sisi kanan: result = current × translate. Perbedaannya terletak pada urutan penerapan: operasi pre diterapkan sebelum transformasi saat ini, operasi post — setelahnya. preScale, postScale, preRotate, postRotate dan preSkew, postSkew bekerja dengan cara yang sama.

Inversi dan konkatenasi

invert(Matrix inverse) menghitung matriks invers. Jika matriks sumber degenerasi (determinannya nol), false dikembalikan. concat(Matrix other) mengalikan matriks saat ini dengan matriks yang diberikan: set = set × other. Untuk urutan terbalik, gunakan setConcat(other, this).

Map — penerapan ke titik dan persegi panjang

mapRect(RectF rect) mentransformasi persegi panjang dan mengembalikan hasilnya dalam RectF baru. mapPoints(float[] dst, float[] src) mentransformasi array titik. mapVectors(float[] dst, float[] src) mentransformasi vektor — tanpa memperhitungkan pergeseran (translate). mapRect berguna untuk menghitung bounding box setelah transformasi.

Penerapan di Canvas dan Bitmap

Matrix digunakan secara aktif dalam dua skenario utama grafis Android: transformasi Canvas dan transformasi Bitmap. Dalam kedua kasus, Matrix menentukan bagaimana output grafis akan diubah.

Transformasi Canvas melalui Matrix

Canvas menyediakan metode canvas.setMatrix(matrix) untuk penggantian lengkap matriks saat ini dan canvas.concat(matrix) untuk perkalian transformasi saat ini dengan yang diberikan. Setelah penerapan Matrix, semua penggambaran selanjutnya — panggilan drawBitmap, drawRect, drawPath — dilakukan dalam sistem koordinat yang telah ditransformasi. Canvas juga menyimpan tumpukan status yang disimpan melalui save() dan restore().

Transformasi Bitmap melalui Matrix

Bitmap.createBitmap(Bitmap source, int x, int y, int width, int height, Matrix matrix, boolean filter) membuat Bitmap baru dengan penerapan transformasi yang diberikan. Ini adalah alat yang kuat untuk membuat salinan gambar yang diskalakan, diputar, atau didistorsi tanpa kehilangan Bitmap asli. Parameter filter mengontrol penghalusan saat interpolasi piksel.

setPolyToPoly — transformasi perspektif

setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) — kemampuan unik Matrix, tanpa analog langsung di CGAffineTransform. Ini menghitung matriks yang mentransformasi titik-titik yang diberikan dari satu poligon ke poligon lainnya. Pada pointCount = 4, transformasi perspektif (projective) penuh dibuat, memungkinkan penerapan Bitmap dengan distorsi perspektif.

Contoh kode di Kotlin

Mari kita lihat contoh praktis penggunaan Matrix untuk transformasi grafis di aplikasi Android dalam Kotlin.

Transformasi affine dasar

Contoh membuat Matrix untuk transformasi gabungan: pergeseran sebesar (100, 50), penskalaan 1.5 kali, dan rotasi 45 derajat. Penggunaan postTranslate setelah preRotate dan preScale mengubah urutan penerapan operasi.

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

// Terapkan ke titik
val pts = floatArrayOf(0f, 0f, 100f, 100f)
matrix.mapPoints(pts)

// Terapkan ke persegi panjang
val rect = RectF(0f, 0f, 200f, 100f)
matrix.mapRect(rect)

Transformasi Canvas dengan save dan restore

Contoh mendemonstrasikan penerapan Matrix ke Canvas di onDraw untuk memutar dan menskalakan lingkaran di sekitar pusatnya. Menyimpan dan memulihkan status Canvas menjamin bahwa transformasi tidak akan mempengaruhi elemen penggambaran berikutnya.

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

Distorsi perspektif melalui setPolyToPoly

Contoh menggunakan setPolyToPoly untuk membuat distorsi perspektif Bitmap. Empat titik sumber (sudut persegi panjang asli) dipetakan ke empat titik target yang membentuk trapesium. Hasilnya — efek gambar yang dimiringkan dalam ruang.

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