Grafik 2D PictureBox VB 2008

Tips kali ini Grafik 2D menggunakan software Microsoft Visual Basic 2008 Express Edition. Perhatikan langkah-langkahnya sebagai berikut:

ToolBox yang digunakan perhatikan tabel di bawah ini:

Perancangan/Design antar mukanya, perhatikan gambar di bawah ini:

Klik kanan pada Design, lalu pilih View Code isikan Source program seperti di bawah ini:

OptionStrictOn

Imports System.Drawing.Drawing2D


PublicClass Form1
REM Data Grafik yang akan di plot
Dim Months() AsString = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", _ "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}
Dim Sales() AsInteger = {0, 314, 672, 429, 715, 642, 153, 699, 622, 901, 345, 655}
Dim LeftMargin AsInteger = 35
’ # of Pixels left unused at right side of PicBox
Dim RightMargin AsInteger = 15
’ # of pixels above base of picturebox the X-Axis is placed
Dim BaseMargin AsInteger = 35
’ Margin at Top
Dim TopMargin AsInteger = 10
’ Variable to hold length of vertical axis
Dim VertLineLength AsInteger
’ Variable to hold length of horizontal axis
Dim BaseLineLength AsInteger
’ Variable to store length of each line segment
Dim LineWidth AsDouble
Dim g As Graphics
’ Next, create a Bitmap object which is
’ the same size and resolution as the PictureBox
Dim bmap As Bitmap

PrivateSub DrawOutline()
bmap = New Bitmap(PBLineChart.Width, PBLineChart.Height, PBLineChart.CreateGraphics)
’ Assign the Bitmap to the Graphics object.
g = Graphics.FromImage(bmap)
Dim StartPoint AsNew Point(LeftMargin, PBLineChart.Height - BaseMargin)
Dim EndPoint AsNew Point(LeftMargin, TopMargin)
’ Basic Pen to draw outline lines
Dim LinePen AsNew Pen(Color.Red, 2)
’ Draw the vertical line
g.DrawLine(LinePen, StartPoint, EndPoint)
Dim VertLineLength AsInteger = PBLineChart.Height - (BaseMargin + TopMargin)
Dim VertGap AsInteger = CInt(VertLineLength / 10)
Dim TickSP AsNew Point(LeftMargin - 5, StartPoint.Y - VertGap)
Dim TickEP AsNew Point(LeftMargin, StartPoint.Y - VertGap)
Dim ValueFont AsNew Font("Arial", 8, FontStyle.Regular)
For i AsInteger = 1 To 10
’ Tick mark
g.DrawLine(New Pen(Color.Black), TickSP, TickEP)
’ Tick Values as text
g.DrawString(CStr(i * 100), ValueFont, Brushes.Red, 2, TickSP.Y - 5) ’ Reset y positions, moving 10% up vertical line
TickSP.Y -= VertGap
TickEP.Y -= VertGap
Next
g.DrawLine(LinePen, LeftMargin, PBLineChart.Height - BaseMargin, PBLineChart.Width - RightMargin, PBLineChart.Height - BaseMargin)
EndSub

PrivateSub btnDraw_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnDraw.Click
DrawOutline()
DrawHorizontalLines()
DrawVerticalGridLines()
DrawTheLine()
ShowMonths()
FinalDisplay()
EndSub

PrivateSub DrawTheLine()
Dim MyPath AsNew GraphicsPath
Dim MyPen As Pen = New Pen(Color.Blue, 3)
g.DrawPath(MyPen, MyPath)
Dim VertScale AsDouble
Dim VertLineLength AsInteger = PBLineChart.Height - (BaseMargin + TopMargin)
’Dim MyPath As New GraphicsPath
Dim XPosStart AsInteger = CInt(LeftMargin + 30)
VertScale = VertLineLength / 1000
Dim XPosEnd AsInteger = CInt(XPosStart + LineWidth)
Dim YPosStart AsInteger = CInt(Sales(0) * VertScale)
Dim YPosEnd AsInteger = CInt(Sales(1) * VertScale)
’Dim MyPath As New GraphicsPath
’ Manually add the first circle to the path
MyPath.AddEllipse(XPosStart - 2, YPosStart - 2, 4, 4)
’ Manually add the first line to the Path
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
’MyPath.AddRectangle(New Rectangle(XPosEnd - 2, YPosEnd - 2, 4, 4))
For i AsInteger = 1 To UBound(Sales) - 1
’ Update the X and Y positions for the next value:
’ Move start point one line width to the right
XPosStart = XPosEnd
’ Move end point one line width to the right
XPosEnd = CInt(XPosStart + LineWidth)
’ Assign YPosStart the ’old’ value of Y
YPosStart = YPosEnd
’ Assign YPosEnd the next the next scaled Sales figure
YPosEnd = CInt(Sales(i + 1) * VertScale)
’ Add next circle
MyPath.AddEllipse(XPosStart - 2, YPosStart - 2, 4, 4)
’ Add the next line segment to the GraphicsPath
MyPath.AddLine(XPosStart, YPosStart, XPosEnd, YPosEnd)
Next
’ Finally, manually add the last circle
MyPath.AddEllipse(XPosEnd - 2, YPosEnd - 2, 4, 4)
g.RotateTransform(180)
’ Because the rotation also moves the line out of view (to the left), so
’ we need to scale the x so that it is on the (plus) side of the
’ vertical axis.
’ The Y value remains unchanged, so a "scale" of 1 is used.
’ (i.e. no change made)
g.ScaleTransform(-1, 1)
’ Move the start point down to the bottom left corner
’ The X value remains the same
’ Y is shifted down to the end of the vertical axis, adjusted by
’ a fudge factor of 10 to compensate for the vertical scaling.
g.TranslateTransform(0, VertLineLength + 10, MatrixOrder.Append)
’Dim MyPen As Pen = New Pen(Color.Blue, 3)
g.DrawPath(MyPen, MyPath)
g.ResetTransform()
EndSub

