Graphics Methodology

Graphics Methodology

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

The example will not consider drawing with the mouse as a pen, although the solutions mentioned here can be applied to that task. 

Image Properties.   Forms and controls have a number of image properties.  Examples include the backgroundimage property of a form, or the image property of a picturebox. If you set the image property to an image, either at design time or at run time, then that is sufficient to get the image displayed.  Sometimes you will have some control over the display (such as Stretch or Zoom or Center or Tile) to get just the effect you want.  This process is sufficiently simple that it wil not be dealt with here, other than as an option for displaying a drawn image that you may have created.  

The Graphics Object. To understand graphics in .Net it is essential to understand the Graphics object.  Virtually everything to do with drawing in .Net is done through the Graphics object.  Note that ‘drawing’ refers to placing an image (eg, from a file), placing image objects (such as a graphics path), drawing text, or drawing other objects such as lines, circles, ellipses or rectangles. 

The Graphics object can be considered as a drawing surface with its own set of drawing tools.  The tools that are provided are tailored to that surface – they understand how to draw on it.  You must use the tools of the Graphics object to draw on the surface that the Graphics object provides.

But, of course, you don’t want to draw on a graphics object surface, you want to draw on a form or on a control or on an image or on a piece of paper. To make sure that your drawing appears where you want it to appear, you must be sure that the Graphics object you are using was created from the object (form, bitmap, printer etc) where you want your drawing to appear.

So the process is:
– Create a graphics object from the object that you want to ‘draw on’.
– Draw on the graphics object using the tools it provides.
– Dispose of the Graphics object.

The Paint Event.  For Forms and Controls you don’t have to worry about creating the Graphics object – if you do your drawing in the form or control Paint event, then you are provided with a graphics object that has been created from that form or control.  When you draw to that Graphics object’s drawing surface, your drawing will appear on the form or control.

(Drawing to the printer object is the same – if you do the drawing in the PrintPage event, the e argument of the event handler has a Graphics property that is the graphics object for the printed page.)

Below is an example that puts some fancy text inside a box on a form. No new Graphics object is being created, because it is already available as a property of the event argument ‘e’.

 Private Sub Form1_Paint(ByVal sender As Object, _
                        ByVal e As System.Windows.Forms.PaintEventArgs) _
                        Handles Me.Paint
  Dim P As Pen = New Pen(Color.Red, 3)
  P.DashStyle = Drawing2D.DashStyle.Dash
  e.Graphics.DrawRectangle(P, 100, 100, 100, 20)
  Dim B As Brush = New SolidBrush(Color.RoyalBlue)
  Dim F As Font = New Font(System.Drawing.FontFamily.GenericSerif, _
                    16, FontStyle.Italic, GraphicsUnit.Pixel)
  e.Graphics.DrawString("Hello World", F, B, 105, 102)
End Sub

Note that all the constants used in that code – the text, the font, the pen or brush setting, the position and size – could be replaced by variables that are set in some other part of the application, and could be changed at any time  If something changes, then the form’s Invalidate method should be called to ensure that the drawing is immediately refreshed –

Me.Invalidate

Drawing in the Paint event of a form or control is by far the simplest way to render an image onto a form or control. The only problem is that when the drawing becomes complex, there may be a lot of code executing in the paint event, and if that is happening frequently then the machine might be slowed.  The solution is to draw to an image, and then copy that image onto the form or control in the Paint event.  This means that the image is re-constructed only when it needs to be – when something changes – but it is displayed whenever it needs to be shown – in the paint event.  Displaying a bitmap that has been prepared beforehand consumes very little processing power, and display speed does not vary with the complexity of the drawing.

 Dim myBitmap As Bitmap = New Bitmap(103, 23, _
      System.Drawing.Imaging.PixelFormat.Format32bppRgb)

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  Dim G As Graphics = Graphics.FromImage(myBitmap)
  G.Clear(Me.BackColor)
  Dim P As Pen = New Pen(Color.Red, 3)
  P.DashStyle = Drawing2D.DashStyle.Dash
  G.DrawRectangle(P, 1, 1, 100, 20)
  Dim B As Brush = New SolidBrush(Color.RoyalBlue)
  Dim F As Font = New Font(System.Drawing.FontFamily.GenericSerif, _
      16, FontStyle.Italic, GraphicsUnit.Pixel)
  G.DrawString("Hello World", F, B, 5, 2)
End Sub

Private Sub Form1_Paint(ByVal sender As Object, _
      ByVal e As System.Windows.Forms.PaintEventArgs) _
      Handles Me.Paint
  e.Graphics.DrawImage(myBitmap, 100, 100)
End Sub

Note the changes that have been made.  A bitmap has been created at the correct size.  Before the drawing is done, a Graphics object is created from the bitmap, and is cleared to the correct colour. The drawing is then done to the graphics object.  The drawing parameters have changed sligtly – the original drawing allowed the rectangle to spill outside the defined area (it is a 3-pixel line) but that won’t happen when drawing into a bitmap, so the rectangle has been shifted slightly.

Although this code has been put in the form load event, in practice it would be a method in your code that was called (probably with arguments to specifiy the text, color, size, etc) whenever it needed to be created or changed. 

This model – draw to a bitmap when the drawing changes, display the image when needed – is actually so easy and flexible that you will probably find that you use it even when the drawing is relatively simple. There is a more complete example here.

Continued…

  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