Menggambar pada Objek Canvas

Codelab ini adalah bagian dari kursus Android Lanjutan di Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan, tetapi ini tidak bersifat wajib. Semua codelab kursus tercantum di halaman landing codelab Android Lanjutan di Kotlin.

Codelab ini adalah bagian dari rangkaian yang memandu Anda dalam membuat tampilan kustom, menggambar di kanvas, meng-clipping objek kanvas, dan menggunakan shader untuk efek yang menarik. Sebaiknya pelajari semua codelab secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah.

Codelab dalam seri ini adalah:

• 2.1 Membuat Tampilan Kustom
• 2.2 Gambar pada Objek Canvas
• 2.3 Clipping Objek Canvas
• 2.4 Membuat Efek dengan Shader [TBD]

Pengantar

Di Android, Anda memiliki beberapa teknik yang tersedia untuk menerapkan grafik dan animasi 2D kustom dalam tampilan.

Selain menggunakan drawable, Anda dapat membuat gambar 2D menggunakan metode menggambar class Canvas. Canvas adalah platform gambar 2D yang menyediakan metode untuk menggambar. Hal ini berguna saat aplikasi Anda perlu menggambar ulang secara rutin, karena apa yang dilihat pengguna berubah seiring waktu. Dalam codelab ini, Anda akan mempelajari cara membuat dan menggambar di kanvas yang ditampilkan dalam View.

Jenis operasi yang dapat Anda lakukan di kanvas meliputi:

• Isi seluruh kanvas dengan warna.
• Menggambar bentuk, seperti persegi panjang, busur, dan jalur yang diberi gaya seperti yang ditentukan dalam objek Paint. Objek Paint menyimpan informasi gaya dan warna tentang cara menggambar geometri (seperti garis, persegi panjang, oval, dan jalur), atau misalnya, typeface teks.
• Terapkan transformasi, seperti terjemahan, penskalaan, atau transformasi kustom.
• Klip, yaitu menerapkan bentuk atau jalur ke kanvas untuk menentukan bagian yang terlihat.

• Kanvas menentukan bentuk yang dapat Anda gambar di layar.
• Paint menentukan warna, gaya, font, dan sebagainya, dari setiap bentuk yang Anda gambar.

Cara Anda dapat memikirkan gambar Android (sangat disederhanakan!)

Menggambar di Android atau sistem modern lainnya adalah proses kompleks yang mencakup lapisan abstraksi dan pengoptimalan hingga ke hardware. Cara Android menggambar adalah topik menarik yang telah banyak dibahas, dan detailnya berada di luar cakupan codelab ini.

Dalam konteks codelab ini, dan aplikasinya yang menggambar di kanvas untuk ditampilkan dalam tampilan layar penuh, Anda dapat memikirkannya dengan cara berikut.

1. Anda memerlukan tampilan untuk menampilkan apa yang Anda gambar. Ini bisa menjadi salah satu tampilan yang disediakan oleh sistem Android. Atau, dalam codelab ini, Anda akan membuat tampilan kustom yang berfungsi sebagai tampilan konten untuk aplikasi Anda (MyCanvasView).
2. Tampilan ini, seperti semua tampilan, dilengkapi dengan kanvasnya sendiri (canvas).
3. Untuk cara paling dasar menggambar di kanvas tampilan, Anda mengganti metode onDraw() dan menggambar di kanvasnya.
4. Saat membuat gambar, Anda perlu menyimpan dalam cache apa yang telah Anda gambar sebelumnya. Ada beberapa cara untuk menyimpan data dalam cache, salah satunya adalah dalam bitmap (extraBitmap). Cara lainnya adalah menyimpan histori gambar Anda sebagai koordinat dan petunjuk.
5. Untuk menggambar ke bitmap penyimpanan dalam cache (extraBitmap) menggunakan API gambar kanvas, Anda membuat kanvas penyimpanan dalam cache (extraCanvas) untuk bitmap penyimpanan dalam cache.
6. Kemudian, Anda menggambar di kanvas caching (extraCanvas), yang akan digambar ke bitmap caching (extraBitmap).
7. Untuk menampilkan semua yang digambar di layar, Anda memberi tahu kanvas tampilan (canvas) untuk menggambar bitmap caching (extraBitmap).

