Advanced 2 D Graphics in GDI+ using VB.NET

In this article I will explain about Advanced 2 D Graphics in GDI+.
  • 4646
 
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:
 
Imports 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.gif
 
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
 
table-9_2.gif
 
figure-9_2.gif
 
FIGURE 9.2: Line dash style

figure-9_3.gif
 
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


Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Linq
Imports System.Text
Imports System.Windows.Forms
Imports System.Drawing.Drawing2D
Public Class Form1

   Private Sub Form1_Paint(ByVal senderAs System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        Dim g As Graphics = Me.CreateGraphics()
        g.Clear(Me.BackColor)

       ' Create a Pen
        Dim blackPenAs 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()
    End Sub
End Class

Output of above listing

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

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.