Drawing Shapes

The Bitmap class provides methods that allow you to draw shapes on the display. These provide the ability to achieve some impressive graphical effects, giving a wide range of controls to the drawing process.

Drawing Plain Filled Rectangles

You can start by drawing a simple white rectangle on the display. The method DrawRectangle will do this:

 myBitmap.DrawRectangle(    Colors.White,                               // outline color    1,                                          // outline thickness    0, 0,                                       // x, y    myBitmap.Width, myBitmap.Height,            // width and height    0, 0,                                       // x and y corner radius    Colors.White,                               // gradient start color    0, 0,                                       // gradient start coordinate    Colors.White,                               // gradient end color    myBitmap.Width, myBitmap.Height,            // gradient end coordinate    0xff);                                      // opacity    myBitmap.Flush(); 

The DrawRectangle method is provided with a large number of parameters, allowing you to select a color for the outline, the radius of the corners of the rectangle, and the color of two points that specify the start and end of a gradient fill. You can also specify an opacity value. The preceding method call performs a very simple operation, effectively filling the entire display with the color white.

Drawing Graduated Filled Rectangles

The call of DrawRectangle in the preceding section does not perform a gradient fill because the start and end colors of the gradient are the same. By manipulating the gradient settings, you can create much more interesting displays, within the color limitations of the display hardware.

 myBitmap.DrawRectangle(    Colors.White,                               // outline color    1,                                          // outline thickness    100, 100,                                   // x, y    200, 100,                                   // width and height    0, 0,                                       // x and y corner radius    Colors.Black,                               // gradient start color    100, 100,                                   // gradient start coordinate    Colors.White,                               // gradient end color    300, 200,                                   // gradient end coordinate    0xff);                                      // opacity 

Figure 7-3 shows the result of a more complex graduated fill. The coordinates of the drawing positions are drawn on the bitmap to show how the graduated fill positions have been set. The parameters given in the preceding code cause the color of the fill to vary from black in the top left corner of the rectangle down to white in the bottom right.

Figure 7-3: Display of a bitmap with a graduated fill (coordinates added for clarity).

Note 

The start and end coordinates of the graduation are set relative to the entire bitmap, not the rectangle itself. This means that you can achieve some interesting fill effects by moving the start of a gradient fill outside the rectangle.

Drawing Rectangles with Opacity

The opacity setting (the final value in the DrawRectangle parameters we are giving) is an 8-bit value in the range 0 through 255 (0xff in hexadecimal). The previous draw operations have been performed with the opacity set to 0xff. At this opacity setting, the color being drawn completely replaces what is underneath it. However, by reducing this value, you can achieve some impressive effects.

Figure 7-4 shows the effect of reducing the opacity value to half. You can clearly see each rectangle layer. The three rectangles were drawn from the top left corner downward, in the colors red, blue, and green, respectively.

Figure 7-4: Display of three primary bitmaps drawn with half opacity on top of a white background.

Drawing with Rounded Corners

Up until now, all the drawing that we have performed has been with the corner radius values set to 0, indicating that we do not want our rectangles to have rounded corners.

The rectangle shown in Figure 7-5 was produced with rounded corners that are 25 pixels in radius in the X and Y values. The radius value gives the number of pixels in the border over which the corner will be drawn. By varying the X and Y values, you can change the shape of the curve.

Figure 7-5: Rectangle 200 pixels by 100 pixels with 20-pixel-radius rounded corners.

The rectangle shown in Figure 7-6 was drawn with different X and Y corner radius values. The reduction in the number of Y corner pixels has flattened the border in the Y direction.

Figure 7-6: Rectangle 200 pixels by 100 pixels with 20-pixel X-radius and 10-pixel Y-radius.

Note 

In the present release of the .NET Micro Framework, if you draw rectangles with a corner radius greater than zero, the rectangles will not be drawn as filled.