Path di Android — apa itu, metode pembuatan dan cara menggambar

Apa itu Path di Android?

Path — kelas dari paket android.graphics yang mewakili urutan segmen jalur: garis lurus, kurva Bézier kuadrat dan kubik, busur lingkaran dan elips. Tidak seperti gambar raster, Path hanya menyimpan deskripsi matematis dari kontur, memungkinkan penskalaan tanpa kehilangan kualitas. Ukuran objek Path di memori sebanding dengan jumlah segmen, bukan resolusi layar.

Path bekerja erat dengan Canvas dan Paint. Canvas.drawPath(path, paint) menerima kontur jadi dan menampilkannya sesuai dengan gaya Paint. Pemisahan ini memungkinkan pembangunan kontur kompleks sekali dan penggambaran berulang dengan gaya berbeda — warna, ketebalan garis, atau gradien. Menurut Google I/O 2023, penggunaan ulang Path mengurangi waktu penggambaran View kustom sebesar 25–40%.

Setiap Path terdiri dari urutan titik dan tipe segmen. Titik ditentukan dalam sistem koordinat Canvas, di mana sumbu X mengarah ke kanan, dan sumbu Y — ke bawah. Titik awal kontur ditetapkan dengan metode moveTo, setelah itu setiap segmen berikutnya ditambahkan relatif terhadap titik sebelumnya. Semua operasi pembangunan dilakukan di CPU dan tidak memerlukan GPU hingga saat penggambaran.

Membangun garis: moveTo dan lineTo

Metode moveTo memindahkan pena ke titik yang ditentukan tanpa menggambar garis. Ini menetapkan posisi awal untuk segmen berikutnya. Tanpa moveTo, titik awal Path secara default berada di (0, 0). Setiap kontur kontinu baru memerlukan moveTo terpisah — ini adalah pendekatan standar untuk menggambar beberapa garis independen dalam satu Path.

lineTo — garis lurus

lineTo menambahkan segmen lurus dari posisi pena saat ini ke titik yang ditentukan. Setelah memanggil lineTo, posisi saat ini berpindah ke titik akhir segmen. Urutan panggilan lineTo membuat garis patah — polyline. Untuk menutup kontur, digunakan metode close, yang menarik garis lurus dari titik terakhir ke titik awal moveTo terakhir.

rLineTo dan rMoveTo — versi relatif dari metode. Mereka menerima perpindahan dx dan dy dari posisi saat ini, bukan koordinat absolut. rLineTo berguna untuk membangun figur dengan langkah berulang, misalnya kisi dan grid. Metode relatif tidak memerlukan penghitungan ulang koordinat absolut saat memindahkan seluruh kontur.

val path = Path().apply {
    moveTo(100f, 100f)     // titik awal A
    lineTo(300f, 100f)     // A → B
    lineTo(200f, 250f)     // B → C
    close()                    // C → A (tutup)
}

Kurva Bézier: quadTo dan cubicTo

quadTo menambahkan kurva Bézier kuadrat dengan satu titik kontrol. Kurva kuadrat ditentukan oleh tiga titik: awal (posisi saat ini), kontrol (menentukan lengkungan), dan akhir. Titik kontrol tidak terletak pada kurva, tetapi menentukan arah garis singgung di titik awal dan akhir. Jenis kurva ini digunakan untuk pembulatan sederhana dan transisi halus.

cubicTo — kurva Bézier kubik

cubicTo menambahkan kurva Bézier kubik dengan dua titik kontrol, memberikan lebih banyak fleksibilitas dalam membentuk lengkungan. Empat titik menentukan kurva: awal, dua kontrol, dan akhir. Kurva kubik digunakan untuk membangun kontur kompleks, seperti kontur huruf dalam font, grafik fungsi, dan bentuk organik.

Untuk kenyamanan, terdapat versi relatif rQuadTo dan rCubicTo, yang menerima perpindahan dari posisi saat ini. Ini sangat berguna dalam pembuatan kurva secara programatis berdasarkan kenaikan relatif, misalnya saat menggambar gelombang atau sinusoid. Presisi kurva Bézier hanya bergantung pada akurasi perhitungan di CPU — saat digambar, mereka dirasterisasi dengan resolusi subpiksel.

Bentuk siap pakai: lingkaran, persegi panjang, dan busur

addCircle menambahkan lingkaran ke Path sebagai kontur baru. Parameter: koordinat pusat, radius, dan arah putaran (CW — searah jarum jam, CCW — berlawanan). Setelah pemanggilan, posisi pena saat ini tidak berubah — lingkaran ditambahkan sebagai kontur tertutup independen, tidak terkait dengan segmen sebelumnya. Ini memungkinkan menggabungkan bentuk siap pakai dengan garis arbitrer dalam satu Path.

addRect dan addOval

