Drawing graphics in vb.net using GDI+, written by matt squire.

Introduction:

Visual studio .Net presents a new way of drawing graphics, which is based on drawing to a GDI surface rather than using the old line, circle and print methods. This technology will not be new to those of us who can write c++ but if you have only ever worked in VB then this is a completely new way of drawing, which is entirely different to the old ways, left over from BASIC.

How it works:

In simple terms each visible element on the screen (being a window) contains a GDI surface which can be drawn to. To draw to a control, an instance of the GDI class must be created and set to the controls window:

Dim MyGDISurface As Graphics = me.CreateGraphics

Here an instance of the gdi class, known as Graphics is created and then set to the forms window using its CreateGraphics method. All drawing will be done in MyGDISurface, this is where the real image is stored which is transferred to the form. This way of drawing graphics may seem long and sometimes pointless when you used to be able to just call a method or two to draw to a form but GDI has many more features, and can be drawn to anything.

Rectangles:

A rectangle is used to specify sizes and positions of shapes, it works like the standard x1,y1,x2 and y2 values, but uses height and width instead of x2 and y2. Rather than passing four parameters to a function, now you can just pass a rectangle object, individual x and y values can still be used instead of a rectangle as there are usually several versions of the same drawing function. A rectangle can be created using the code:

Dim MyRectangle as new Rectangle(1,1,100,218)

This means x1=1, y1=1, height=100, width=218

Pens, Brushes and fonts – drawing to your surface:

Now that you have created a working GDI surface, you can begin to draw graphics and that means – yes more class instances. Things are drawn differently in gdi, for instance to draw a line you specify its x,y,x2,y2 positions as normal (no rectangle in the line) and then use a pen object which sets the colour and line weight. The three most important objects used in the creation of graphics are pens, brushes and fonts:

• Pen – defines line settings.
• Brush – contains fill options.
• Font – has font name, size and effects.

You create one of these in much the same way as any other class, for a pen you would type:

Dim MyRedPen as new pen(color.red)

An optional argument is line weight, which defaults to 1 if not specified:

Dim MyRedPen as new pen(color.red,3)

To draw a line with this pen you would use the code:

MyGDISurface.DrawLine(MyRedPen,1,1,100,253)

A brush contains settings for filling a shape, this could be in a square, circle or any multi-sided shape. A brush is created the same way as a pen and has the same one argument – colour:

Dim MyRedBrush as new SolidBrush(color.red)

This brush is very basic compared to what GDI+ is capable of. There are in all five GDI+ brush classes, these are SolidBrush, HatchBrush, TextureBrush, LinearGradientBrush and PathGradientBrush. A hatch brush is the same as solid except it uses a hatch style, Texture fills with a bitmap image, Linear gradient draws a simple gradient between two colours in various directions and a path gradient can be used to create more advanced gradients such as circular and square gradients. To use a hatch or either of the gradient brushes, your program must import System.Drawing.Drawing2D. The texture brush is included without importing this namespace. To import, insert the following code at the top of your program (above any classes).

Imports System.Drawing.Drawing2D

These examples show how to create the advanced brush classes. A hatch bush can be created in the same way a solid brush is created, only with more arguments - style, forecolour, backcolour.

Dim MyHatchBrush as new HatchBrush = new HatchBrush(HatchStyle.Plaid,color.red,color.blue)

The texture brush can fill objects using a bitmap; it must be passed the bitmap image as a bitmap object. The bitmap object can be created separately in a variable and then passed to the texture brush or it can be created in the texture brushes declaration, therefore eliminating the need for a new variable to be created:

Dim MyTextureBrush as new TextureBrush = TextureBrush(new bitmap(“c:\myimage.bmp”))

A gradient brush comes in two types; these are linear gradient – a simple fade between two colours and path gradient, which can create some very complex gradients. To create a linear gradient use:

Dim myBrush As New LinearGradientBrush(ClientRectangle, Color.Red,   Color.Yellow, LinearGradientMode.Vertical)

This code would create a vertical fade from red to yellow. This is fine for most drawing, but a path gradient can be used to create a far more complex gradient, which can create some interesting images. A path gradient uses a path object to define its behaviour, I won’t go into the path object in depth here but this example shows you how a simple path gradient is created:

' Create a path that consists of a single ellipse.

Dim path As New GraphicsPath()

path.AddEllipse(0, 0, 140, 70)

' Use the path to construct a brush.

Dim pthGrBrush As New PathGradientBrush(path)

' Set the color at the center of the path to blue.

pthGrBrush.CenterColor = Color.FromArgb(255, 0, 0, 255)

' Set the color along the entire boundary

' of the path to aqua.

Dim colors As Color() = {Color.FromArgb(255, 0, 255, 255)}

pthGrBrush.SurroundColors = colors

Fonts:

The font object is used to draw text; a font object contains the font name, size and information about effects such as bold, italic, underline. Here is a typical font class declaration:

Dim MyFont As New Font("Times new roman", 10, FontStyle.Bold)

This font could then be used in our GDI class to write “Hello world!” using MyFont and MyBrush at 1x, 1y:

MyGDISurface.DrawString(“Hello world!”,MyFont,MyBrush,1,1)

Some of the GDI+ functions:

Now that you understand how to use pens, brushes and fonts you can begin to explore the drawing functions, I will explain a few of these but to explain how every function works in detail would take forever and I am sure you can work out most for yourselves. The following code takes you through some simple functions.

        'create instance of graphics class, and set to forms client area

       Dim grap As Graphics = Me.CreateGraphics

        'create a read pen, with a thickness of 4

        Dim PenRed As New Pen(Color.Red, 4)

        'create a green brush

        Dim BrushGreen As New SolidBrush(Color.Green)

        'Draw an ellipse, using redpen

        'note that drawellipse does not draw a filled ellipse

        grap.DrawEllipse(PenRed, ClientRectangle)

        'draw a filled ellipse in the same place as

        'the previous ellipse, to create the

        'illusion of a filled ellipse with red, thick border

        grap.FillEllipse(BrushGreen, ClientRectangle)

        'draw a little rectangle in the bottom of the screen

        'instead of using the defualt version of this function

        'i used the second one so i could specify each

        'x and y position rather than a rectangle

        grap.FillRectangle(BrushGreen, 200, 200, 450, 450)

One more function I would like to mention is the arc, this function draws a section of a circle based on two angles. The curve is created using:

DrawArc(PenRed, centre x, centre y, arc width, arc height, start angle,  sweep angle)

The start angle is the angle from which the arc will begin, this is in angles and so has a maximum of 360 degrees, zero is at the bottom of the circle.

Conclusion:

Visit http://www.3rdlife.net - my Half life / general game programming site