PrivateSub FinalDisplay()
PBLineChart.Image = bmap
g.Dispose()
EndSub

PrivateSub ShowMonths()
’ Set the start point of the first string
Dim TextStartX AsInteger = CInt(LeftMargin + 18)
’ Create a Brush to draw the text
Dim TextBrsh As Brush = New SolidBrush(Color.Red)
’ Create a Font object instance for text display
Dim TextFont AsNew Font("Arial", 10, FontStyle.Regular)
For i AsInteger = 0 To Months.Length - 1
’ Draw the name of the onth
g.DrawString(Months(i), TextFont, TextBrsh, TextStartX, _
CInt(PBLineChart.Height - (BaseMargin - 4)))
’ Move start point for next name along to the right
TextStartX += CInt(LineWidth)
Next
EndSub

PrivateSub DrawVerticalGridLines()
Dim ThinPen AsNew Pen(Color.LightGreen, 2)
’Dim StartPoint As New Point(LeftMargin, PBLineChart.Height - BaseMargin)
’Dim EndPoint As New Point(LeftMargin, TopMargin)
Dim StartPoint AsNew Point(LeftMargin, PBLineChart.Height - BaseMargin)
Dim EndPoint AsNew Point(LeftMargin, TopMargin)
’Dim Sales() As Integer = {835, 314, 672, 429, 715, 642, 153, 699, 622, 901, 345, 655}
’ Basic Pen to draw outline lines
Dim LinePen AsNew Pen(Color.Red, 2)
’ Draw the vertical line
g.DrawLine(LinePen, StartPoint, EndPoint)
’ Calculate length of baseline drawn by the code above
BaseLineLength = PBLineChart.Width - (LeftMargin + RightMargin)
’ Calculate the width of each line segment
LineWidth = (BaseLineLength / Sales.Length)
’ Set the start point of the first string
Dim LineStartX AsInteger = CInt(LeftMargin + 30)
For i AsInteger = 0 To Months.Length - 1
g.DrawLine(ThinPen, LineStartX, TopMargin, LineStartX, PBLineChart.Height - (BaseMargin + 4))
’ Move start point along to the right
LineStartX += CInt(LineWidth)
Next
ThinPen.Dispose()
EndSub

PrivateSub DrawHorizontalLines()
’ Calculate vertically equal gaps
Dim VertLineLength AsInteger = PBLineChart.Height - (BaseMargin + TopMargin)
Dim VertGap AsInteger = CInt(VertLineLength / 10)
’ Set the Start and End points
’ = Left and right margins on the baseline
Dim StartPoint AsNew Point(LeftMargin + 3, PBLineChart.Height - BaseMargin)
Dim EndPoint AsNew Point(PBLineChart.Width, PBLineChart.Height - BaseMargin)
’ Initial settings
Dim LineStart AsNew Point(StartPoint.X, StartPoint.Y - VertGap)
Dim LineEnd AsNew Point(EndPoint.X, StartPoint.Y - VertGap)
Dim ThinPen AsNew Pen(Color.LightGreen, 3)
For i AsInteger = 1 To 10
’ Draw a line
g.DrawLine(ThinPen, LineStart, LineEnd)
’ Reset Start and End Y positions, moving up the vertical line
LineStart.Y -= VertGap
LineEnd.Y -= VertGap
Next
ThinPen.Dispose()
EndSub

PrivateSub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
End
EndSub

EndClass

Dengan menekan F5 maka tampilannya seperti gambar di bawah ini:

Untuk menampilkan Grafiknya tekan tombol Tampilkan (gambar pertama di atas) dan untuk menutup tekan Tutup.

Selamat mencoba Guys! Nantikan Tips Aplikasi Cantik Lainnya by Verynandus Hutabalian