Modul Praktikum Bahasa Pemrograman Visual (BPV)

MODUL IX GRAPHIC

A. TUJUAN Memahami mengenai pemrograman graphic Membuat program graphic sederhana menggunakan VB Membuat program graphic menggunakan GDI (Graphic Device Interface) B. ALOKASI WAKTU 4 js (4 x 50 menit) C. PETUNJUK 1. Awali setiap aktivitas dengan doa, semoga berkah dan mendapat kemudahan. 2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik. 3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur. 4. Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.

D. DASAR TEORI Seluruh form yang ada pada VB mempunyai sebuah koordinat. Koordinat ini berguna untuk menentukan posisi gambar atau graphic pada form, apakah dikiri, tengah, atas, dan sebagainya. Koordinat sebuah form terdiri atas dua bagian yaitu koordinat horizontal (x) dan koordinat vertikal (y).

Jurusan Teknik Elektro FT UM

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Koordinat dasar x=0, y=0 Gambar berada dikoordinat x= 84, y=81

Garis koordinat x

Garis koordinat y

Posisi koordinat dari komponen picturebox dapat dengan mudah diatur secara manual pada properties location picturebox sesuai gambar berikut:

Lokasi Koordinat X,Y dari objek

CLR menggunakan implementasi tingkat lanjutdari antarmuka grafik windows (GDI) yang disebut dengan GDI+. GDI+ mengijinkan kita untuk membuat grafik,menggambar teks, atau memanipulasi image grafik sebagai objek. Sebelum
Jurusan Teknik Elektro FT UM 2

Modul Praktikum Bahasa Pemrograman Visual (BPV) menggambar garis dan bentuk, merender teks, dan menampilkan gambar dengan GDI+ objek graphics harus dibuat terlebih dahulu. Objek graphics me Ada dua langkah dalam pemrograman grafik : 1. Membuat gambar graphics 2. Menggunakan objek graphics untuk menggambar garis dan bentuk, render teks, atau menampilkan gambar. Pembuatan Objek Graphics Sebuah objek graphics dapat dibuat dengan cara : Menerima sebuah reference ke sebuah objek graphics sebagai bagian dari PaintEventArgs pada event Paint dari sebuah form atau control. Dengan cara memanggil method CreateGraphics dari sebuah control atau form untuk memperoleh sebuah reference ke sebuah objek Graphics yang merepresentasikan permukaan gambar Membuat sebuah objekGraphics dari objek yang diturunkan dari image.Pendekatan ni berguna ketika ingin menambahkan/memodifikasi gambar yang sudah ada. Untuk memperoleh sebuah reference ke objek Graphics dan PaintEventArgs pada paint Event: Deklarasi objek Graphics Berikan variable untuk mereference ke objek Graphics yang dilewati sebagai bagian dari PaintEventArgs Masukkan kode untuk menggambar ke form atau control Kode berikut contoh bagaimana merefer sebuah objek Graphics dari PaintEventArgs pada event paint :
Private Sub Form1_Paint(sender As Object,pe As PaintEventArgs) Handles MyBase.Paint

representasikan

permukaan gambar GDI+ yaitu objek yang digunakan untuk membuat gambar grafis.

Deklarasi objek Graphics dan set ke objek Graphics pada PaintEventArgs Dim g As Graphics = pe.Graphics Masukkan kode untuk menggambar ke form di sini End Sub Method CreateGraphics Untuk membuat sebuah graphic pada vb tentukan lebih dahulu container yang mendeklarasikan dimana graphic tersebut diletakkan misalnya dalam form, panel, dan sebagainya dengan menggunakan method createGraphics.
Jurusan Teknik Elektro FT UM 3

Modul Praktikum Bahasa Pemrograman Visual (BPV) CreateGraphics dari form atau control yang anda ingin gambar : Contoh method creategraphics pada form:

Contoh method creategraphics pada picturebox:

Membuat dari objek Image Sebagai tambahan, pembuatan objek Graphics dari objek yang diturunkan dari kelas Image dengan cara memanggil method Graphics.FormImage. Dim myBitmap as New Bitmap(C:\myPic.bmp) Dim g as Graphics=Graphics.FormImage(myBitmap) Menggambar dan manipulasi bentuk dan image Setelah dibuat objek Graphics bias digunakan untuk menggambar garis dan bentuk, render teks, ataumenampilkan gambar. Objek yang diperlukan untuk digunakan pada objek Graphics adalah : Kelas Pen, digunakan untuk menggambar garis, bentuk, atau menggambar bentuk geometris lainnya. Kelas Brush,digunakan untuk mengisi area graphics, seperti mengisi bentuk, gambar atau teks. Kelas Font, digunakan untuk menentukan font dari teks. Structure Color,digunakan untuk mengeset warna yang akan ditampilkan.

