Drawing Surfaces

Every drawing application (regardless of the operating system), consists of three common components: a canvas, a brush or pen, and a process.

1. The canvas is the space on which objects will be drawn. For example, in a Windows application, a Windows Form is a canvas.
2. A brush or a pen represents the texture, color, and width of the objects to be drawn on the canvas.
3. The process describes how objects are drawn on the canvas.

To draw graphics objects you need to have a pen or a brush, which defines the texture, color, and width of the drawing. For example, if you draw a line or a rectangle, you need to create a pen with a color and width.

The process component of the drawing application includes making a call to draw the line or rectangle on the form.

Each drawing surface has four common properties: width, height, resolution, and color depth.

• The width and height properties of a surface determine the size of the surface, and they are specified by the number of pixels horizontally and vertically, respectively.
• The resolution property of a surface is a measurement of the output quality of graphics objects or images in dots per inch (dpi). For example, a resolution of 72 dpi means that 1 inch of the surface holds 72 horizontal and 72 vertical pixels. For monitors and LCDs, the resolution is frequently specified in terms of the total number of pixels horizontally and vertically rather than a pixel density. Thus a monitor resolution of 1280x1024 means that the screen of the monitor can hold 1,280 horizontal pixels and 1,024 vertical pixels.
• The color depth of a surface is the number of colors used to represent each pixel.

Definition: Pixel

A pixel is the smallest element that participates in the drawing process to display graphics objects or images on the screen. The pixel density is often represented by a value in dots per inch (dpi).

The quality of a pixel is directly proportional to the color depth. The Color structure represents a color in GDI+. It has four components: alpha, red, green, and blue. The RGB (red-green-blue) components of a color represent the number of possible colors (see Figure 2.1). Each component in RGB has 256 (28) color combinations. Hence all three components of GDI+ color represent 256x256x256 possible colors. The alpha component determines the transparency of the color, which affects how the color mixes with other colors.

Figure 2.1. Color components in GDI+

To see the proper colors defined in the GDI+ color structure, a drawing surface must support at least a 24-bit color system (for the RGB components of a color structure), which means that each pixel of the surface must be able to hold 24 bits (8 bits each for the R, G, and B components, as noted already). Surfaces with less than 24 bits per pixel may not display graphics objects and images exactly as defined in a drawing application. We will discuss colors in more detail in Chapter 5.

Note

The color depth of a surface is different from the color depth of a particular display device, such as a monitor or a printer. Most monitors can support over a million colors, and some printers may support only black and white.

GDI+ provides three types of drawing surfaces: forms, printers, and bitmaps.

2.1.1 Forms as a Surface

When you write a Windows application that draws something on a form, the form acts as a drawing surface and supports all the properties required by a drawing surface.

2.1.2 Printers as a Surface

When you print from an application, the printer acts as a drawing surface. You can set a printer's resolution and color depth, as well as the height and width of the paper. We will discuss printer-related functionality in Chapter 11.

2.1.3 Bitmaps as a Surface

When you create images in memory and save them as a bitmap, the bitmap functions as a drawing surface. You can set the image width, height, resolution, and color depth properties. Bitmap surfaces are commonly used for writing graphics Web applications. Drawing works a little differently in Web applications. For example, if you want to draw a line and a rectangle in a Web page using GDI+, you need to create an image, use this image as a surface for the line and rectangle objects, set its surface-related properties, and then send the image to the browser. We will discuss Web graphics applications in more detail in Chapter 12.