Top Banner
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).
17

Modul 9 (Graphic)

Dec 14, 2014

Download

Documents

Visual Basic
Welcome message from author
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
Page 1: Modul 9 (Graphic)

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

Page 2: Modul 9 (Graphic)

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

Page 3: Modul 9 (Graphic)

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.

Page 4: Modul 9 (Graphic)

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)

Page 5: Modul 9 (Graphic)

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

Page 6: Modul 9 (Graphic)

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:

Page 7: Modul 9 (Graphic)

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 :

Page 8: Modul 9 (Graphic)

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 :

Page 9: Modul 9 (Graphic)

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Jurusan Teknik Elektro FT UM 9

Hasilnya :

Latihan 5

Ketik kode program berikut :

Hasilnya :

Page 10: Modul 9 (Graphic)

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:

Page 11: Modul 9 (Graphic)

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 :

Page 12: Modul 9 (Graphic)

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:

Page 13: Modul 9 (Graphic)

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

Page 14: Modul 9 (Graphic)

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Jurusan Teknik Elektro FT UM 14

Ketika Button Ordinal Curves di klik

Ketika button Bezier Curves diklik

Page 15: Modul 9 (Graphic)

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

Page 16: Modul 9 (Graphic)

Modul Praktikum Bahasa Pemrograman Visual (BPV)

Jurusan Teknik Elektro FT UM 16

Ketika Button String Terpusat diklik

Page 17: Modul 9 (Graphic)

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

kelompok anda.