Overview of Vector Graphics

  • Article

Windows GDI+ draws lines, rectangles, and other figures on a coordinate system. You can choose from a variety of coordinate systems, but the default coordinate system has the origin in the upper left corner with the x-axis pointing to the right and the y-axis pointing down. The unit of measure in the default coordinate system is the pixel.

illustration of a coordinate system with the x-axis extending to the right and the y-axis extending down

A computer monitor creates its display on a rectangular array of dots called picture elements or pixels. The number of pixels appearing on the screen varies from one monitor to the next, and the number of pixels appearing on an individual monitor can usually be configured to some extent by the user.

illustration of a rectangular grid, with three cells in that grid labeled by their coordinates

When you use GDI+ to draw a line, rectangle, or curve, you provide certain key information about the item to be drawn. For example, you can specify a line by providing two points, and you can specify a rectangle by providing a point, a height, and a width. GDI+ works in conjunction with the display driver software to determine which pixels must be turned on to show the line, rectangle, or curve. The following illustration shows the pixels that are turned on to display a line from the point (4, 2) to the point (12, 8).

illustration showing a rectangular grid with cells filled to indicate a line between two endpoints

Over time, certain basic building blocks have proven to be the most useful for creating two-dimensional pictures. These building blocks, which are all supported by GDI+, are given in the following list:

  • Lines
  • Rectangles
  • Ellipses
  • Arcs
  • Polygons
  • Cardinal splines
  • Bézier splines

The Graphics class in GDI+ provides the following methods for drawing the items in the previous list: DrawLine, DrawRectangle, DrawEllipse, DrawPolygon, DrawArc, DrawCurve (for cardinal splines), and DrawBezier. Each of these methods is overloaded; that is, each method comes in several variations with different parameter lists. For example, one variation of the DrawLine method receives the address of a Pen object and four integers, while another variation of the DrawLine method receives the address of a Pen object and two Point object references.

The methods for drawing lines, rectangles, and Bézier splines have plural companion methods that draw several items in a single call: DrawLines, DrawRectangles, and DrawBeziers. Also, the DrawCurve method has a companion method, DrawClosedCurve, that closes a curve by connecting the ending point of the curve to the starting point.

All the drawing methods of the Graphics class work in conjunction with a Pen object. Thus, in order to draw anything, you must create at least two objects: a Graphics object and a Pen object. The Pen object stores attributes of the item to be drawn, such as line width and color. The address of the Pen object is passed as one of the arguments to the drawing method. For example, one variation of the DrawRectangle method receives the address of a Pen object and four integers as shown in the following code, which draws a rectangle with a width of 100, a height of 50 and an upper-left corner of (20, 10).

myGraphics.DrawRectangle(&myPen, 20, 10, 100, 50);