GDI+ is the way to draw shapes, fonts, images or generally anything graphic in Visual Basic .NET. Part 1 of this series described the namespaces in GDI+ and how GDI+ fits into the overall .NET architecture. Then the all-important Graphics object was introduced along with the two major ways to get a Graphics object in your program code.
Vector Graphics versus Bitmaps
One of the main ways that GDI+ is used is to create graphics made from combinations of lines. Since another word for a line is "vector" this way of using GDI+ is often called vector graphics. The other major type of graphics is create graphics using individual points of color like your TV or computer monitor does it. This is called bitmap graphics and will be covered in a later segment.
Vector graphics are great for creating any kind of shape in your program -- shapes like boxes, circles, arrows, and lines. Some pretty sophisticated graphics can be created using nothing but vectors (Adobe Illustrator is a good example of a vector graphics system). If you have a picture from a digital camera or scanner, however, the graphic will be a bitmap format.
GDI+ has a lot of methods built into it to let you create these shapes such as:
- DrawArc
- DrawPolygon
- DrawCurve
- DrawRectangle
You can also fill these shapes with colors or patterns using methods like these:
- FillEllipse
- FillPolygon
- FillRegion
- FillRegion
VB.NET's Intellisense will give you a complete list and it's a lot easier than reading it here. We're not going to cover all of them because they all work more or less the same way.
Part 1 introduced GDI+ by drawing text directly on a form. Let's try the DrawLine method as an example of what can be done with the drawing methods. Add a Panel to a standard Windows Application project and double click it to get the Paint event code created by VB.NET. Create the local instance of the Graphics object:
Dim g As Graphics = e.Graphics
To draw a line, the program needs to know two things:
- The Pen (this is a GDI+ object) that will be used to draw the line.
A Brush object can also be used in most cases to fill a shape with a pattern. - The start and end of the line.
The Pen can be created in advance or as part of the DrawLine method arguments. The start and end positions of the line can be either Point objects -- which can also be created in advance or within the argument list -- or simply four floating point or integer numbers to represent the X and Y positions of the start and end. A Point is also a GDI+ object. So you can see that there are a lot of alternative ways to write the code that will all give you the same result.
To illustrate a simple drawing action, lets draw a straight line using both a Pen and two Point objects that we create in advance. Here's the Pen object declaration.
Dim p As Pen = New Pen(Color.Crimson, 3)
There are four overloads (different sets of arguments) of the Pen object to allow either a Color or a Brush to be used to draw the shape and to allow the line width to be included or not. We're using a Color and a line width of 3 so the illustration below shows the overload we're using.
--------
Click Here to display the illustration
Click the Back button on your browser to return
--------
The Point objects are created in about the same way (the coordinate values were selected at random):
Dim P1 As Point = New Point(10, 10)
Dim P2 As Point = New Point(100, 40)
And finally, the drawing command:
g.DrawLine(p, P1, P2)
It's not too impressive, but here's what the result looks like. (The Panel component was also given a border so you can see the line in relationship to it.)
--------
Click Here to display the illustration
Click the Back button on your browser to return
--------
Just to drive the point home, these statements give the same result:
g.DrawLine(New Pen(Color.Crimson, 3), 10, 10, 100, 40)
e.Graphics.DrawLine(New Pen(Color.Crimson, 3), P1, P2)
We have enough concepts now to program a slightly more complex application: a plot of the classic trigonometric functions: sine, cosine, and tangent. Some real-world problems have to be solved in this one. First, we have to create a complex, continuous shape, not just a simple line or rectangle. Second, one of the shapes we have chosen can't actually be plotted because it becomes infinite at certain points. We have to code around that problem too.
Very briefly, this program ...
Calculates 360 points for each trig function and stores them in a Point array. The Paint event for a Panel is then forced and these points are painted on the Graphics object of the Panel.
On the next page, we apply what we have learned to graph the common trigonometry functions, sine, cosine, and tangent.
