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.

image from book
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.

image from book
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.

image from book
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.

image from book
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.




Embedded Programming with the Microsoft .Net Micro Framework
Embedded Programming with the Microsoft .NET Micro Framework
ISBN: 0735623651
EAN: 2147483647
Year: 2007
Pages: 118

Similar book on Amazon
Getting Started with the Internet of Things: Connecting Sensors and Microcontrollers to the Cloud (Make: Projects)
Getting Started with the Internet of Things: Connecting Sensors and Microcontrollers to the Cloud (Make: Projects)
Expert .NET Micro Framework (Expert's Voice in .NET)
Expert .NET Micro Framework (Expert's Voice in .NET)
Netduino Plus
Netduino Plus
Getting Started with Netduino
Getting Started with Netduino

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net