Menggambar Objek 2D dengan Mudah Oleh: Sendy PK
Halo sobat coding, ada yang suka gambar? Kalo ada tutorial ini pas banget nih, karena kali ini kita akan membuat program untuk menggambar objek 2D. Berikut deskripsi program yang akan kita buat :. Program berguna untuk menggambar bentuk/shape 2D. Pilihan bentuk/shape ada tiga buah, yaitu Kotak, Segi...
Halo sobat coding, ada yang suka gambar? Kalo ada tutorial ini pas banget nih, karena kali ini kita akan membuat program untuk menggambar objek 2D. Berikut deskripsi program yang akan kita buat :. ● ●
● ●
Program berguna untuk menggambar bentuk/shape 2D. Pilihan bentuk/shape ada tiga buah, yaitu Kotak, Segitiga, Lingkaran. Ditambah satu buah pilihan Custom, yaitu pilihan yang membebaskan user untuk menggambar apa saja. Untuk pilihan warna yang bisa digunakan ada empat buah. Untuk ukuran dan letak shape ditentukan melalui input user pada TextBox.
●
Program akan menggunakan library yang bernama System.Drawing. Drawing2D.
Sebelum coding, terlebih dahulu kita mendesain tampilan programnya Langkah-langkah mendesain tampilan program adalah sebagai berikut: ● ●
Buat project baru dengan nama grafis2D, simpan di folder e-Trik_5. Masukkan ke dalam Form1 komponen-komponen yang dibutuhkan sebagai berikut. 5 buah Label , dan 4 buah TextBox , 3 buah Button, 3 buah ComboBox , 1 buah CheckBox , dan 3 buah GroupBox
Atur tata letaknya kira-kira seperti pada gambar di bawah ini
Untuk langkah selanjutnya, kita akan mengubah semua nilai properties pada masing-masing objek yang ada pada Form1, termasuk nilai properties Form1 itu sendiri. Untuk mengetahui komponen dan properties yang mana yang akan diubah, dan apa nilainya, silahkan Anda lihat pada Tabel di bawah ini.
Setelah melakukan pendesainan, selanjutnya adalah pengkodean Langkah-langkah melakukan coding program adalah sebagai berikut: ●
Klik satu kali pada Form1, lalu tekan tombol F7, ketikkan kode di bawah using System.Windows.Form; seperti dibawah ini using System.Text; using System.Windows.Forms; using System.Drawing.Drawing2D;
Keterangan Program: ●
Baris 3: memanggil namespace lain dengan menggunakan perintah using. Pada program ini namespace yang dipanggil adalah System.Drawing. Drawing2D.
Setelah itu ketikkan kode berikut
public partial class Form1 : Form { bool bolehDiGambar = false; int batasAreaBolehDiGambar = 130; Graphics objGrafik; Color warnaShape = Color.Black; Brush warnaFill = Brushes.Black; public Form1() { InitializeComponent(); } Keterangan Program: ●
●
● ● ●
Baris 3: mendeklarasikan variabel boolean dengan nama bolehDiGambar, dan di-set dengan nilai false. Baris 4: mendeklarasikan variabel Integer dengan nama batasAreaBolehDiGambar, dan di-set dengan nilai 130. Baris 5: membuat instance dari class Graphics dengan nama objGrafik. Baris 6: membuat objek dari class Color dengan nama warnaShape. Lalu set dengan warna hitam. Baris 7: membuat objek dari class Brush dengan nama warnaFill. Lalu set dengan warna hitam.
Kembali ke form designer, klik satu kali pada Form1, pilih event MouseDown. Kemudian ketik kode yang akan berjalan jika user menekantombol mouse di atas Form1 berikut ini. private void Form1_MouseDown(object sender, MouseEventArgs e) { if (e.Button == MouseButtons.Left) bolehDiGambar = true; } Keterangan Program: ●
Baris 3-4: periksa apakah tombol mouse sebelah kiri ditekan, jika benar set variabel bolehDiGambar menjadi true.
Setelah itu kembali lagi ke form designer, dan pilih event MouseUp. Tambahkan kode berikut untuk men-set variabel bolehDiGambar menjadi false. Kode ini akan berjalan apabila user melepas tombol mouse, atau dengan kata lain tombol mouse tidak ditekan private void Form1_MouseUp(object sender, MouseEventArgs e) { bolehDiGambar = false; } Sekarang kita akan membuat kode yang akan berjalan jika user menekan tombol mouse pada Form1, lalu menggerakkannya. Caranya sama dengan sebelumnnya, akan tetapi event yang dipilih adalah
MouseMove. private void Form1_MouseMove(object sender, MouseEventArgs e) { string strPilShape = comboPilShape.Text; if ((bolehDiGambar) && (e.Y > batasAreaBolehDiGambar) && (strPilShape == "Custom")) { objGrafik = CreateGraphics(); objGrafik.FillEllipse(new SolidBrush(warnaShape), e.X, e.Y, 10, 10); } } Keterangan Program: ● ●
● ●
Baris 3: mengambil isi dari ComboBox comboPilShape, simpan ke dalam variabel strPilShape. Baris 4: periksa apakah bolehDiGambar bernilai true dan kursor mouse tidak melewati batasAreaBolehDiGambar dan isi variabel strPilShape adalah Custom. Baris 6: membuat objek yang akan digunakan sebagai pengontrol fungsi- fungsi Grafis Baris 7: menggambar shape titik sesuai warna, koordinat, dan besar yang telah ditentukan. Warnanya ditentukan oleh variabel warnaShape, koordinatnya ditentukan oleh posisi kursor mouse yang diwakilkan oleh e.X dan e.Y. Lalu angka 10, 10, berarti tinggi dan lebar objeknya
Dan yang terakhir, buat kode untuk untuk Form1 dengan eventMouseClick. Kode ini akan berjalan jika user mengklik pada Form1. Berikut kode yang sebenarnya sama dengan kode pada langkah sebelumnya. private void Form1_MouseClick(object sender, MouseEventArgs e) { string strPilShape = comboPilShape.Text; if ((bolehDiGambar) && (e.Y > batasAreaBolehDiGambar) && (strPilShape == "Custom")) { objGrafik = CreateGraphics(); objGrafik.FillEllipse(new SolidBrush(warnaShape), e.X, e.Y, 10, 10); } } Setelah itu, klik dua kali pada komponen TextBox txtLebarShape, dan ketikkan kode berikut. private void txtLebarShape_TextChanged(object sender, EventArgs e) { if (cekUkuran.Checked == true) txtTinggiShape.Text = txtLebarShape.Text; }
Keterangan Program: ●
●
Baris 3: periksa apakah komponen CheckBox cekUkuran dicentang. Jika benar jalankan perintah pada baris 4. Baris 4: samakan isi komponen TextBox txtTinggiShape dengan isi komponen TextBox txtLebarShape.
Langkah selanjutnya, klik dua kali pada kompenen CheckBox cekUkuran. Lalu ketikkan kode seperti berikut. private void cekUkuran_CheckedChanged(object sender, EventArgs e) { if (cekUkuran.Checked == true) { txtTinggiShape.Text = txtLebarShape.Text; txtTinggiShape.Enabled = false; } else { txtTinggiShape.Enabled = true; } } Keterangan Program: ●
●
●
●
Baris 3: periksa apakah komponen CheckBox cekUkuran dicentang. Jika benar jalankan perintah pada baris 5-6. Dan, jika salah jalankan baris 8. Baris 5: samakan isi komponen TextBox txtTinggiShape dengan isi komponen TextBox txtLebarShape. Baris 6: ubah status komponen TextBox txtTinggiShape menjadi false, atau dengan kata lain txtTinggiShape dibuat disable. Baris 8: enable komponen TextBox txtTinggiShape.
Klik dua kali pada komponen ComboBox comboPilShape, dan ketikkan kode ini. private void comboPilShape_SelectedIndexChanged(object sender, EventArgs e) { string strPilShape = comboPilShape.Text; if (strPilShape == "Custom") { lbl_warnaFill.Visible = false; comboPilWarnaFill.Visible = false; gbUkuranShape.Visible = false; gbPosisiShape.Visible = false; cmdBuat.Enabled = false; } else { lbl_warnaFill.Visible = true; comboPilWarnaFill.Visible = true; gbUkuranShape.Visible = true; gbPosisiShape.Visible = true;
cmdBuat.Enabled = true; } } Keterangan Program:
● ● ●
●
●
Kode ini akan berjalan apabila user mengubah pilihan pada komponen ComboBox comboPilShape. Baris 3: mengambil isi dari ComboBox comboPilShape, simpan ke dalam variabel strPilShape. Baris 4: periksa apakah isi dari variabel strPilShape sama dengan Custom. Jika benar, jalankan perintah pada baris 6-10. Dan jika salah, jalankan perintah pada baris 14-18. Baris 6-10: disable komponen-komponen seperti lbl_warnaFill, comboPilWarnaFill, gbUkuranShape, gbPosisiShape, dan cmdBuat. Baris 14-18: enable komponen-komponen seperti lbl_warnaFill, comboPilWarnaFill, gbUkuranShape, gbPosisiShape, dan cmdBuat.
Masih unuk komponen ComboBox, akan tetapi kali ini untuk komponen comboPilWarnaGaris. Berikut kode yang peru diketik. private void comboPilWarnaGaris_SelectedIndexChanged(object sender, EventArgs e) { string strPilWarnaGaris = comboPilWarnaGaris.Text; switch (strPilWarnaGaris) { case "Hitam": warnaShape = Color.Black; break; case "Merah": warnaShape = Color.Red; break; case "Hijau": warnaShape = Color.MediumSpringGreen; break; case "Biru": warnaShape = Color.Blue; break; default: warnaShape = Color.Black; break; } } Keterangan Program:
●
●
Baris 3: mengambil isi dari ComboBox comboPilWarnaGaris, simpan ke dalam variabel strPilWarnaGaris. Baris 4-21: menentukan isi dari variabel warnaShape, berdasarkan warna yang dipilih oleh user yang diwakili oleh variabel strPilWarnaGaris.
Dan kode yang terakhir untuk komponen ComboBox, adalah kode untuk komponen comboPilWarnaFill. Berikut kodenya. private void comboPilWarnaFill_SelectedIndexChanged(object sender, EventArgs e) { string strPilWarnaFill = comboPilWarnaFill.Text; switch (strPilWarnaFill) { case "Hitam": warnaFill = Brushes.Black; break; case "Merah": warnaFill = Brushes.Red; break; case "Hijau": warnaFill = Brushes.MediumSpringGreen; break; case "Biru": warnaFill = Brushes.Blue; break; default: warnaFill = Brushes.Black; break; } } Keterangan Program: ●
●
Baris 3: mengambil isi dari ComboBox comboPilWarnaFill simpan ke dalam variabel strPilWarnaFill. Baris 4-21: menentukan isi dari variabel warnaFill, berdasarkan warna yang dipilih oleh user yang diwakili oleh variabel strPilWarnaFill.
Sekarang kita akan membuat kode untuk komponen Button, yang pertama adalah untuk Button cmdBuat. Berikut kode yang harus diketik. Ingat hanya yang berwarna merah. private void cmdBuat_Click(object sender, EventArgs e) { bolehDiGambar = true; objGrafik = CreateGraphics();
int posShapeX = int.Parse(txtPosX.Text); int posShapeY = int.Parse(txtPosY.Text); if ((bolehDiGambar) && (posShapeY > batasAreaBolehDiGambar)) { string strPilShape = comboPilShape.Text; int lebarShape = int.Parse(txtLebarShape.Text); int tinggiShape = int.Parse(txtTinggiShape.Text); GraphicsPath gp = new GraphicsPath(); Pen P = new Pen(warnaShape, 3); switch (strPilShape) { case "Kotak": gp.AddRectangle(new Rectangle(posShapeX, posShapeY, lebarShape, tinggiShape)); break; case "Segitiga": Point pt1 = new Point(posShapeX, Point pt2 = new Point((posShapeX (posShapeY + tinggiShape)); Point pt3 = new Point((posShapeX (posShapeY + tinggiShape)); gp.AddPolygon(new Point[] { pt1, break;
posShapeY); - lebarShape), + lebarShape), pt2, pt3 });
case "Lingkaran": gp.AddEllipse(posShapeX, posShapeY, lebarShape, tinggiShape); break; default: MessageBox.Show("Maaf, Pilihan Shape tidak ditemukan"); break; }
if (strPilShape != "Custom") { objGrafik.DrawPath(P, gp); } if (comboPilWarnaFill.Text != "None") { objGrafik.FillPath(warnaFill, gp); } bolehDiGambar = false; } }
Keterangan Program: ● ●
●
●
● ● ● ●
●
●
● ●
● ● ●
● ●
●
●
●
●
Baris 3: ubah variabel bolehDiGambar menjadi true. Baris 4: siapkan objek dengan nama objGrafik, sebagai pengontrol fungsifungsi untuk keperluan grafis. Baris 5 dan 6: ambil koordinat dimana shape akan digambar sesuai keinginan user. Lalu simpan ke variabel posShapeX dan posShapeY. Baris 7: periksa apakah variabel bolehDiGambar bernilai true dan isi variable posShapeY lebih besar dari isi variabel batasAreaBolehDiGambar. Baris 9: mengambil isi dari ComboBox comboPilShape simpan ke dalam variabel strPilShape. Baris 10: mengambil isi dari TextBox txtLebarShape, lalu simpan ke dalam variabel lebarShape. Baris 11: mengambil isi dari TextBox txtTinggiShape, lalu simpan ke dalam variabel tinggiShape. Baris 12: membuat objek baru dari class GraphicsPath, dengan nama gp. Class ini mewakili rangkaian dari garis dan kurva yang saling terhubung. Baris 13: membuat objek yang bisa digunakan untuk menggambar garis dan kurva, dengan nama P. Warna yang digunakan ditentukan dari isi variabel warnaShape. Dan tebal objeknya adalah 3. Baris 14: statement switch yang bertugas menentukan shape mana yang akan digambar, sesuai dengan pilihan user. Baris 16: apabila user memilih shape Kotak, maka baris 17-18 akan dijalankan. Baris 17: dengan menggunakan method AddRetangle yang ada pada objek gp. Buat shape kotak, dengan variabel posShapeX dan posShapeY sebagai koordinat dimana shape akan digambar. Lalu, variabel lebarShape dan tinggiShape sebagai penentu berapa lebar dan tinggi dari shape yang akan dibuat. Baris 16: apabila user memilih shape Segitiga, maka baris 20-24 akan dijalankan. Baris 20-22: menentukan ketiga koordinat titik yang diperlukan untuk menggambar shape segitiga. Baris 23: dengan menggunakan method AddPolygon yang ada pada objek gp. Buat shape segitiga, dimana koordinat ketiga buah titik adalah variable p1, p2, dan p3. Baris 25: apabila user memilih shape Lingkaran, maka baris 26-27 akan dijalankan. Baris 26: dengan menggunakan method AddEllipse yang ada pada objek gp. Buat shape lingkaran, dengan variabel posShapeX dan posShapeY sebagai koordinat dimana shape akan digambar. Lalu, variabel lebarShape dan tinggiShape sebagai penentu berapa lebar dan tinggi dari shape yang akan dibuat. Baris 28-30: apabila shape yang dipilih user, tidak tercantum dalam daftar yang telah ditentukan, maka munculkan pesan “Maaf, Pilihan Shape tidak ditemukan”. Baris 32-33: periksa apakah shape yang dipilih bukan Custom. Jika benar, maka dengan menggunakan kontrol objGrafik, gambar shape yang ada pada objek gp. Baris 34-35: periksa apakah pilihan warna fill bukan None. Jika benar, maka isi (fill) shape yang sebelumnya telah digambar dengan warna yang ada pada variabel warnaFill. Baris 36: set variabel bolehDiGambar menjadi false.
Setelah kita membuat kode untuk menggambar shape, maka perlu juga kita buat kode untuk membersihkan “kertas gambar” yang kita pakai tadi. Kode berikut untuk komponen Button cmdReset. private void cmdReset_Click(object sender, EventArgs e) { objGrafik.Clear(Color.White); } Keterangan Program:
●
Baris 3: bersihkan shape yang ada pada objek objGrafik, dengan menggunakan method Clear. Dan warna yang digunakan adalah Putih (Color.White).
Dan yang terakhir, seperti biasa kode yang berguna untuk menutup aplikasi yang kita buat ini. private void cmdKeluar_Click(object sender, EventArgs e) { this.Close(); } Pengkodean sudah selesai, sekarang saatnya untuk menjalankan program, silahkan tekan F5 untuk menjalankan program Langkah-langkah melakukan ujicoba program adalah sebagai berikut: Setelah program dijalankan, tekan tombol Buat. Maka akan tercipta menu untuk membuat bangun 2D dengan pilihan Shape : Kotak, Segitiga, Lingkaran, dan Custom, dengan Warna Garis : Hitam, Merah, Hijau, dan Biru, dengan Warna Fill : None (tidak ada warna), Hitam, Merah, Hijau, dan Biru. Lalu dengan Ukuran Shape dan Posisi Shape yang bias disesuaikan dengan mengisi text boxnya. Seperti gambar di bawah ini.
Sekarang coba ubah Shape menjadi Kotak, Warna Garis menjadi Hitam, Warna Fill menjadi Biru. Ubah Ukuran Shape menjadi 200 x 200, dan juga Posisi Shape menjadi 23 x 300. Tekan tombol Buat. Lalu akan tampil seperti gambar di bawah ini
Tekan tombol Reset, untuk membersihkan area gambar. Tekan tombol Keluar, untuk menutup aplikasi Sekian tutorial kali ini, sampai jumpa di tutorial selanjutnya.
Tentang Penulis Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di www.spkshop.web.id