Yang harus sudah Anda ketahui

• Cara membuat aplikasi dengan Aktivitas, tata letak dasar, dan menjalankannya menggunakan Android Studio.
• Cara mengaitkan pengendali peristiwa dengan tampilan.
• Cara membuat tampilan kustom.

Yang akan Anda pelajari

• Cara membuat Canvas dan menggambar di atasnya sebagai respons terhadap sentuhan pengguna.

Yang akan Anda lakukan

• Buat aplikasi yang menggambar garis di layar sebagai respons terhadap sentuhan pengguna di layar.
• Merekam peristiwa gerakan, dan sebagai respons, menggambar garis pada kanvas yang ditampilkan dalam tampilan kustom layar penuh di layar.

Aplikasi MiniPaint menggunakan tampilan kustom untuk menampilkan garis sebagai respons terhadap sentuhan pengguna, seperti yang ditunjukkan pada screenshot di bawah.

Langkah 1. Buat project MiniPaint

1. Buat project Kotlin baru bernama MiniPaint yang menggunakan template Empty Activity.
2. Buka file app/res/values/colors.xml dan tambahkan dua warna berikut.

<color name="colorBackground">#FFFF5500</color>
<color name="colorPaint">#FFFFEB3B</color>

3. Buka styles.xml
4. Di induk gaya AppTheme yang diberikan, ganti DarkActionBar dengan NoActionBar. Tindakan ini akan menghapus panel tindakan, sehingga Anda dapat menggambar layar penuh.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Langkah 2. Buat class MyCanvasView

Pada langkah ini, Anda akan membuat tampilan kustom, MyCanvasView, untuk menggambar.

1. Di paket app/java/com.example.android.minipaint, buat New > Kotlin File/Class bernama MyCanvasView.
2. Buat class MyCanvasView memperluas class View dan teruskan context: Context. Terima impor yang disarankan.

import android.content.Context
import android.view.View

class MyCanvasView(context: Context) : View(context) {
}

Langkah 3. Menetapkan MyCanvasView sebagai tampilan konten

Untuk menampilkan apa yang akan Anda gambar di MyCanvasView, Anda harus menyetelnya sebagai tampilan konten MainActivity.

1. Buka strings.xml dan tentukan string yang akan digunakan untuk deskripsi konten tampilan.

<string name="canvasContentDescription">Mini Paint is a simple line drawing app.
   Drag your fingers to draw. Rotate the phone to clear.</string>

2. Buka MainActivity.kt
3. Di onCreate(), hapus setContentView(R.layout.activity_main).
4. Buat instance MyCanvasView.

val myCanvasView = MyCanvasView(this)

5. Di bawahnya, minta layar penuh untuk tata letak myCanvasView. Lakukan ini dengan menyetel flag SYSTEM_UI_FLAG_FULLSCREEN di myCanvasView. Dengan cara ini, tampilan akan mengisi layar sepenuhnya.

myCanvasView.systemUiVisibility = SYSTEM_UI_FLAG_FULLSCREEN

6. Tambahkan deskripsi konten.

myCanvasView.contentDescription = getString(R.string.canvasContentDescription)

7. Di bawahnya, setel tampilan konten ke myCanvasView.

setContentView(myCanvasView)

Catatan: Anda harus mengetahui ukuran tampilan untuk menggambar, tetapi Anda tidak bisa mendapatkan ukuran tampilan di onCreate(), karena ukuran belum ditentukan pada saat ini.

8. Jalankan aplikasi Anda. Anda akan melihat layar yang benar-benar putih, karena kanvas tidak memiliki ukuran dan Anda belum menggambar apa pun.

Langkah 1. Mengganti onSizeChanged()

