Modul Praktikum Bahasa Pemrograman Visual (BPV) Jurusan Teknik Elektro FT UM 1 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).
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 1
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).
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 2
Posisi koordinat dari komponen picturebox dapat dengan mudah diatur secara
manual pada properties location picturebox sesuai gambar berikut:
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
Gambar berada dikoordinat x= 84, y=81
Garis koordinat y
Koordinat dasar x=0, y=0
Garis koordinat x
Lokasi Koordinat X,Y dari objek
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 3
menggambar garis dan bentuk, merender teks, dan menampilkan gambar dengan GDI+
objek graphics harus dibuat terlebih dahulu. Objek graphics me representasikan
permukaan gambar GDI+ yaitu objek yang digunakan untuk membuat gambar grafis.
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
‘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.
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 4
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)
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 5
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 Shape
Graphics.DrawLine Line:membutuhkan koordinat untuk mengidentifikasi
titik awal dan akhir
Graphics.DrawPolygon Bentuk complex : membutuhkan array koordinat
Graphics.DrawRectangle Rectangle : membutuhkan 1 atau lebih objek sebagai
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))
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 6
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:
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 7
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 :
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 8
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 :
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 9
Hasilnya :
Latihan 5
Ketik kode program berikut :
Hasilnya :
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 10
Latihan 6
Buatlah sebuah lingkaran 2 dimensi dengan warna hitam sebagai berikut :
Ketikkan kode program berikut pada class:
Ketikkan kode program berikut pada form:
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 11
Latihan 7
Menggambar Grafik
Buatlah sebuah diagram lingkaran seperti gambar berikut :
Public Class Form1
Public Sub DrawPieChart(ByVal percents() As Integer, ByValcolors() As Color, ByVal surface As Graphics, ByVal location AsPoint, 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, ByVale 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 SubEnd Class
Hasilnya :
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 12
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:
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 13
Buatlah program graphics dengan tampilan sebagai berikut:
Petunjuk : Gunakan drawcurve
Buatlah program graphics dengan tampilan sebagai berikut:
Ketika Button Ellipses di klik
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 14
Ketika Button Ordinal Curves di klik
Ketika button Bezier Curves diklik
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 15
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
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 16
Ketika Button String Terpusat diklik
Modul Praktikum Bahasa Pemrograman Visual (BPV)
Jurusan Teknik Elektro FT UM 17
Buatlah program graphics dengan tampilan sebagai berikut :
Buatlah sebuah grafik batang dan lingkaran pada satu form sesuai dengan kreasi