Gambar 1 Tampilan Program Yang Akan Dibuat

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.

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.

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 Value / Nilai

Form1 BackColor White

FormBorderStyle Fixed3D MaximizeBox False

ComboBox

TextBox

Size 729, 580 StartPosition CenterScreen Text

groupBox1 BackColor 192, 255, 192

Font style Bold

Location 1, 0

Size 718, 120

Text MENU

groupBox2 (Name) gbUkuranShape

Location 227, 14

Size 143, 85

Text Ukuran Shape

groupBox3 (Name) gbPosisiShape

Location 396, 14

Size 155, 85

Text Posisi Shape

label1 Font style Reguler

Location 23, 29

Text Shape

label2 Font style Reguler

Location 23, 57

Text Warna Garis

label3 (Name) lbl_warnaFill

Font style Reguler

Location 23, 86

Text Warna Fill

label4 Font style Bold

Location 62, 61

Text X

label5 Font style Bold

Location 71, 43

Text X

comboBox1 (Name) comboPilShape

Items Kotak

Segitiga Lingkaran Custom

Location 106, 21

Size 91, 21

Text Kotak

comboBox2 (Name) comboPilWarnaGaris

Items Hitam

Merah Hijau Biru

Location 106, 49

Size 91, 21

Text Hitam

comboBox3 (Name) comboPilWarnaFill

Items None

Hitam Merah Hijau Biru

Location 106, 78

Size 91, 21

Text None

textBox1 (Name) txtLebarShape

Location 10, 54

Size 44, 20

Text 100

textBox2 (Name) txtTinggiShape

Location 83, 54

Size 44, 20

Text 100

textBox3 (Name) txtPosX

Location 19, 36

Size 44, 20

Text 200

textBox4 (Name) txtPosY

Location 92, 35

Size 44, 20

Text 200

checkBox1 (Name) cekUkuran

Checked True

CheckState Checked

Font style Reguler

Location 10, 27

Text Ukuran Shape Sama

button1 (Name) cekUkuran

BackColor 255, 224, 192

Location 588, 11

Size 85, 31

Text &Buat

button2 (Name) cmdReset

BackColor 255, 224, 192

Location 588, 46

Size 85, 31

Text &Reset

button3 (Name) cmdKeluar

BackColor 255, 224, 192

Location 588, 81

Size 85, 31

Text &Keluar

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.

Keterangan Program:

- Baris 6: memanggil namespace lain dengan menggunakan perintah using.

Pada program ini namespace yang dipanggil adalah .

2. Setelah itu ketikkan kode berikut.

1

3 4 5 6

. . .

using System.Text;

using System.Windows.Forms;

using System.Drawing.Drawing2D;

Catatan :

Kegunaan dari namespace adalah

menangani class dan method yang berguna untuk menggambar bentuk- bentuk 2D, seperti kotak, lingkaran, segitiga, garis, dan lain-lain.

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()

{

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 e k l a r a s i k a n v a r i a b e l I n t e g e r d e n g a n n a m a , dan di-set dengan nilai 130.

- Baris 5: membuat instance dari class Graphics dengan nama .

- Baris 6: membuat objek dari class Color dengan nama . Lalu set dengan warna hitam.

- Baris 7: membuat objek dari class Brush dengan nama . Lalu set dengan warna hitam.

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.

Keterangan Program:

- Baris 3-4: periksa apakah tombol mouse sebelah kiri ditekan, jika benar set variabel menjadi true.

10 11

13

InitializeComponent();

} . .

Catatan :

Untuk melakukan pengisian shape dengan warna, atau yang dikenal dengan istilah Fill, hanya bisa dilakukan dengan warna yang menggunakan Brush.

1

3 4 5

private void Form1_MouseDown(object sender, MouseEventArgs e) {

if (e.Button == MouseButtons.Left) bolehDiGambar = true;

}

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.

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.

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- 1

3 4

private void Form1_MouseUp(object sender, MouseEventArgs e) {

bolehDiGambar = false;

}

1

3 4

5 6 7

8 9

private void Form1_MouseMove(object sender, MouseEventArgs e) {

string strPilShape = comboPilShape.Text;

if ((bolehDiGambar) && (e.Y > batasAreaBolehDiGambar) &&

(strPilShape == “Custom”)) {

10, 10);

}

}

- 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.

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.

7. Setelah itu, klik dua kali pada komponen TextBox txtLebarShape, dan ketikkan kode berikut.

1

3 4

5 6 7

8 9

private void Form1_MouseClick(object sender, MouseEventArgs e) {

string strPilShape = comboPilShape.Text;

if ((bolehDiGambar) && (e.Y > batasAreaBolehDiGambar) &&

(strPilShape == “Custom”)) {

10, 10);

} } 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.

1

3

private void txtLebarShape_TextChanged(object sender, EventArgs e)

{

if (cekUkuran.Checked == true)

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.

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.

4 5

txtTinggiShape.Text = txtLebarShape.Text;

}

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:

- 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.

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;

}

}

- 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.

Keterangan Program:

- Baris 3: mengambil isi dari ComboBox comboPilWarnaGaris, simpan ke dalam variabel strPilWarnaGaris.

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;

}

}

- 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.

Keterangan Program:

- Baris 3: mengambil isi dari ComboBox comboPilWarnaFill simpan ke dalam variabel strPilWarnaFill.

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;

}

}

- 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));

Keterangan Program:

- Baris 3: ubah variabel menjadi true.

- Baris 4: siapkan objek dengan nama , 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.

30 31

33 34 35 36 37 38

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;

}

if (strPilShape != “Custom”)

if (comboPilWarnaFill.Text != “None”)

bolehDiGambar = false;

}

}

- 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.

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.

Keterangan Program:

- Baris 3: bersihkan shape yang ada pada objek objGrafik, dengan menggunakan method Clear. Dan warna yang digunakan adalah Putih (Color.White).

14. Dan yang terakhir, seperti biasa kode yang berguna untuk menutup aplikasi yang kita buat ini.

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.

1

3 4

private void cmdReset_Click(object sender, EventArgs e) {

}

Catatan :

Sebenarnya, yang dilakukan oleh program adalah menumpuk shape yang ada sebelumnya dengan warna yang kita tentukan, dalam hal ini warna putih (Color.White).

1

3 4

private void cmdKeluar_Click(object sender, EventArgs e) {

this.Close();

}

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