GDI+ dapat digunakan untuk menggambar image yang berada pada sebuah file pada aplikasi dengan membuat sebuah objek baru sebagaikelas image(seperti bitmap),membuat objek Graphics yang merefer permukaan gambar yang ingin digunakan, dan memanggil method DrawImage dari objek Graphics. Untuk menggambar sebuah image dengan GDI+ langkahnya sebagai berikut: Buat sebuah objek yang merepresentasikan image yang ingin ditampilkan. Objek harus sebuah anggota dari sebuah kelas yang diturunkan dari image seperti bitmap atau metafile. Sebagai contoh berikut: Dim mybitmap as new Bitmap(C:/MyImages\TestImages.bmp)
Jurusan Teknik Elektro FT UM 4

Modul Praktikum Bahasa Pemrograman Visual (BPV) Buat sebuah objek Graphics yang merepresentasikan permukaan gambar yang ingin digunakan. Dim g as Graphics=Button1.createGraphics Panggil method Graphics.DrawImage dari objek graphics anda untuk menggambar image. Image yang akan digambar dan koordinat dimana akan digambar harus ditentukan. g.DrawImage(myBitmap,1,1) Menggambar Garis dan Bentuk dengan GDI+ Objek graphics menyediakan method untuk menggambar berbagai jenis garis atau bentuk. Bentuk yang simple maupun komplek dapat digambar menggunakan warna yang transparan atau solid, garis, kurva, dan bentuk lainnya dapat digambar menggunakan objek pen. Untuk mengisi sebuah area seperti segi empat atau curve tertutup, objek brush digunakan. Untuk menggambar garis atau bentuk garisan lain : 1. Ambil sebuah reference atau objek Graphics yang akan akan digunakan Dim g as graphics = Button1.CreateGraphics 2. Buat instance dari kelas Pen yang diinginkan untuk menggambar garis dan set property lainnya Dim mypen as new Pen(Color.Red) myPen.width=5 3. Panggil method yang sesuai untuk bentuk yang anda inginkan, beserta parameter lain yang dibutuhkan. Tabel berikut berisi daftar method yang umum digunakan: Method Graphics.DrawLine Graphics.DrawPolygon Shape Line:membutuhkan koordinat untuk mengidentifikasi titik awal dan akhir Bentuk complex : membutuhkan array koordinat parameter g.DrawLine(myPen, 1, 1, 45, 65) g.DrawBezier(myPen, 15, 15, 30, 30, 45, 87, 20) g.DrawEllipse(myPen, New Rectangle ( 33, 45, 40, 50)) Graphics.DrawRectangle Rectangle : membutuhkan 1 atau lebih objek sebagai

Jurusan Teknik Elektro FT UM

Modul Praktikum Bahasa Pemrograman Visual (BPV) g.DrawPolygon(myPen,New PointF(){ New PointF(1, 1),_ New PointF(200, 50), New PointF(39, 45)})

Menggambar Bentuk Berisi Ambil sebuah referensi ke objek grafik Buat sebuah instance dari Brush yang ingin digunakan untuk menggambar bentuk Dim g as Graphics= Button1.CreateGraphics Dim myBrush as new SolidBrush(Color.Red) Panggil method yang sesuai dengan bentuk yang diinginkan.Sebagai contoh,untuk FillPolygon dibutuhkan array titik untuk menjelaskan bentuknya. Method lain seperti FillRectangl atau FillPath, dibutuhkan sebuah objek yang menjelaskan area yang akan diisi.

E.

LATIHAN Latihan 1 Untuk memperjelas beberapa hal yang dibahas pada dasar teori maka langsung saja dimulai dengan contoh pembuatan graphic sederhana yaitu menggambar sebuah garis. Contoh method untuk menentukan warna garis dan tebal garis:

Method yang digunakan untuk menggambar garis: pic.DrawLine(pena,x,y,lebar,tinggi) Buat sebuah form baru dan tambahkan event paint pada form ini, ketikkan didalamnya beberapa script dibawah ini:

Jurusan Teknik Elektro FT UM

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Hasilnya sebagai berikut:

Latihan 2 Gambarlah sebuah lingkaran dengan panjang sama dengan 40 pixel, lebar sama dengan 70 pixel, koordinat x sama dengan 50, dan koordinat y sama dengan 80 Method yang digunakan: pic.DrawRectangle(pena,x,y,lebar,panjang) Tulislah kode program berikut :

