Advanced 2 D Graphics in GDI+

This article has been excerpted from book "Graphics Programming with GDI+".

In this article we will discuss advanced two-dimensional GDI+ programming. The .NET Framework library defines this functionality in a separate namespace: System.Drawing.Drawing2D. Among the advanced 2D techniques we will discuss are blending, matrices, graphics paths, and gradient brushes.

Note: Before using any class discussed in this article, an application should reference the System.Drawing.Drawing2D namespace by adding the following line:

using System.Drawing.Drawing2D;

Apart from blending, gradient brushes, graphics containers, graphics path, and matrix-related classes, the System.Drawing.Drawing2D namespace provides many enumerations. 

Table 9.1 lists the classes provided by System.Drawing.Drawing2D. 

TABLE 9.1: System.Drawing.Drawing2D classes

Class	Description
AdjustableArrowCap	An adjustable, arrow-shaped line cap.
Blend	A blend pattern used by linear gradient brushes.
ColorBlend	An array of colors and positions in a multicolor gradient.
CustomLinedCap	A custom user-defined line cap.
GraphicsContainer	The internal data of a graphics container. The BeginContainer and EndContainer methods are used to save the state of a Graphics object.
GraphicsPath	A graphics path, which contains a series of connected lines and curves.
GraphicsPathIterator	A graphics path can have many subpaths. This class provides a way to iterate through them.
GraphicsState	Graphics object state, which is returned by the BeginContainer method.
HatchBrush	A hatch brush.
LinearGradientBrush	Linear gradient brush.
Matrix	A 3X3 affine matrix that represents a geometric transformation.
PathData	Contains the graphical data of a graphics path.
PathGradientBrush	A brush that fills a graphics path with a gradient.
RegionData	Data of a region.

Line Caps and Line Styles

In previous articles we saw how to draw lines and curves using DrawLine, DrawCurve, and related methods of the Graphics class. In these cases we drew only solid lines and curves. Lines and curves can also have styles. For example, you can draw a dotted line with circular caps.

FIGURE 9.1: Lines with different starting cap, ending cap, and dash styles

A line has three parts: the line body, starting cap, and ending cap. The line starts with a starting cap and ends with an ending cap. The part that connects these two caps is the line body. The caps and body of a line can have different styles. Figures 9.1 shows two lines with different starting and ending cap and body styles.

The ends of a line can have different caps. Table 9.2 shows some of the available line cap styles.

A line body can have its won style, called the dash style. Figure 9.2 shows four different dash styles.

Each line dash style can also have its own cap style, which is called a line dash cap. Figure 9.3 shows three different line dash caps.

TABLE 9.2: Line cap styles

FIGURE 9.2: Line dash style

FIGURE 9.3: Line dash caps

Line Caps and Styles specified by the Pen Class

The Pen object specifies the line caps and line styles being used to draw lines. To create a line with caps and styles, we create a Pen object, set its line cap and line style properties (or methods) and use the Pen object to draw the lines.

Table 9.3 lists the members of the Pen class that can be used to set line caps and line styles.

Adding Line Caps and Styles

There is no direct way to apply line caps and styles to a line. We must go through the Pen object. As we covered in previous articles, to draw a line we must have a Pen object specifying the color and width of the pen used when we call the DrawLine method of the Graphics class. The Pen object also provides members for attaching line caps and line styles to a pen. After we attach line caps and styles to a pen, we use this pen to draw lines.

In Listing 9.1 we create a Pen object with a specified color and width. Then we set the line caps using the StratCap and EndCap properties of the Pen class, followed by the DashStyle and DashOffset properties. After that we call DrawLine and dispose of the objects.

TABLE 9.3: Pen Class members for setting line caps and styles

Member	Description
StartCap	Property that gets or sets the cap style used at the beginning of the line. Takes a LineCap enumeration member.
EndCap	Property that gets or sets the cap style used at the end of the line. Takes a LineCap enumeration member.
CustomStartCap	Property that gets or sets a custom cap to use at the beginning of the line. Takes a CustomLineCap object.
CustomEndCap	Property that gets or sets a custom cap to use at the ending of the line. Takes a CustomLineCap object.
DashCap	Property that gets or sets the cap style used at the end of the dashes that make up a dashed line. Takes a DashCap enumeration, which has only three members: Flat, Round, and Triangle.
DashOffset	Property that gets and sets the dash offset – that is the distance from the start of a line to the beginning of a dash pattern.
DashPattern	Property that specifies the length of each dash and space in a dash pattern. Takes an array of floating values. The first element of this array sets the length of a dash, the second elements sets the length of a space, the third element sets the length of a dash, and so on.
DashStyle	Dash lines can have their own styles. This property gets and sets dash line styles, which are represented by the DashStyle enumeration. The DashStyle enumeration has six members- Custom, Dash, DashDot, DashDotDot, Dot, and Solid-that represent lines consisting of a custom pattern, dashes, a dash-dot repeating pattern, a dash-dot-dot repeating pattern, dots and a solid line, respectively.
SetLineCap	Method that sets the values of all three parts (the starting line cap, ending line cap, and dash style) of a line.

LISTING 9.1: Setting line caps and line styles

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Windows.Forms;

using System.Drawing.Drawing2D;

namespace Advanced_2_D_Graphics

{

    public partial class Form1 : Form

    {

        public Form1()

        {

             InitializeComponent();

        }

        private void Form1_Paint(object sender, PaintEventArgs e)

        {

            Graphics g = this.CreateGraphics();

            g.Clear(this.BackColor);

            // Create a Pen

            Pen blackPen = new Pen(Color.Black, 10);

            // Set the line caps and line styles

             blackPen.StartCap = LineCap.Triangle;

             blackPen.EndCap = LineCap.Triangle;

             blackPen.DashStyle = DashStyle.Dash;

             blackPen.DashOffset = 40;

             g.DrawLine(blackPen, 20, 10, 200, 10);

            // Dispose of objects

             blackPen.Dispose();

            g.Dispose();

        }

    }

}

Output of above listing

Conclusion

Hope the article would have helped you in understanding Advanced 2 D Graphics in GDI+. Read other articles on GDI+ on the website.

This book teaches .NET developers how to work with GDI+ as they develop applications that include graphics, or that interact with monitors or printers. It begins by explaining the difference between GDI and GDI+, and covering the basic concepts of graphics programming in Windows.