DigitalDoodle: Drawing App
Start a New Project
Name the Project
DigitalDoodle: Drawing App - 1
Tutorial ini akan menunjukkan bagaimana cara menggambar garis pada layar sewaktu pengguna menyeret jari.
Dari halaman My Projects, klik New Project. Jika Anda memiliki proyek lain yang sedang dibuka, buka menu My Projects dan pilih New Project.
Sebut proyek ini DigitalDoodle, atau buat nama Anda sendiri untuk aplikasi menggambar ini.
Set the Screen so that it does not scroll
DigitalDoodle: Drawing App - 2
Pengaturan default untuk App Inventor adalah bahwa layar aplikasi Anda akan "scrollable", yang berarti bahwa antarmuka pengguna dapat melampaui batas layar dan pengguna dapat menggulir ke bawah dengan menggesekkan jari (seperti menggulir pada halaman web). Apabila Anda
menggunakan Canvas, Anda harus mematikan pengaturan "Scrollable" (UNCHECK THE BOX) agar layar tidak bergulir. Hal ini akan memungkinkan Anda untuk membuat Canvas memenuhi seluruh layar.
Add a Canvas
DigitalDoodle: Drawing App - 3
Dari menu Drawing and Animation , seret keluar komponen Canvas.
Change the Height and Width of the Canvas to Fill Parent
That's all for the Designer! Go over to the Blocks.
DigitalDoodle: Drawing App - 4
Pastikan komponen Canvas dipilih (#1) sehingga propertinya muncul di Properties Panel(#2). Di bagian bawah, atur Height property ke "Fill Parent". Lakukan hal yang sama dengan Width property.
Percaya atau tidak, untuk saat ini aplikasi ini hanya membutuhkan Canvas. Masuk ke Blocks Editor untuk memprogram aplikasi.
Get a Canvas.Dragged event block
DigitalDoodle: Drawing App - 5
Di menu Canvas1, tarik when Canvas1.Dragged.
Get a Canvas.DrawLine call block
DigitalDoodle: Drawing App - 6
Di menu Canvas1, tarik keluar blok metode when Canvas1.DrawLine .
Use the get and set blocks from the Dragged block to fill in the values for the Draw Line block.
DigitalDoodle: Drawing App - 7
Proses Canvas Dragged akan terjadi berulang-ulang dengan sangat cepat saat pengguna menyeret jari pada layar. Setiap kali blok peristiwa Dragged dipanggil, blok tersebut akan menarik garis kecil antara lokasi sebelumnya (prevX, prevY) dari jari ke lokasi baru (currentX, currentY). Arahkan mouse ke parameter blok Canvas1.Dragged untuk menarik blok get yang Anda butuhkan. (Arahkan mouse ke blok tersebut, jangan diklik.)
Test it out!
Great work! Now extend this app
DigitalDoodle: Drawing App - 8
Buka perangkat Anda yang terhubung dan seret jari Anda di sekitar layar. Apakah Anda melihat garis?
Berikut ini ada beberapa ide untuk mengembangkan aplikasi ini. Anda mungkin bisa memikirkan lebih banyak lagi! - Ubah warna tinta (dan biarkan pengguna memilih dari pilihan warna). Lihat tutorial Paint Pot. - Ubah latar belakang menjadi foto atau gambar. - Biarkan pengguna
menggambar titik-titik dan juga garis (petunjuk: Gunakan blok DrawCircle). - Tambahkan tombol yang menyalakan kamera dan memungkinkan pengguna mengambil gambar lalu
mencoret-coretnya.