Hasilnya :

Jurusan Teknik Elektro FT UM

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Latihan 3 Gambarlah sebuah lingkaran dengan panjang sama dengan 120 pixel, lebar sama dengan 100 pixel, koordinat x sama dengan 30, dan koordinat y sama dengan 20 Method yang digunakan: pic.DrawEllipse(pena,x,y,lebar,panjang) Tulislah kode program berikut :

Hasilnya :

Latihan 4 Gambarlah sebuah teks I LOVE VB Method yang digunakan: pic.DrawString(text,jenishuruf,warna,x,y) Tulislah kode program berikut :

Jurusan Teknik Elektro FT UM

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Hasilnya :

Latihan 5 Ketik kode program berikut :

Hasilnya :

Jurusan Teknik Elektro FT UM

Modul Praktikum Bahasa Pemrograman Visual (BPV) Latihan 6 Buatlah sebuah lingkaran 2 dimensi dengan warna hitam sebagai berikut :

Ketikkan kode program berikut pada class:

Ketikkan kode program berikut pada form:

Jurusan Teknik Elektro FT UM

10

Modul Praktikum Bahasa Pemrograman Visual (BPV) Latihan 7 Menggambar Grafik Buatlah sebuah diagram lingkaran seperti gambar berikut :
Public Class Form1 Public Sub DrawPieChart(ByVal percents() As Integer, ByVal colors() As Color, ByVal surface As Graphics, ByVal location As Point, ByVal pieSize As Size) Dim sum As Integer = 0 For Each percent As Integer In percents sum += percent Next Dim percentTotal As Integer = 0 For percent As Integer = 0 To percents.Length() - 1 surface.FillPie( _ New SolidBrush(colors(percent)), _ New Rectangle(location, pieSize), CType(percentTotal * 360 / 100, Single), _ CType(percents(percent) * 360 / 100, Single)) percentTotal += percents(percent) Next Return End Sub Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim percents() As Integer = {TextBox1.Text, TextBox2.Text, TextBox3.Text} Dim colors() As Color = {Color.Blue, Color.Green, Color.Black} Dim graphics As Graphics = Me.CreateGraphics Dim location As Point = New Point(0, 0) Dim size As Size = New Size(200, 200) DrawPieChart(percents, colors, graphics, location, size) End Sub End Class

Hasilnya :

Jurusan Teknik Elektro FT UM

11

Modul Praktikum Bahasa Pemrograman Visual (BPV)

F.

TUGAS PRAKTIKUM Gambarlah sebuah lingkaran dengan panjang sama dengan 420 pixel, lebar sama dengan 170 pixel, koordinat x sama dengan 50, dan koordinat y sama dengan 5 Berikan penjelasan (komentar) pada kode program latihan 7 Gambarlah sebuah teks sebagai berikut : Nama-nama tokoh dalam kartun doraemon (cambria,12,bold,italic,underline): Doremi (times new roman, 14,blue) Nobita(arial,15,yellow,underline) Shizuka(algerian,16,black,italic) Jayen(batang,18,green,bold) Suneo(centaur,20,red,italic) Doraemon(dotum,22,brown,underline) Degisugi(kalinga,24,orange,bold) Buatlah program graphics dengan tampilan sebagai berikut:

Buatlah program graphics dengan tampilan sebagai berikut:

Jurusan Teknik Elektro FT UM

12

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Buatlah program graphics dengan tampilan sebagai berikut:

Petunjuk : Gunakan drawcurve

Buatlah program graphics dengan tampilan sebagai berikut: Ketika Button Ellipses di klik

Jurusan Teknik Elektro FT UM

13

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Ketika Button Ordinal Curves di klik

Ketika button Bezier Curves diklik

Jurusan Teknik Elektro FT UM

14

Modul Praktikum Bahasa Pemrograman Visual (BPV)

G.

TUGAS RUMAH Buatlah program graphics dengan tampilan sebagai berikut: Ketika Button Text Semi-Transparent di klik

Ketika Button text di dalam box di klik

Jurusan Teknik Elektro FT UM

15

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Ketika Button String Terpusat diklik

Jurusan Teknik Elektro FT UM

16

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Buatlah program graphics dengan tampilan sebagai berikut :

Buatlah sebuah grafik batang dan lingkaran pada satu form sesuai dengan kreasi kelompok anda.

Jurusan Teknik Elektro FT UM

17