GRAPHIC PADA VB.NET

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

Gambar

 

 

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

 GambarGambar

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

 

Mengambar Garis pada Form

Pengambaran Graphics diatas form dapat dilakukan melalui Objek Graphics yang dapat dideklarasikan sebagai berikut :

Dim MyGraphics As System.Drawing.Graphics = Me.CreateGraphics

Objek Graphics menyediakan berbagai metode untuk menggambar seperti DrawLine, DrawRectangle, dll  

Dalam pengembaran, kita membutuhkan Objek Pen menyediakan atribut seperti Warna dan Ketebalan garis dalam ukuran pixel.

Objek Pen dapat dideklarasikan sebagai berikut :

Dim Pen As New System.Drawing.Pen(Warna,Tebal)

Dimana Warna adalah warna yang diinginkan, dan Tebal adalah tebal pen dalam ukuran point.

 

Melakukan overriding terhadap Metoda OnPaint

OnPaint Event Handle adalah event yang akan dibangkitkan setiap kali form mengalami refresh (pada saat minimize, maximize maupun ditimpa oleh form lain), jadi jika kita melakukan overriding terhadap Event ini dan menempatkan perintah pengambaran garis didalamnya ini, maka garis tersebut akan digambar setiap proses refresh.

Parameter PaintEventArgs pada Sub OnPaint merupakan objek Graphics, sehingga kita tidak perlu melakukan Me.CreateGraphics.

Mengambar grafik vector 2 dimensi

Grafik vector merupakan kemampuan menggambar bentuk-bentuk tradisional seperti garis, kurva dan bentuk berdasarkan sekumpulan titik tertentu.

Untuk pengambaran grafik vector kita dapat menggunakan objek Pen dan Brush, dimana objek Pen untuk pengambaran bentuk garis, dan Brush untuk objek isian.

Mengambar garis  dengan Pen

Perintah DrawLine(pen, x1,y1, x2,y2) digunakan untuk menggambar garis dari koordinat awal (x1,y1) ke koordinat akhir (x2,y2)

Mengambar persegi  dengan Pen

Kita dapat menggunakan metoda DrawRectangle(Pen, x,y,lebar,tinggi) pada objek grafik untuk mengambar persegi pada koordinat x,y dengan lebar dan tinggi tertentu.

Mengambar Ellipse pada Form dengan Pen

Kita dapat menggunakan metoda DrawEllipse(Pen,x,y,lebar,tinggi) pada objek grafik untuk mengambar ellipse pada koordinat x,y dengan ukuran lebar dan tinggi tertentu

Mengambar Arc pada Form dengan Pen

Kita dapat menggunakan metoda DrawArc(Pen,x,y,lebar,tinggi,sudutawal,sudutakhir) untuk mengambar arcus, adapun perbedaan antara Ellipse dengan Arc adalah, kalau ellipse adalah gambar kurva tertutup, sedangkan Arc ditentukan oleh sudut awal dan akhir pengambaran kurva.

Mengambar Pie pada Form dengan Pen

Kalau Arc adalah kurva dengan sudut awal dan akhir, demikian juga pie, bedanya adalah pie merupakan kurva tertutup. Untuk menggambar pie dapat digunakan metoda DrawEllipse(Pen,x,y,lebar,tinggi).

Menggunakan structure Point

Kita juga dapat menggunakan structure point untuk penentuan koordinat (x,y) awal dan akhir pada perintah DrawLine(pen, point1, point2).

Menggambar poligon dengan array dari point

DrawPolygons(Pen,PointArray) merupakan kurva tertutup yang dibentuk oleh garis-garis, untuk menggambar poligon anda perlu menyediakan array yang berisi koordinat (x,y) dari sudut-sudut polygon.

 

 

Menggambar cardinal splines dengan array dari point

Jika polygon merupakan kurva tertutup yang dihubungan oleh garis lurus pada setiap koordinat (x,y) sudutnya, maka DrawCurve(Pen, PointArray, Tangen) merupakan kurva terbuka yang dibentuk dengan garis lengkung yang memiliki nilai tangent tertentu.

Menggambar Bezier splines dengan array dari point

DrawBezier(pen, x1, y1, x2, y2, x3, y3, x4, y4) merupakan kurva dengan dari koordinat (x1,y1) awal ke koordinat (x2,y2), dengan dua koordinat control (x3,y3) dan (x4,y4).

Menggunakan Path

Path dibentuk oleh kombinasi dari berbagai bentuk seperti :

  • Lines
  • Rectangles
  • Ellipses
  • Arcs
  • Polygons
  • Cardinal splines
  • Bézier splines

Menggunakan structure rectangle

Sebagaimana dengan structure point, kita dapat juga menggunakan struktur rectangle untuk mengambar bentuk yang membutuhkan koordinat x,y dan ukuran lebar, tinggi, misalnya

DrawRectangle(pen, rectangle), DrawArc(Pen,x,y,rectangle,sudutakhir),

DrawEllipse(Pen,rectangle), DrawEllipse(Pen,rectangle)

Mengambar objek isian pada Form dengan Brush

Kalau kita mengambar bentuk dengan Pen, maka hasilnya tidak disertai dengan isian, sedangkan untuk menghasilkan gambar dengan isian kita membutuhkan Brush. 

Menggunakan SolidBrush