Metode onSizeChanged() dipanggil oleh sistem Android setiap kali tampilan berubah ukuran. Karena tampilan dimulai tanpa ukuran, metode onSizeChanged() tampilan juga dipanggil setelah Aktivitas pertama kali membuat dan meng-inflate-nya. Oleh karena itu, metode onSizeChanged() ini adalah tempat yang ideal untuk membuat dan menyiapkan kanvas tampilan.

1. Di MyCanvasView, pada tingkat class, tentukan variabel untuk kanvas dan bitmap. Panggil mereka extraCanvas dan extraBitmap. Ini adalah bitmap dan kanvas Anda untuk menyimpan dalam cache apa yang telah digambar sebelumnya.

private lateinit var extraCanvas: Canvas
private lateinit var extraBitmap: Bitmap

2. Tentukan variabel tingkat class backgroundColor untuk warna latar belakang kanvas dan lakukan inisialisasi ke colorBackground yang Anda tentukan sebelumnya.

private val backgroundColor = ResourcesCompat.getColor(resources, R.color.colorBackground, null)

3. Di MyCanvasView, ganti metode onSizeChanged(). Metode callback ini dipanggil oleh sistem Android dengan dimensi layar yang berubah, yaitu dengan lebar dan tinggi baru (yang akan diubah) serta lebar dan tinggi lama (yang akan diubah dari).

override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
   super.onSizeChanged(width, height, oldWidth, oldHeight)
}

4. Di dalam onSizeChanged(), buat instance Bitmap dengan lebar dan tinggi baru, yang merupakan ukuran layar, lalu tetapkan ke extraBitmap. Argumen ketiga adalah konfigurasi warna bitmap. ARGB_8888 menyimpan setiap warna dalam 4 byte dan direkomendasikan.

extraBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)

5. Buat instance Canvas dari extraBitmap dan tetapkan ke extraCanvas.

 extraCanvas = Canvas(extraBitmap)

6. Tentukan warna latar belakang yang akan digunakan untuk mengisi extraCanvas.

extraCanvas.drawColor(backgroundColor)

7. Melihat onSizeChanged(), bitmap dan kanvas baru dibuat setiap kali fungsi dijalankan. Anda memerlukan bitmap baru karena ukurannya telah berubah. Namun, ini adalah kebocoran memori, yang membuat bitmap lama tetap ada. Untuk memperbaikinya, daur ulang extraBitmap sebelum membuat yang berikutnya dengan menambahkan kode ini tepat setelah panggilan ke super.

if (::extraBitmap.isInitialized) extraBitmap.recycle()

Langkah 2. Mengganti onDraw()

Semua pekerjaan gambar untuk MyCanvasView dilakukan di onDraw().

Untuk memulai, tampilkan kanvas, isi layar dengan warna latar belakang yang Anda tetapkan di onSizeChanged().

1. Ganti onDraw() dan gambar konten extraBitmap yang di-cache di kanvas yang terkait dengan tampilan. Metode drawBitmap() Canvas hadir dalam beberapa versi. Dalam kode ini, Anda memberikan bitmap, koordinat x dan y (dalam piksel) sudut kiri atas, dan null untuk Paint, karena Anda akan menyetelnya nanti.

override fun onDraw(canvas: Canvas) {
   super.onDraw(canvas)
canvas.drawBitmap(extraBitmap, 0f, 0f, null)
}

Perhatikan bahwa kanvas yang diteruskan ke onDraw() dan digunakan oleh sistem untuk menampilkan bitmap berbeda dengan kanvas yang Anda buat dalam metode onSizeChanged() dan yang Anda gunakan untuk menggambar pada bitmap.

Catatan: Sistem koordinat 2D yang digunakan untuk menggambar di Canvas adalah dalam piksel, dan asal (0,0) berada di sudut kiri atas Canvas.

2. Jalankan aplikasi Anda. Anda akan melihat seluruh layar terisi dengan warna latar belakang yang ditentukan.

