Latihan buat 19 Proyek Editor Pixel Art. Semua ini menambah fitur ke editor dari babnya, jadi bagus buat menguji pemahaman arsitektur state-terpusat + komponen. Jawaban di 19 Kunci Jawaban Editor Pixel.
19.1 Pintasan Keyboard
Tambahkan pintasan: huruf pertama tiap alat memilih alat itu (d untuk draw, f untuk fill, dst), dan Ctrl-Z untuk undo.
Petunjuk: pasang handler "keydown" (di elemen editor yang bisa fokus — beri tabIndex). Cek event.key, dan panggil dispatch yang sesuai ({tool: ...} atau {undo: true}). Pakai event.ctrlKey/metaKey untuk mendeteksi Ctrl-Z. Konsep di 19 Proyek Editor Pixel Art > State Terpusat dan 15 Menangani Event > Event Keyboard.
→ Jawaban: 19 Kunci Jawaban Editor Pixel > 19.1 Pintasan Keyboard
19.2 Menggambar Efisien
Menggambar ulang seluruh canvas tiap perubahan itu boros. Optimalkan supaya hanya piksel yang berubah yang digambar ulang.
Petunjuk: di syncState komponen kanvas, simpan gambar terakhir yang digambar. Waktu gambar baru datang, bandingkan piksel per piksel dan hanya fillRect yang berbeda. Konsep di 19 Proyek Editor Pixel Art > PictureCanvas.
→ Jawaban: 19 Kunci Jawaban Editor Pixel > 19.2 Menggambar Efisien
19.3 Lingkaran
Tambahkan alat circle: menyeret dari pusat menggambar lingkaran.
Petunjuk: alat = fungsi yang menerima posisi awal (pusat), state, dan dispatch, dan mengembalikan handler gerakan. Tiap gerakan, hitung jari-jari = jarak dari pusat ke posisi sekarang, lalu warnai semua piksel dalam kotak pembatas yang jaraknya ke pusat ≤ jari-jari. Mulai tiap gambar dari gambar sebelum menyeret, bukan yang setengah jadi. Konsep di 19 Proyek Editor Pixel Art > Alat sebagai Fungsi.