SolidBrush(warna) dapat digunakan untuk menggambarkan objek isian seperti FillRectangle(brush, rectangle), FillEllipse(brush, rectangle), FillPie(brush, rectangle, sudutawal, sudutakhir),  dengan warna yang ditentukan pada brush.

Menggunakan HatchBrush

HatchBrush(pola, warnagaris, warnalatarbelakang), dapat digunakan untuk menggambar objek isian dengan pola isian tertentu seperti :

  • HatchStyle.Horizontal
  • HatchStyle.Vertical
  • HatchStyle.ForwardDiagonal
  • HatchStyle.HatchStyleBackwardDiagonal
  • HatchStyle.HatchStyleCross
  • HatchStyle.HatchStyleDiagonalCross

HatchBrush terdefinisi pada namespace System.Drawing.Drawing2D

 

  • Pembuatan Objek Graphics

Sebuah objek graphics dapat dibuat dengan cara :

ü  Menerima sebuah reference ke sebuah objek graphics sebagai bagian dariPaintEventArgs 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 Paint Event Args

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. CreateGraphics dari form atau control yang anda ingin gambar :

Contoh method creategraphics pada form:

Gambar

 

Membuat dari objek Image

Sebagai tambahan, pembuatan objek Graphics dari objek yang diturunkan dari kelas

Image dengan cara memanggil method Graphics.FormImage.

Gambar

 

 

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)

  • 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:Gambar

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.

Gambar

 

BERIKUT INI MERUPAKAN SEBUAH PROGRAM UNTUK MEMBUAT PIE CHART

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

Gambar

 

BERIKUT MERUPAKAN SEBUAH PROGRAM UNTUK MEMBUAT BERMACAM-MACAM BENTUK GRAPHIC

Public Class Form1

 

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim gambar As System.Drawing.Graphics

        Dim pena1 As New Pen(Color.Cyan, 2)

        Dim pena3 As New Pen(Color.Red, 2)

        gambar = Me.CreateGraphics

        gambar.DrawRectangle(pena1, 5, 5, 150, 275)

        gambar.DrawRectangle(pena3, 200, 80, 250, 150)

 

        Dim gambar1 As System.Drawing.Graphics

        Dim pena2 As New Pen(Color.Yellow, 2)

        Dim pena4 As New Pen(Color.Cyan, 2)

        gambar1 = Me.CreateGraphics

        gambar1.DrawEllipse(pena2, 5, 5, 150, 275)

        gambar1.DrawEllipse(pena4, 200, 80, 250, 150)

 

    End Sub

 

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

        PictureBox1.Visible = True

        Dim G As Graphics

        G = PictureBox1.CreateGraphics

        Dim points() As Point = {New Point(20, 20), New Point(100, 200), New Point(250, 100), New Point(350, 200)}

        G.DrawCurve(Pens.Black, points, 0.1)

        G.DrawCurve(Pens.GreenYellow, points, 0.5)

        G.DrawCurve(Pens.Green, points, 1)

        G.DrawCurve(Pens.Red, points, 1.5)

 

    End Sub

 

    Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

        PictureBox1.Visible = True

        Dim G As Graphics

        Dim blackPen As New Pen(Color.Blue, 2)

        Dim start As New Point(40, 100)

        Dim control1 As New Point(150, 10)

        Dim control2 As New Point(240, 20)

        Dim [end] As New Point(300, 80)

 

        Dim start1 As New Point(40, 100)

        Dim control4 As New Point(100, 40)

        Dim control3 As New Point(200, 60)

        Dim [end1] As New Point(300, 80)

 

        Dim start2 As New Point(40, 100)

        Dim control5 As New Point(100, 60)

        Dim control6 As New Point(250, 140)

        Dim [end2] As New Point(300, 80)

 

        Dim start3 As New Point(40, 100)

        Dim control7 As New Point(100, 80)

        Dim control8 As New Point(250, 180)

        Dim [end3] As New Point(300, 80)

 

        G = PictureBox1.CreateGraphics

        G.DrawBezier((blackPen), start, control1, control2, [end])

        G.DrawBezier((blackPen), start1, control4, control3, [end1])

        G.DrawBezier((blackPen), start2, control5, control6, [end2])

        G.DrawBezier((blackPen), start3, control7, control8, [end2])

 

    End Sub

End Class

 

HASIL

Gambar

Gambar

 

Penjelasan

Dalam program ini  terdapat tiga button jika diklik button Ellipses akan muncul dua buah persegi panjang yang didalamnya terdapat masing-masing satu lingkaran elips, untuk membuatnya digunakan fungsi DrawRectangle untuk persegi panjang dan DrawEllipse untuk lingkaran elipsnya. Untuk menetukan warna dan besarnya garis dibuat variabel pena1,2,3 dan 4.Kemudian saat diklik button Ordinal Curves akan tercipta garis-garis yang membentuk kurve untuk membuatnya digunakan fungsi DrawCurve, untuk posisi titik koordinat dari kurvenya diisikan dalam variabel point. Lalu dipanggil dengan variabel G. Dibuat juga picturebox untuk menampung hasil dari penggambaran kurva tersebut.Saat ditekan button Bezier Curves akan muncul gambar garis denga lengkungan-lengkungan, untuk membuatnya digunakan fungsi DrawBezier. Dibuat juga picturebox untuk menapung hasil dari penggambaran lengkurang garis-garis tersebut.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s