Untuk menggambar, Anda memerlukan objek Paint yang menentukan gaya item saat digambar, dan Path yang menentukan apa yang digambar.

Langkah 1. Menginisialisasi objek Paint

1. Di MyCanvasView.kt, di tingkat file teratas, tentukan konstanta untuk lebar goresan.

private const val STROKE_WIDTH = 12f // has to be float

2. Di tingkat class MyCanvasView, tentukan variabel drawColor untuk menyimpan warna yang akan digambar, dan lakukan inisialisasi dengan resource colorPaint yang Anda tentukan sebelumnya.

private val drawColor = ResourcesCompat.getColor(resources, R.color.colorPaint, null)

3. Di tingkat class, di bawah, tambahkan variabel paint untuk objek Paint dan lakukan inisialisasi seperti berikut.

// Set up the paint with which to draw.
private val paint = Paint().apply {
   color = drawColor
   // Smooths out edges of what is drawn without affecting shape.
   isAntiAlias = true
   // Dithering affects how colors with higher-precision than the device are down-sampled.
   isDither = true
   style = Paint.Style.STROKE // default: FILL
   strokeJoin = Paint.Join.ROUND // default: MITER
   strokeCap = Paint.Cap.ROUND // default: BUTT
   strokeWidth = STROKE_WIDTH // default: Hairline-width (really thin)
}

• color dari paint adalah drawColor yang Anda tentukan sebelumnya.
• isAntiAlias menentukan apakah akan menerapkan penghalus tepi. Menyetel isAntiAlias ke true akan memperhalus tepi gambar yang digambar tanpa memengaruhi bentuknya.
• isDither, saat true, memengaruhi cara warna dengan presisi yang lebih tinggi daripada perangkat di-down-sample. Misalnya, dithering adalah cara paling umum untuk mengurangi rentang warna gambar hingga 256 warna (atau lebih sedikit).
• style menetapkan jenis lukisan yang akan dilakukan pada goresan, yang pada dasarnya adalah garis. Paint.Style menentukan apakah elemen dasar yang digambar diisi, diberi goresan, atau keduanya (dalam warna yang sama). Defaultnya adalah mengisi objek tempat cat diterapkan. ("Isi" mewarnai bagian dalam bentuk, sedangkan "stroke" mengikuti garis luarnya.)
• strokeJoin dari Paint.Join menentukan cara garis dan segmen kurva bergabung pada jalur yang digaris. Nilai default-nya adalah MITER.
• strokeCap menetapkan bentuk ujung garis menjadi ujung. Paint.Cap menentukan bagaimana awal dan akhir garis dan jalur yang digores. Nilai default-nya adalah BUTT.
• strokeWidth menentukan lebar goresan dalam piksel. Defaultnya adalah lebar garis tipis, yang sangat tipis, jadi ditetapkan ke konstanta STROKE_WIDTH yang Anda tentukan sebelumnya.

Catatan: Dithering adalah proses menyandingkan piksel dari dua warna untuk menciptakan ilusi bahwa warna ketiga hadir. Contoh sederhana adalah gambar dengan hanya warna hitam dan putih dalam palet warna. Dengan menggabungkan piksel hitam dan putih dalam pola yang kompleks, program grafis dapat menciptakan ilusi nilai abu-abu. Lihat artikel tentang dithering ini untuk mengetahui penjelasan dasarnya

Catatan: Lihat dokumentasi Paint untuk mengetahui daftar semua atribut yang dapat ditetapkan.

Langkah 2. Lakukan inisialisasi objek Path

Path adalah jalur dari apa yang digambar pengguna.

1. Di MyCanvasView, tambahkan variabel path dan lakukan inisialisasi dengan objek Path untuk menyimpan jalur yang digambar saat mengikuti sentuhan pengguna di layar. Impor android.graphics.Path untuk Path.

private var path = Path()

Langkah 1. Merespons gerakan pada layar

Metode onTouchEvent() pada tampilan dipanggil setiap kali pengguna menyentuh layar.

