Pada E-Trik 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.
Gambar 1 Tampilan Program Yang Akan Dibuat Catatan : Penggunaan library disini maksudnya adalah penggunaan namespace lain yang di dalam namespace tersebut terdapat class-class dan method-method khusus sesuai dengan kegunaannya masing-masing.
2
A. Mendesain Tampilan Program Langkah-langkah mendesain tampilan program adalah sebagai berikut: 1. Buat project baru dengan nama , simpan di folder e-Trik_5. 2. 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.
TextBox ComboBox
Gambar 2 Tata Letak Awal Komponen 3. 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 1. Tabel 1. Properties dan Value yang Akan Diubah Nama Kontrol Nama Properties Form1
Value / Nilai
BackColor FormBorderStyle MaximizeBox
White Fixed3D False
3
E-trik Visual C# 2005 Size StartPosition Text
729, 580 CenterScreen
BackColor Font style
192, 255, 192 Bold
Location Size Text
1, 0 718, 120 MENU
(Name) Location
gbUkuranShape 227, 14
Size Text (Name)
143, 85 Ukuran Shape gbPosisiShape
Location Size
396, 14 155, 85
Text Font style Location
Posisi Shape Reguler 23, 29
label2
Text Font style
Shape Reguler
label3
Location Text (Name)
23, 57 Warna Garis lbl_warnaFill
Font style Location
Reguler 23, 86
Text Font style Location
Warna Fill Bold 62, 61
Text Font style
X Bold
Location Text
71, 43 X
groupBox1
groupBox2
groupBox3
label1
label4
label5
4
comboBox1
comboBox2
comboBox3
textBox1
textBox2
(Name) Items
Location
comboPilShape Kotak Segitiga Lingkaran Custom 106, 21
Size Text
91, 21 Kotak
(Name) Items
Location
comboPilWarnaGaris Hitam Merah Hijau Biru 106, 49
Size Text
91, 21 Hitam
(Name) Items
Location
comboPilWarnaFill None Hitam Merah Hijau Biru 106, 78
Size Text
91, 21 None
(Name) Location Size
txtLebarShape 10, 54 44, 20
Text (Name)
100 txtTinggiShape
Location Size Text
83, 54 44, 20 100
5
E-trik Visual C# 2005 textBox3
textBox4
checkBox1
button1
button2
button3
(Name) Location Size
txtPosX 19, 36 44, 20
Text (Name)
200 txtPosY
Location Size Text
92, 35 44, 20 200
(Name) Checked
cekUkuran True
CheckState Font style Location
Checked Reguler 10, 27
Text (Name)
Ukuran Shape Sama cekUkuran
BackColor Location Size
255, 224, 192 588, 11 85, 31
Text (Name)
&Buat cmdReset
BackColor Location Size
255, 224, 192 588, 46 85, 31
Text (Name)
&Reset cmdKeluar
BackColor Location Size
255, 224, 192 588, 81 85, 31
Text
&Keluar
6
B. Coding Program Langkah-langkah melakukan coding program adalah sebagai berikut: 1. Klik satu kali pada Form1, lalu tekan tombol F7, ketikkan kode yang berwarna merah seperti dibawah ini. 1 3 4 5 6
. . . using System.Text; using System.Windows.Forms; using System.Drawing.Drawing2D;
Keterangan Program: - Baris 6: memanggil namespace lain dengan menggunakan perintah using. Pada program ini namespace yang dipanggil adalah . Catatan : Kegunaan dari namespace adalah menangani class dan method yang berguna untuk menggambar bentukbentuk 2D, seperti kotak, lingkaran, segitiga, garis, dan lain-lain.
2. Setelah itu ketikkan kode berikut. 1 3 4 5 6 7 8 9
public partial class Form1 : Form { bool bolehDiGambar = false; int batasAreaBolehDiGambar = 130; Color warnaShape = Color.Black; Brush warnaFill = Brushes.Black; public Form1() {
7
E-trik Visual C# 2005 10 11 13
InitializeComponent(); } . .
Keterangan Program: - Baris 3: mendeklarasikan variabel boolean dengan nama dan di-set dengan nilai false. - B a r i s 4 : m e n d ek la r as i k a n v ar i ab e l I n t e g e r d e n g an , dan di-set dengan nilai 130. - Baris 5: membuat instance dari class Graphics dengan . - Baris 6: membuat objek dari class Color dengan nama set dengan warna hitam. - Baris 7: membuat objek dari class Brush dengan nama set dengan warna hitam.
, n am a nama . Lalu . Lalu
Catatan : Untuk melakukan pengisian shape dengan warna, atau yang dikenal dengan istilah Fill, hanya bisa dilakukan dengan warna yang menggunakan Brush. 3. Kembali ke form designer, klik satu kali pada Form1, pilih event . Kemudian ketik kode yang akan berjalan jika user menekan tombol mouse di atas Form1 berikut ini. 1 3 4 5
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 menjadi true.
8
4. Setelah itu kembali lagi ke form designer, dan pilih event MouseUp. Tambahkan kode berikut untuk men-set variabel menjadi false. Kode ini akan berjalan apabila user melepas tombol mouse, atau dengan kata lain tombol mouse tidak ditekan. 1 3 4
private void Form1_MouseUp(object sender, MouseEventArgs e) { bolehDiGambar = false; }
5. 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. 1 3 4 5 6 7
private void Form1_MouseMove(object sender, MouseEventArgs e) { string strPilShape = comboPilShape.Text; if ((bolehDiGambar) && (e.Y > batasAreaBolehDiGambar) && (strPilShape == “Custom”)) {
10, 10); 8 9
} }
Keterangan Program: - Baris 3: mengambil isi dari ComboBox comboPilShape, simpan ke dalam variabel strPilShape. - Baris 4: periksa apakah bernilai true dan kursor mouse tidak melewati dan isi variabel strPilShape adalah Custom. - Baris 6: membuat objek yang akan digunakan sebagai pengontrol fungsi-
9
E-trik Visual C# 2005 -
Baris 7: menggambar shape titik sesuai warna, koordinat, dan besar yang telah ditentukan. Warnanya ditentukan oleh variabel , koordinatnya ditentukan oleh posisi kursor mouse yang diwakilkan oleh e.X dan e.Y. Lalu angka 10, 10, berarti tinggi dan lebar objeknya. Catatan : Sebenarnya, shape titik yang kita buat disini adalah shape lingkaran. Oleh karena skalanya kita perkecil dan diberi isi (Fill), makanya kesan yang timbul itu adalah shape titik (dot). Sehingga, jika kita menggambar akan tercipta goresan-goresan yang sesuai dengan kemauan kita. Yang sebenarnya itu hanyalah rangkaian dari titik-titik.
6. Dan yang terakhir, buat kode untuk untuk Form1 dengan event MouseClick. Kode ini akan berjalan jika user mengklik pada Form1. Berikut kode yang sebenarnya sama dengan kode pada langkah sebelumnya. 1 3 4 5 6 7
private void Form1_MouseClick(object sender, MouseEventArgs e) { string strPilShape = comboPilShape.Text; if ((bolehDiGambar) && (e.Y > batasAreaBolehDiGambar) && (strPilShape == “Custom”)) {
10, 10); 8 9
} }
7. Setelah itu, klik dua kali pada komponen TextBox txtLebarShape, dan ketikkan kode berikut. 1
3
private void txtLebarShape_TextChanged(object sender, EventArgs e) { if (cekUkuran.Checked == true)
10
4 5
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. 8. Langkah selanjutnya, klik dua kali pada kompenen CheckBox cekUkuran. Lalu ketikkan kode berwarna merah berikut. 1
3 4 5 6 7 8 9
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. 9. Klik dua kali pada komponen ComboBox comboPilShape, dan ketikkan kode ini.
11
E-trik Visual C# 2005 1
3 4 5 6 7 8 9 10 11 13 14 15 16 17 18 19
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 , comboPilWarnaFill, gbUkuranShape, gbPosisiShape, dan cmdBuat.
12
Baris 14-18: enable komponen-komponen seperti , comboPilWarnaFill, gbUkuranShape, gbPosisiShape, dan cmdBuat.
-
10. Masih unuk komponen ComboBox, akan tetapi kali ini untuk komponen comboPilWarnaGaris. Berikut kode yang peru diketik. 1
3 4 5 6 7 8 9 10 11 13 14 15 16 17 18 19
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.
13
E-trik Visual C# 2005 -
Baris 4-21: menentukan isi dari variabel , berdasarkan warna yang dipilih oleh user yang diwakili oleh variabel strPilWarnaGaris.
11. Dan kode yang terakhir untuk komponen ComboBox, adalah kode untuk komponen comboPilWarnaFill. Berikut kodenya. 1
3 4 5 6 7 8 9 10 11 13 14 15 16 17 18 19
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.
14
-
Baris 4-21: menentukan isi dari variabel , berdasarkan warna yang dipilih oleh user yang diwakili oleh variabel strPilWarnaFill.
12. Sekarang kita akan membuat kode untuk komponen Button, yang pertama adalah untuk Button cmdBuat. Berikut kode yang harus diketik. Ingat hanya yang berwarna merah. 1 3 4 5 6 7 8 9 10 11 13 14 15 16 17 18 19
private void cmdBuat_Click(object sender, EventArgs e) { bolehDiGambar = true; 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, posShapeY); Point pt2 = new Point((posShapeX - lebarShape), (posShapeY + tinggiShape)); Point pt3 = new Point((posShapeX + lebarShape), (posShapeY + tinggiShape));
15
E-trik Visual C# 2005 gp.AddPolygon(new Point[] { pt1, pt2, pt3 }); break; case “Lingkaran”: gp.AddEllipse(posShapeX, posShapeY, lebarShape, tinggiShape); break; default: MessageBox.Show(“Maaf, Pilihan Shape tidak ditemukan”); break;
30 31 33 34 35 36 37 38
} if (strPilShape != “Custom”) if (comboPilWarnaFill.Text != “None”) bolehDiGambar = false; } }
Keterangan Program: - Baris 3: ubah variabel - Baris 4: siapkan objek dengan nama -
menjadi true. , sebagai pengontrol fungsi-
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 bernilai true dan isi variabel posShapeY lebih besar dari isi variabel . 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.
16
-
-
-
-
-
-
-
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 . 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 variabel p1, , 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 , gambar shape yang ada pada objek gp.
17
E-trik Visual C# 2005 ada pada variabel Baris 36: set variabel
-
. menjadi false.
13. 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. 1 3 4
private void cmdReset_Click(object sender, EventArgs e) { }
Keterangan Program: - Baris 3: bersihkan shape yang ada pada objek objGrafik, dengan menggunakan method Clear. Dan warna yang digunakan adalah Putih (Color.White). Catatan : Sebenarnya, yang dilakukan oleh program adalah menumpuk shape yang ada sebelumnya dengan warna yang kita tentukan, dalam hal ini warna putih (Color.White).
14. Dan yang terakhir, seperti biasa kode yang berguna untuk menutup aplikasi yang kita buat ini. 1 3 4
private void cmdKeluar_Click(object sender, EventArgs e) { this.Close(); }
15. Setelah itu tekan tombol F6, untuk melakukan Build Solution. Jika ada error, coba Anda teliti lagi apakah ada kode yang terlewat atau salah dalam pengetikannya. Jika tidak ada error, tekan tombol F5. Maka program akan dijalankan.
18
C. Ujicoba Program Langkah-langkah melakukan ujicoba program adalah sebagai berikut: 1. Setelah program dijalankan, tekan tombol Buat. 2. Maka akan tercipta shape dengan pengaturan default yang ada pada bagian ukuran 100 x 100 dan koordinat posisinya adalah 200,200. 3. Sekarang coba ubah Shape menjadi Lingkaran, Warna Garis menjadi Biru, Warna Fill menjadi Hijau. Ubah Ukuran Shape menjadi 150 x 150, dan juga Posisi Shape menjadi 300 x 300. Tekan tombol Buat. 4. Tekan tombol Reset, untuk membersihkan area gambar. 5. Tekan tombol Keluar, untuk menutup aplikasi.
Gambar 3 Tampilan Running Program
19