addRect menambahkan persegi panjang yang ditentukan oleh koordinat sudut kiri atas dan kanan bawah. addOval menambahkan elips yang berada di dalam persegi panjang yang ditentukan. Kedua metode mendukung parameter Direction. Untuk sudut membulat, digunakan addRoundRect, yang menerima radius pembulatan untuk semua sudut atau array 8 nilai radius (dua per sudut).

arcTo menambahkan busur lingkaran atau elips. Parameter: persegi panjang pembatas, sudut awal dalam derajat, sudut bukaan, dan flag forceMoveTo. Jika forceMoveTo true, sebelum busur dilakukan moveTo ke titik awal busur, jika tidak, busur terhubung ke posisi saat ini dengan garis lurus. Busur aktif digunakan dalam diagram lingkaran dan indikator kemajuan.

val path = Path().apply {
    addCircle(200f, 200f, 100f, Path.Direction.CW)
    addRect(50f, 50f, 150f, 150f, Path.Direction.CCW)
    addRoundRect(RectF(300f, 100f, 400f, 200f), 15f, 15f, Path.Direction.CW)
}

Operasi Boolean pada kontur (Path Op)

Path.Op — mekanisme operasi Boolean pada dua kontur, tersedia sejak API 19. Operasi DIFFERENCE, INTERSECT, UNION, XOR, dan REVERSE_DIFFERENCE didukung. Hasilnya adalah Path baru yang berisi geometri yang diperoleh setelah menerapkan operasi yang dipilih. Ini memungkinkan pembuatan bentuk kompleks dari figur dasar sederhana tanpa perhitungan manual titik perpotongan.

Penerapan Path Op dalam desain

UNION menggabungkan dua kontur menjadi satu. INTERSECT hanya menyisakan area milik kedua kontur. DIFFERENCE mengurangi kontur kedua dari yang pertama — berguna untuk memotong lubang pada bentuk. XOR menyisakan area milik hanya satu dari kontur. REVERSE_DIFFERENCE mengurangi kontur pertama dari yang kedua.

Metode op menerima dua Path dan operasi, mengembalikan true jika hasilnya tidak kosong. Kompleksitas komputasi operasi tergantung pada jumlah segmen di kedua kontur. Untuk figur sederhana (kurang dari 100 segmen), operasi dijalankan dalam submilidetik. Path Op aktif digunakan di editor gambar, alat desain, dan dalam pembangunan elemen UI kompleks.

val circle = Path().apply { addCircle(0f, 0f, 100f, Path.Direction.CW) }
val square = Path().apply { addRect(RectF(-50f, -50f, 50f, 50f), Path.Direction.CW) }
val result = Path()
result.op(circle, square, Path.Op.DIFFERENCE) // lingkaran dengan lubang persegi

Contoh pembuatan figur kompleks

Mari kita lihat pembuatan ikon kustom hati menggunakan Path. Figur dibangun dari dua busur dan dua garis lurus, membentuk siluet simetris. Kode mendemonstrasikan kombinasi moveTo, cubicTo, dan close untuk mendapatkan kontur yang halus.

class HeartShape {

    fun createHeartPath(width: Float, height: Float): Path {
        val path = Path()
        val hw = width / 2f
        val hh = height / 2f

        path.moveTo(hw, hh + hh * 0.3f)
        path.cubicTo(hw, hh + hh * 0.6f, hw + hw * 0.5f, hh + hh * 0.5f, hw + hw * 0.5f, hh)
        path.cubicTo(hw + hw * 0.5f, hh * 0.5f, hw + hw * 0.2f, 0f, hw, hh * 0.2f)
        path.cubicTo(hw - hw * 0.2f, 0f, hw - hw * 0.5f, hh * 0.5f, hw - hw * 0.5f, hh)
        path.cubicTo(hw - hw * 0.5f, hh + hh * 0.5f, hw, hh + hh * 0.6f, hw, hh + hh * 0.3f)
        path.close()
        return path
    }
}

Kurva kubik cubicTo memungkinkan kontrol presisi atas bentuk setiap setengah hati. Kurva pertama membentuk busur kanan atas, yang kedua — kiri, yang ketiga dan keempat — bagian bawah. Metode close menutup kontur di titik bawah. Pendekatan ini digunakan untuk membuat ikon kustom, logo, dan elemen dekoratif dalam aplikasi.

Untuk menguji bentuk, Anda dapat mengaktifkan sementara penggambaran dengan Paint.Style.STROKE — ini akan menampilkan semua garis bantu dan kurva. Jika kontur terlihat tidak rata, tingkatkan jumlah titik pada kurva atau gunakan PathMeasure untuk mengevaluasi panjang dan keseragaman segmen. PathMeasure menyediakan metrik jalur yang akurat, diperlukan untuk animasi pergerakan sepanjang kontur.