1. Di MyCanvasView, ganti metode onTouchEvent() untuk menyimpan dalam cache koordinat x dan y dari event yang diteruskan. Kemudian, gunakan ekspresi when untuk menangani peristiwa gerakan saat menyentuh layar, bergerak di layar, dan melepaskan sentuhan di layar. Ini adalah peristiwa yang menarik untuk menggambar garis di layar. Untuk setiap jenis peristiwa, panggil metode utilitas, seperti yang ditunjukkan dalam kode di bawah. Lihat dokumentasi class MotionEvent untuk mengetahui daftar lengkap peristiwa sentuh.

override fun onTouchEvent(event: MotionEvent): Boolean {
   motionTouchEventX = event.x
   motionTouchEventY = event.y

   when (event.action) {
       MotionEvent.ACTION_DOWN -> touchStart()
       MotionEvent.ACTION_MOVE -> touchMove()
       MotionEvent.ACTION_UP -> touchUp()
   }
   return true
}

2. Di tingkat class, tambahkan variabel motionTouchEventX dan motionTouchEventY yang tidak ada untuk menyimpan koordinat x dan y dari peristiwa sentuh saat ini (koordinat MotionEvent). Lakukan inisialisasi ke 0f.

private var motionTouchEventX = 0f
private var motionTouchEventY = 0f

3. Buat stub untuk tiga fungsi touchStart(), touchMove(), dan touchUp().

private fun touchStart() {}

private fun touchMove() {}

private fun touchUp() {}

4. Kode Anda akan di-build dan dijalankan, tetapi Anda belum akan melihat perbedaan apa pun dari latar belakang berwarna.

Langkah 2. Menerapkan touchStart()

Metode ini dipanggil saat pengguna pertama kali menyentuh layar.

1. Di tingkat class, tambahkan variabel untuk menyimpan nilai x dan y terbaru dalam cache. Setelah pengguna berhenti bergerak dan mengangkat sentuhan, titik-titik ini adalah titik awal untuk jalur berikutnya (segmen garis berikutnya yang akan digambar).

private var currentX = 0f
private var currentY = 0f

2. Terapkan metode touchStart() sebagai berikut. Reset path, pindah ke koordinat x-y peristiwa sentuh (motionTouchEventX dan motionTouchEventY), lalu tetapkan currentX dan currentY ke nilai tersebut.

private fun touchStart() {
   path.reset()
   path.moveTo(motionTouchEventX, motionTouchEventY)
   currentX = motionTouchEventX
   currentY = motionTouchEventY
}

Langkah 3. Menerapkan touchMove()

1. Di tingkat class, tambahkan variabel touchTolerance dan tetapkan ke ViewConfiguration.get(context).scaledTouchSlop.

private val touchTolerance = ViewConfiguration.get(context).scaledTouchSlop

Dengan menggunakan jalur, Anda tidak perlu menggambar setiap piksel dan meminta refresh tampilan setiap saat. Sebagai gantinya, Anda dapat (dan akan) menginterpolasi jalur antara titik untuk performa yang jauh lebih baik.

• Jika jari hampir tidak bergerak, Anda tidak perlu menggambar.
• Jika jari telah bergerak kurang dari jarak touchTolerance, jangan menggambar.
• scaledTouchSlop menampilkan jarak dalam piksel yang dapat ditelusuri dengan sentuhan sebelum sistem menganggap pengguna sedang men-scroll.

2. Tentukan metode touchMove(). Hitung jarak yang ditempuh (dx, dy), buat kurva antara dua titik dan simpan di path, perbarui total currentX dan currentY yang sedang berjalan, lalu gambar path. Kemudian, panggil invalidate() untuk memaksa penggambaran ulang layar dengan path yang diperbarui.

private fun touchMove() {
   val dx = Math.abs(motionTouchEventX - currentX)
   val dy = Math.abs(motionTouchEventY - currentY)
   if (dx >= touchTolerance || dy >= touchTolerance) {
       // QuadTo() adds a quadratic bezier from the last point,
       // approaching control point (x1,y1), and ending at (x2,y2).
       path.quadTo(currentX, currentY, (motionTouchEventX + currentX) / 2, (motionTouchEventY + currentY) / 2)
       currentX = motionTouchEventX
       currentY = motionTouchEventY
       // Draw the path in the extra bitmap to cache it.
       extraCanvas.drawPath(path, paint)
   }
   invalidate()
}

Metode ini secara lebih mendetail:

1. Hitung jarak yang telah ditempuh (dx, dy).
2. Jika gerakan melebihi toleransi sentuhan, tambahkan segmen ke jalur.
3. Tetapkan titik awal untuk segmen berikutnya ke titik akhir segmen ini.
4. Menggunakan quadTo(), bukan lineTo(), akan membuat garis yang digambar dengan lancar tanpa sudut. Lihat Kurva Bezier.
5. Panggil invalidate() untuk (pada akhirnya memanggil onDraw() dan) menggambar ulang tampilan.

Langkah 4: Terapkan touchUp()

Saat pengguna mengangkat sentuhan mereka, yang diperlukan hanyalah mereset jalur agar tidak digambar lagi. Tidak ada yang digambar, sehingga tidak ada pembatalan yang diperlukan.

1. Implementasikan metode touchUp().

private fun touchUp() {
   // Reset the path so it doesn't get drawn again.
   path.reset()
}

2. Jalankan kode Anda dan gunakan jari Anda untuk menggambar di layar. Perhatikan bahwa jika Anda memutar perangkat, layar akan dibersihkan, karena status gambar tidak disimpan. Untuk aplikasi contoh ini, hal ini memang didesain demikian, untuk memberi pengguna cara sederhana dalam menghapus layar.

Langkah 5: Gambar bingkai di sekitar sketsa

Saat pengguna menggambar di layar, aplikasi Anda akan membuat jalur dan menyimpannya di extraBitmap bitmap. Metode onDraw() menampilkan bitmap tambahan di kanvas tampilan. Anda dapat menggambar lebih banyak di onDraw(). Misalnya, Anda dapat menggambar bentuk setelah menggambar bitmap.

Pada langkah ini, Anda akan menggambar bingkai di sekitar tepi gambar.

1. Di MyCanvasView, tambahkan variabel bernama frame yang menyimpan objek Rect.

private lateinit var frame: Rect

2. Di akhir onSizeChanged(), tentukan inset, dan tambahkan kode untuk membuat Rect yang akan digunakan untuk frame, menggunakan dimensi baru dan inset.
   

// Calculate a rectangular frame around the picture.
val inset = 40
frame = Rect(inset, inset, width - inset, height - inset)

3. Di onDraw(), setelah menggambar bitmap, gambar persegi panjang.
   

// Draw a frame around the canvas.
canvas.drawRect(frame, paint)

4. Jalankan aplikasi Anda. Perhatikan frame-nya.

Tugas (opsional): Menyimpan data di Path

Di aplikasi saat ini, informasi gambar disimpan dalam bitmap. Meskipun ini adalah solusi yang baik, ini bukan satu-satunya cara yang mungkin untuk menyimpan informasi gambar. Cara Anda menyimpan histori gambar bergantung pada aplikasi dan berbagai persyaratan Anda. Misalnya, jika Anda menggambar bentuk, Anda dapat menyimpan daftar bentuk dengan lokasi dan dimensinya. Untuk aplikasi MiniPaint, Anda dapat menyimpan jalur sebagai Path. Berikut adalah garis besar umum tentang cara melakukannya, jika Anda ingin mencobanya.

1. Di MyCanvasView, hapus semua kode untuk extraCanvas dan extraBitmap.
2. Tambahkan variabel untuk jalur sejauh ini, dan jalur yang sedang digambar.

// Path representing the drawing so far
private val drawing = Path()

// Path representing what's currently being drawn
private val curPath = Path()

3. Di onDraw(), alih-alih menggambar bitmap, gambar jalur yang disimpan dan saat ini.

// Draw the drawing so far
canvas.drawPath(drawing, paint)
// Draw any current squiggle
canvas.drawPath(curPath, paint)
// Draw a frame around the canvas
canvas.drawRect(frame, paint)

4. Di touchUp(), tambahkan jalur saat ini ke jalur sebelumnya dan reset jalur saat ini.

// Add the current path to the drawing so far
drawing.addPath(curPath)
// Rewind the current path for the next touch
curPath.reset()

5. Jalankan aplikasi Anda, dan ya, seharusnya tidak ada perbedaan sama sekali.

Download kode untuk codelab yang sudah selesai.

$  git clone https://github.com/googlecodelabs/android-kotlin-drawing-canvas

Atau, Anda dapat mendownload repositori sebagai file ZIP, mengekstraknya, dan membukanya di Android Studio.

Download Zip

• Canvas adalah platform gambar 2D yang menyediakan metode untuk menggambar.
• Canvas dapat dikaitkan dengan instance View yang menampilkannya.
• Objek Paint menyimpan informasi gaya dan warna tentang cara menggambar geometri (seperti garis, persegi panjang, oval, dan jalur) serta teks.
• Pola umum untuk bekerja dengan kanvas adalah membuat tampilan kustom dan mengganti metode onDraw() dan onSizeChanged().
• Ganti metode onTouchEvent() untuk merekam sentuhan pengguna dan meresponsnya dengan menggambar sesuatu.
• Anda dapat menggunakan bitmap tambahan untuk menyimpan informasi dalam cache untuk gambar yang berubah dari waktu ke waktu. Atau, Anda dapat menyimpan bentuk atau jalur.

Kursus Udacity:

• Mengembangkan Aplikasi Android dengan Kotlin

Dokumentasi developer Android:

• Class Canvas
• Class Bitmap
• Class View
• Class Paint
• Konfigurasi Bitmap.config
• Class Path
• Halaman Wikipedia Bezier curves
• Kanvas dan Drawable
• Seri artikel Arsitektur Grafis (lanjutan)
• drawables
• onDraw()
• onSizeChanged()
• MotionEvent
• ViewConfiguration.get(context).scaledTouchSlop

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Instruktur menentukan hal berikut:

• Memberikan pekerjaan rumah jika diperlukan.
• Memberi tahu siswa cara mengirimkan tugas pekerjaan rumah.
• Memberi nilai tugas pekerjaan rumah.

Instruktur bisa menggunakan saran ini sesuai kebutuhan, dan bebas menugaskan pekerjaan rumah lain yang dirasa cocok.

Jika Anda menyelesaikan codelab ini sendiri, gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Jawab pertanyaan-pertanyaan berikut

Pertanyaan 1

Manakah dari komponen berikut yang diperlukan untuk bekerja dengan Canvas? Pilih semua yang sesuai.

▢ Bitmap

▢ Paint

▢ Path

▢ View

Pertanyaan 2

Apa yang dilakukan panggilan ke invalidate() (secara umum)?

▢ Membatalkan dan memulai ulang aplikasi Anda.

▢ Menghapus gambar dari bitmap.

▢ Menunjukkan bahwa kode sebelumnya tidak boleh dijalankan.

▢ Memberi tahu sistem bahwa sistem harus menggambar ulang layar.

Pertanyaan 3

Apa fungsi objek Canvas, Bitmap, dan Paint?

▢ Permukaan gambar 2D, bitmap yang ditampilkan di layar, informasi gaya untuk menggambar.

▢ Permukaan gambar 3D, bitmap untuk menyimpan jalur dalam cache, informasi gaya untuk menggambar.

▢ Area gambar 2D, bitmap yang ditampilkan di layar, gaya untuk tampilan.

▢ Cache untuk menggambar informasi, bitmap untuk digambar, informasi gaya untuk menggambar.

Untuk mengetahui link ke codelab lain dalam kursus ini, lihat halaman landing codelab Android Lanjutan di Kotlin.