Advanced Graphics Capabilities

C# offers many additional graphics capabilities. The Brush hierarchy, for example, also includes HatchBrush, LinearGradientBrush, PathGradientBrush and TextureBrush.

Gradients, Line Styles and Fill Patterns

The program in Fig. 17.21 demonstrates several graphics features, such as dashed lines, thick lines and the ability to fill shapes with various patterns. These represent just a few of the additional capabilities of the System.Drawing namespace.

Figure 17.21. Shapes drawn on a form.

(This item is displayed on pages 836 - 837 in the print version)

 1 // Fig. 17.21: DrawShapes.cs
 2 // Drawing various shapes on a Form.
 3 using System;
 4 using System.Drawing;
 5 using System.Drawing.Drawing2D;
 6 using System.Windows.Forms;
 7
 8 // draws shapes with different brushes
 9 public partial class DrawShapesForm : Form
10 {
11 // default constructor
12 public DrawShapesForm()
13 {
14 InitializeComponent();
15 } // end constructor
16
17 // draw various shapes on Form
18 private void DrawShapesForm_Paint( object sender, PaintEventArgs e )
19 {
20 // references to object we will use
21 Graphics graphicsObject = e.Graphics;
22
23 // ellipse rectangle and gradient brush
24 Rectangle drawArea1 = new Rectangle( 5, 35, 30, 100 ); 
25 LinearGradientBrush linearBrush = 
26  new LinearGradientBrush( drawArea1, Color.Blue, 
27  Color.Yellow, LinearGradientMode.ForwardDiagonal );
28
29 // draw ellipse filled with a blue-yellow gradient
30 graphicsObject.FillEllipse( linearBrush, 5, 30, 65, 100 );
31
32 // pen and location for red outline rectangle
33 Pen thickRedPen = new Pen( Color.Red, 10 ); 
34 Rectangle drawArea2 = new Rectangle( 80, 30, 65, 100 );
35
36 // draw thick rectangle outline in red
37 graphicsObject.DrawRectangle( thickRedPen, drawArea2 );
38
39 // bitmap texture
40 Bitmap textureBitmap = new Bitmap( 10, 10 );
41
42 // get bitmap graphics
43 Graphics graphicsObject2 = 
44  Graphics.FromImage( textureBitmap );
45
46 // brush and pen used throughout program
47 SolidBrush solidColorBrush = 
48  new SolidBrush( Color.Red ); 
49 Pen coloredPen = new Pen( solidColorBrush );
50
51 // fill textureBitmap with yellow
52 solidColorBrush.Color = Color.Yellow; 
53 graphicsObject2.FillRectangle( solidColorBrush, 0, 0, 10, 10 );

54 55 // draw small black rectangle in textureBitmap 56 coloredPen.Color = Color.Black; 57 graphicsObject2.DrawRectangle( coloredPen, 1, 1, 6, 6 ); 58 59 // draw small blue rectangle in textureBitmap 60 solidColorBrush.Color = Color.Blue; 61 graphicsObject2.FillRectangle( solidColorBrush, 1, 1, 3, 3 ); 62 63 // draw small red square in textureBitmap 64 solidColorBrush.Color = Color.Red; 65 graphicsObject2.FillRectangle( solidColorBrush, 4, 4, 3, 3 ); 66 67 // create textured brush and 68 // display textured rectangle 69 TextureBrush texturedBrush = 70 new TextureBrush( textureBitmap ); 71 graphicsObject.FillRectangle( texturedBrush, 155, 30, 75, 100 ); 72 73 // draw pie-shaped arc in white 74 coloredPen.Color = Color.White; 75 coloredPen.Width = 6; 76 graphicsObject.DrawPie( coloredPen, 240, 30, 75, 100, 0, 270 ); 77 78 // draw lines in green and yellow 79 coloredPen.Color = Color.Green; 80 coloredPen.Width = 5; 81 graphicsObject.DrawLine( coloredPen, 395, 30, 320, 150 ); 82 83 // draw a rounded, dashed yellow line 84 coloredPen.Color = Color.Yellow; 85 coloredPen.DashCap = DashCap.Round; 86 coloredPen.DashStyle = DashStyle.Dash; 87 graphicsObject.DrawLine( coloredPen, 320, 30, 395, 150 ); 88 } // end method DrawShapesForm_Paint 89 } // end class DrawShapesForm

Lines 1888 define the DrawShapesForm Paint event handler. Lines 2527 create an object of class LinearGradientBrush named linearBrush. A LinearGradientBrush (namespace System.Drawing.Drawing2D) enables users to draw with a color gradient. The LinearGradientBrush used in this example takes four argumentsa Rectangle, two Colors and a member of enumeration LinearGradientMode. In C#, all linear gradients are defined along a line that determines the gradient endpoints. This line can be specified either by the starting and ending points or by the diagonal of a rectangle. The first argument, Rectangle drawArea1, represents the endpoints of the linear gradientthe upperleft corner is the starting point and the bottom-right corner is the ending point. The second and third arguments specify the colors that the gradient will use. In this case, the color of the ellipse will gradually change from Color.Blue to Color.Yellow. The last argument, a type from the enumeration LinearGradientMode, specifies the linear gradient's direction. In our case, we use LinearGradientMode.ForwardDiagonal, which creates a gradient from the upper-left to the lower-right corner. We then use Graphics method FillEllipse in line 30 to draw an ellipse with linearBrush; the color gradually changes from blue to yellow, as described above.

In line 33, we create Pen object thickRedPen. We pass to thickRedPen's constructor Color.Red and int argument 10, indicating that we want thickRedPen to draw red lines that are 10 pixels wide.

Line 40 creates a new Bitmap image, which initially is empty. Class Bitmap can produce images in color and gray scale; this particular Bitmap is 10 pixels wide and 10 pixels tall. Method FromImage (line 4344) is a static member of class Graphics and retrieves the Graphics object associated with an Image, which may be used to draw on an image. Lines 5265 draw on the Bitmap a pattern consisting of black, blue, red and yellow rectangles and lines. A TextureBrush is a brush that fills the interior of a shape with an image, rather than a solid color. In line 71, TextureBrush object textureBrush fills a rectangle with our Bitmap. The TextureBrush constructor used in lines 6970 takes as an argument an image that defines its texture.

Next, we draw a pie-shaped arc with a thick white line. Lines 7475 set coloredPen's color to White and modify its width to be six pixels. We then draw the pie on the form by specifying the Pen, the x-coordinate, y-coordinate, width and height of the bounding rectangle and the start and sweep angles.

Lines 7981 draw a five-pixel-wide green line. Finally, lines 8586 use enumerations DashCap and DashStyle (namespace System.Drawing.Drawing2D) to specify settings for a dashed line. Line 85 sets the DashCap property of coloredPen (not to be confused with the DashCap enumeration) to a member of the DashCap enumeration. The DashCap enumeration specifies the styles for the start and end of a dashed line. In this case, we want both ends of the dashed line to be rounded, so we use DashCap.Round. Line 86 sets the DashStyle property of coloredPen (not to be confused with the DashStyle enumeration) to DashStyle.Dash, indicating that we want our line to consist entirely of dashes.

General Paths

Our next example demonstrates the use of a general path. A general path is a shape constructed from straight lines and complex curves. An object of class GraphicsPath (namespace System.Drawing.Drawing2D) represents a general path. The GraphicsPath class provides functionality that enables the creation of complex shapes from vector-based primitive graphics objects. A GraphicsPath object consists of figures defined by simple shapes. The start point of each vector-graphics object (such as a line or arc) that is added to the path is connected by a straight line to the end point of the previous object. When called, the CloseFigure method attaches the final vector-graphic object end point to the initial starting point for the current figure by a straight line, then starts a new figure. Method StartFigure begins a new figure within the path without closing the previous figure.

The program of Fig. 17.22 draws general paths in the shape of five-pointed stars. Lines 2629 define two int arrays, representing the x- and y-coordinates of the points in the star, and line 32 defines GraphicsPath object star. A loop (lines 3537) then creates lines to connect the points of the star and adds these lines to star. We use GraphicsPath method AddLine to append a line to the shape. The arguments of AddLine specify the coordinates for the line's endpoints; each new call to AddLine adds a line from the previous point to the current point. Line 40 uses GraphicsPath method CloseFigure to complete the shape.

Figure 17.22. Paths used to draw stars on a form.

 1 // Fig. 17.22: DrawStarsForm.cs
 2 // Using paths to draw stars on the form.
 3 using System;
 4 using System.Drawing;
 5 using System.Drawing.Drawing2D;
 6 using System.Windows.Forms;
 7
 8 // draws randomly colored stars
 9 public partial class DrawStarsForm : Form
10 {
11 // default constructor
12 public DrawStarsForm()
13 {
14 InitializeComponent();
15 } // end constructor
16
17 // create path and draw stars along it
18 private void DrawStarsForm_Paint(object sender, PaintEventArgs e)
19 {
20 Graphics graphicsObject = e.Graphics;
21 Random random = new Random();
22 SolidBrush brush =
23 new SolidBrush( Color.DarkMagenta );
24
25 // x and y points of the path
26 int[] xPoints =
27 { 55, 67, 109, 73, 83, 55, 27, 37, 1, 43 };
28 int[] yPoints =
29 { 0, 36, 36, 54, 96, 72, 96, 54, 36, 36 };
30
31 // create graphics path for star;
32 GraphicsPath star = new GraphicsPath();
33
34 // create star from series of points
35 for ( int i = 0; i <= 8; i += 2 ) 
36  star.AddLine( xPoints[ i ], yPoints[ i ],
37  xPoints[ i + 1 ], yPoints[ i + 1 ] ); 
38
39 // close the shape
40 star.CloseFigure();
41

42 // translate the origin to (150, 150) 43 graphicsObject.TranslateTransform( 150, 150 ); 44 45 // rotate the origin and draw stars in random colors 46 for ( int i = 1; i <= 18; i++ ) 47 { 48 graphicsObject.RotateTransform( 20 ); 49 50 brush.Color = Color.FromArgb( 51 random.Next( 200, 255 ), random.Next( 255 ), 52 random.Next( 255 ), random.Next( 255 ) ); 53 54 graphicsObject.FillPath( brush, star ); 55 } // end for 56 } // end method DrawStarsForm_Paint 57 } // end class DrawStarsForm

Line 43 sets the origin of the Graphics object. The arguments to method translateTransform indicate that the origin should be translated to the coordinates (150, 150). The loop in lines 4655 draws the star 18 times, rotating it around the origin. Line 48 uses Graphics method RotateTransform to move to the next position on the form; the argument specifies the rotation angle in degrees. Graphics method FillPath (line 54) then draws a filled version of the star with the Brush created in lines 5052. The application determines the SolidBrush's color randomly, using Random method Next.