Graphics Methodology – 3

Graphics Methodology – 3

There are many ways to handle graphics tasks in VB .Net, but it’s not always obvious which approach is best for a particular task. Some different approaches are discussed here.

The sorts of tasks that will be considered here include:
  – Drawing an image on a form
  – Displaying an image from a file on a form or in a picturebox
  – Drawing shapes on a form or picturebox
  – Simple animation.

Previous…

The sample code provided here is a simple line drawing program.  The user can select the line width and colour, and lines can drawn using a mouse down to start drawing, a mouse move to set the line distance and angle, and a mouse up to complete the line.

The shapes that are drawn are saved in a list as they are created.  All drawing is done to a picturebox object in the form’s paint event.

The program can be extended in a number of ways:

1. Options to change the line style from solid to dashed/dotted.
2. Option to create and use a custom line style
3. Options to select the line end shape
4. A delete function.  This would require showing the user the list of the lines that were created, and allowing selected lines to be removed from the list. The LineShape structure would need an identifier that the user can nominate to indicate their selection.
5. Replicate the line functions to draw rectangles and ellipses.

Create a form with a picture box and a button (btnPenColor) and numeric up/down control (nudPenWidth).   Add the following code.

Public Class SampleDraw

Structure LineShape
  Dim x1 As Integer
  Dim x2 As Integer
  Dim y1 As Integer
  Dim y2 As Integer
  Dim P As Pen
End Structure

Dim LineShapes As List(Of LineShape) = New List(Of LineShape)
Dim TempLine As LineShape
Dim myPen As Pen
Dim PenColor As Color = Color.Black
Dim PenWidth As Integer = 2
Dim Active As Boolean = False 'Indicates that a line is being drawn.

Private Sub SampleDraw_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  myPen = New Pen(Color.Black, 2)
End Sub

Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
  If e.Button = Windows.Forms.MouseButtons.Left Then
    TempLine = New LineShape
    TempLine.x1 = e.X
    TempLine.y1 = e.Y
    Active = True
End If
End Sub

Private Sub PictureBox1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseMove
  If Active Then
    TempLine.x2 = e.X
    TempLine.y2 = e.Y
    PictureBox1.Invalidate()
  End If
End Sub

Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
  TempLine.x2 = e.X
  TempLine.y2 = e.Y
  TempLine.P = myPen.Clone
  Active = False
  PictureBox1.Invalidate()
  LineShapes.Add(TempLine)
End Sub

Private Sub PictureBox1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PictureBox1.Paint
  If Active Then
    e.Graphics.DrawLine(myPen, TempLine.x1, TempLine.y1, TempLine.x2, TempLine.y2)
  End If
  For Each L As LineShape In LineShapes
    e.Graphics.DrawLine(L.P, L.x1, L.y1, L.x2, L.y2)
  Next
End Sub

Private Sub btnPenColor_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnPenColor.Click
  Dim CD As New ColorDialog
  CD.Color = myPen.Color
  If CD.ShowDialog <> Windows.Forms.DialogResult.Cancel Then
    PenColor = CD.Color
    myPen = New Pen(PenColor, PenWidth)
  End If
End Sub

Private Sub nudPenwidth_ValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles nudPenWidth.ValueChanged
  PenWidth = nudPenWidth.Value
  myPen = New Pen(PenColor, PenWidth)
End Sub

End Class
Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s