Section 17.9. Advanced Graphics Capabilities

17.9. Advanced Graphics Capabilities

The FCL offers many other 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.

  1  ' Fig. 17.21: FrmDrawShapes.vb  2  ' Drawing various shapes on a Form.  3  Imports System.Drawing.Drawing2D  4  5  Public Class FrmDrawShapes  6     ' draw various shapes on Form  7     Private Sub FrmDrawShapes_Paint(ByVal sender As Object, _  8        ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint  9        ' references to object we will use 10        Dim graphicsObject As Graphics = e.Graphics 12        ' ellipse rectangle and gradient brush 13        Dim drawArea1 As New Rectangle(5, 35, 30, 100)                      14        Dim linearBrush As New LinearGradientBrush(drawArea1, Color.Blue, _ 15           Color.Yellow, LinearGradientMode.ForwardDiagonal)                 16 17        ' draw ellipse filled with a blue-yellow gradient 18        graphicsObject.FillEllipse(linearBrush, 5, 30, 65, 100) 19 20        ' pen and location for red outline rectangle 21        Dim thickRedPen As New Pen(Color.Red, 10)       22        Dim drawArea2 As New Rectangle(80, 30, 65, 100) 23 24        ' draw thick rectangle outline in red 25        graphicsObject.DrawRectangle(thickRedPen, drawArea2) 26 27        ' bitmap texture 28        Dim textureBitmap As New Bitmap(10, 10) 29 30        ' get bitmap graphics 31        Dim graphicsObject2 As Graphics = Graphics.FromImage(textureBitmap) 32 33        ' brush and pen used throughout program 34        Dim solidColorBrush As New SolidBrush(Color.Red) 35        Dim coloredPen As New Pen(solidColorBrush)       36 37        ' fill textureBitmap with yellow 38        solidColorBrush.Color = Color.Yellow                         39        graphicsObject2.FillRectangle(solidColorBrush, 0, 0, 10, 10) 40 41        ' draw small black rectangle in textureBitmap 42        coloredPen.Color = Color.Black                        43        graphicsObject2.DrawRectangle(coloredPen, 1, 1, 6, 6) 44 45        ' draw small blue rectangle in textureBitmap 46        solidColorBrush.Color = Color.Blue                         47        graphicsObject2.FillRectangle(solidColorBrush, 1, 1, 3, 3) 48 49        ' draw small red square in textureBitmap 50        solidColorBrush.Color = Color.Red                          51        graphicsObject2.FillRectangle(solidColorBrush, 4, 4, 3, 3) 52 53        ' create textured brush and 54        ' display textured rectangle 55        Dim texturedBrush As New TextureBrush(textureBitmap)          56        graphicsObject.FillRectangle(texturedBrush, 155, 30, 75, 100) 57 58        ' draw pie-shaped arc in white 59        coloredPen.Color = Color.White                               60        coloredPen.Width = 6                                         61        graphicsObject.DrawPie(coloredPen, 240, 30, 75, 100, 0, 270) 62 63        ' draw lines in green and yellow 64        coloredPen.Color = Color.Green                         65        coloredPen.Width = 5                                   66        graphicsObject.DrawLine(coloredPen, 395, 30, 320, 150) 67 68        ' draw a rounded, dashed yellow line 69        coloredPen.Color = Color.Yellow                        70        coloredPen.DashCap = DashCap.Round                     71        coloredPen.DashStyle = DashStyle.Dash                  72        graphicsObject.DrawLine(coloredPen, 320, 30, 395, 150) 73     End Sub ' FrmDrawShapes_Paint 74  End Class ' FrmDrawShapes 

Lines 773 define the DrawShapesForm Paint event handler. Lines 1415 create a LinearGradientBrush (namespace System.Drawing.Drawing2D) object named linear-Brush to enable 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. 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 upper-left corner is the starting point, and the bottom-right corner is the ending point. The second and third arguments specify the colors 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 18 to draw an ellipse with linearBrush; the color gradually changes from blue to yellow, as described above.

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

Line 28 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 31) is a Shared member of class Graphics and retrieves the Graphics object associated with an Image, which may be used to draw on an image. Lines 3851 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 lines 5556, TextureBrush object textureBrush fills a rectangle with our Bitmap. The TextureBrush constructor used in line 55 takes as an argument an image that defines its texture.

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

Lines 6466 draw a 5-pixel-wide green line. Finally, lines 7071 use enumerations DashCap and DashStyle (namespace System.Drawing.Drawing2D) to specify settings for a dashed line. Line 70 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 71 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 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 an arc) added to the path is connected by a straight line to the endpoint of the previous object. When called, the CloseFigure method attaches the final vector-graphic object endpoint 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 in Fig. 17.22 draws general paths in the shape of five-pointed stars. Lines 1516 define two Integer arrays, representing the x- and y-coordinates of the points in the star, and line 19 defines GraphicsPath object star. A loop (lines 2225) then creates lines to connect the points of the star and adds these lines to star. We use Graphics-Path 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 27 uses GraphicsPath method CloseFigure to complete the shape.

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

  1  ' Fig. 17.22: FrmDrawStars.vb  2  ' Using paths to draw stars on the form.  3  Imports System.Drawing.Drawing2D  4  5  Public Class FrmDrawStars  6     ' create path and draw stars along it  7     Private Sub FrmDrawStars_Paint(ByVal sender As Object, _  8        ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint  9 10        Dim graphicsObject As Graphics = e.Graphics 11        Dim random As New Random() 12        Dim brush As New SolidBrush(Color.DarkMagenta) 13 14        ' x and y points of the path 15        Dim xPoints As Integer() = {55, 67, 109, 73, 83, 55, 27, 37, 1, 43} 16        Dim yPoints As Integer() = {0, 36, 36, 54, 96, 72, 96, 54, 36, 36} 17 18        ' create graphics path for star 19        Dim star As New GraphicsPath() 20 21        ' create star from series of points 22        For i As Integer = 0 To 8 Step 2          23           star.AddLine(xPoints(i), yPoints(i), _ 24              xPoints(i + 1), yPoints(i + 1))    25        Next                                      26 27        star.CloseFigure() ' close the shape 28 29        ' translate the origin to (150, 150) 30        graphicsObject.TranslateTransform(150, 150) 31 32        ' rotate the origin and draw stars in random colors 33        For i As Integer = 1 To 18 34           graphicsObject.RotateTransform(20) 35 36           brush.Color = Color.FromArgb(random.Next(200, 255), _ 37              random.Next(255), random.Next(255), random.Next(255)) 38            39           graphicsObject.FillPath(brush, star) 40        Next 41     End Sub ' FrmDrawStars_Paint 42  End Class ' FrmDrawStars 

Line 30 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 3340 draws the star 18 times, rotating it around the origin. Line 34 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 39) then draws a filled version of the star with the Brush created in lines 3637. The application determines the SolidBrush's color randomly, using Random method Next.