Jetpack Compose Academy · Pelajaran

Path, Gradien & Mode Campuran

Buat isian dan goresan yang kompleks.

Pelajaran 2 dari 413 langkah

Path, Gradien & Mode Campuran adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Melampaui Bentuk Sederhana

Garis dan lingkaran memang bagus, tetapi grafik nyata membutuhkan kurva dan isian yang kaya. Kenali Path, gradien, dan mode pencampuran untuk tingkat berikutnya.

Apa Itu Path

Path adalah garis luar yang direkam dan Anda bangun titik demi titik. Anda menggerakkan pena dan membuat garis mengelilingi bentuk, lalu menggambar bentuk yang sudah selesai dalam satu panggilan.

val path = Path()
path.moveTo(0f, 0f)
path.lineTo(100f, 0f)

moveTo dan lineTo

Gunakan moveTo untuk mengangkat pena ke titik awal, lalu gunakan lineTo untuk menggambar segmen lurus. Rangkai keduanya untuk menelusuri poligon apa pun yang Anda inginkan.

path.moveTo(0f, 0f)
path.lineTo(80f, 120f)
path.lineTo(160f, 0f)
path.close()

Kurva dengan quadraticBezierTo

Untuk lengkungan yang halus, gunakan quadraticBezierTo. Titik kontrol menarik garis menjadi kurva, sangat cocok untuk tepi grafik yang lembut.

path.quadraticBezierTo(50f, -40f, 100f, 0f)

Menggambar Path

Setelah selesai dibuat, berikan path kepada drawPath bersama warna atau kuas. Anda dapat mengisinya dengan warna solid atau menggambar garis luarnya menggunakan gaya Stroke.

drawPath(path = path, color = Color.Blue)

Kenali Brush

Brush menjelaskan cara suatu area dicat. Alih-alih warna datar, kuas dapat membentangkan gradien halus di seluruh bentuk.

Gradien Linear

Gunakan Brush.linearGradient untuk mencampurkan warna sepanjang garis lurus. Berikan daftar warna dan lihat warnanya memudar dari satu warna ke warna berikutnya.

val brush = Brush.linearGradient(
    listOf(Color.Cyan, Color.Magenta)
)
drawRect(brush = brush)

Gradien Radial

Gunakan Brush.radialGradient untuk mencampurkan warna yang menyebar dari titik tengah. Ini ideal untuk sorotan, tombol lembut, dan bola bercahaya.

val glow = Brush.radialGradient(
    listOf(Color.White, Color.Blue)
)

Gradien Sapuan

Brush.sweepGradient memutar warna mengelilingi titik tengah. Inilah rahasia di balik cincin kemajuan berwarna-warni dan kenop pelangi.

val sweep = Brush.sweepGradient(
    listOf(Color.Red, Color.Yellow, Color.Red)
)

Kenali BlendMode

BlendMode menentukan cara bentuk baru bercampur dengan gambar yang sudah ada. Multiply menggelapkan, Screen mencerahkan, dan Plus menambahkan cahaya.

drawCircle(
    color = Color.Yellow,
    blendMode = BlendMode.Multiply
)

Lapisan untuk Efek

Mode pencampuran sangat berguna saat bentuk saling tumpang tindih. Tumpuk dua lingkaran tembus pandang dengan BlendMode.Plus, maka bagian perpotongannya akan tampak lebih terang.

Pemeriksaan Singkat

Kuas mana yang memutar warna mengelilingi titik tengah?

Jawab di pelajaran interaktif

Rangkuman

Sekarang Anda dapat membuat kurva dengan Path, mengisi bentuk dengan gradien linear, radial, dan sapuan, serta menggabungkannya menggunakan mode pencampuran. Saatnya berkreasi! ✨

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Path, Gradien & Mode Campuran” gratis?

Ya — teks lengkap “Path, Gradien & Mode Campuran” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Path, Gradien & Mode Campuran”?

Buat isian dan goresan yang kompleks. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Path, Gradien & Mode Campuran” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy