GDI+ is the way to draw shapes, fonts, images or generally anything graphic in Visual Basic .NET. You can get the most from this tutorial by starting with Part 1 where the fundamentals of GDI+ are explained.
Previous Lesson Links
- Part 1 - Introduction to GDI+ and the Graphics object
- Part 2 - Drawing a curve with a series of connected points
- Part 3 - Advanced vector graphics with an intro to bitmapped graphics
- Part 4 - Blending and merging colors and shapes in the same graphic
In Part 4 of the tutorial, colors were blended and both the mix of colors and an overlaid image were controlled by a scroll bar. The result was the basis for an example of a custom "temperature guage". About Visual Basic reader Geoff also contributed his Traffic Light GDI+ program that he uses to teach the concept of binary numbers.
Now that we know how to paint some fairly complicated shapes and interactively change them, this segment will show you how to move them around before painting them.
But before we start writing the code to do this, we need to cover a few more basic concepts. The first one is the idea of coordinate systems in GDI+. When a shape is painted in GDI+, where it's painted depends on the coordinate system.
Let's consider a metaphor. Suppose you're driving your car and you're lost. You stop and ask for directions and you're told, "There's a crossroad up ahead. To get to where you want to go, go 3 north and 5 west." Your first reaction would probably be that those directions aren't very useful. One question you might ask is, "Starting right here? Or starting at the crossroad?" Another question would be, "3 and 5 what? Miles? Kilometers? Traffic lights?"
The directions you received are in what GDI+ calls world coordinates. World coordinate vectors are just X and Y units, but to be useful, you have to know where to start and what the units are. We haven't paid much attention to this because we have simply assumed the defaults. We start at (0,0) and we have used pixels as the unit. GDI+ has a nice assortment of units to match whatever you're doing. Check out the PageUnit property to read about them.
After the starting point is applied to world coordinates, the result is called the page coordinates. When the unit is also applied, it's called device coordinates. GDI+ applies a starting point and unit every time something is drawn.
Personally, I don't find these definitions to be very useful because ... well ... it seems obvious to me. It is necessary to know what is happening "behind the scene" to understand our next topic, Matrix operations. This is the GDI+ code that must be written to actually do the tranformations and it's not quite as obvious. On the next page, we dig into Matrix operations - the way GDI+ moves things around in code.
