Home > Articles > Programming > Windows Programming

This chapter is from the book

Drawing Basics

Most computer-based drawing is done on a two-dimensional plane using a basic set of objects. These objects are like building blocks. In the hands of a competent craftsman, they can be manipulated to create interesting effects and complex shapes. But before we can build the skyscraper, we must first set the basic foundation.

Understanding Windows Coordinate Systems

The default coordinate system in Windows has the origin (0, 0) in the upper-left corner of the drawing surface. The x-axis extends to the right, while the y-axis extends downward. The pixel is the unit of measurement in the default coordinate system. To draw to a surface, you specify what pixels you want your monitor to "turn on" to create the graphic. For instance, a line can be defined by joining the pixels between a start and an end coordinate. Figure 9.1 illustrates these concepts.

Figure 9.1 Windows default coordinate system.

The Graphics Class

The Graphics class is used to render the majority of all two-dimensional drawing in .NET. It is far and away the class you will most often use to execute basic drawing tasks. The class provides methods for drawing all the basic 2D shapes, including: lines, rectangles, ellipses, polygons, arcs, cardinal splines, and Bèzier splines. For the most part, if you need to draw a shape, there will be an associated method of the Graphics class. For example, the DrawLine method is used to draw a line and the DrawRectangle method is used for a rectangle. In fact, you can often draw several graphic elements with a single method call. To do so, you simply use the plural version of a given drawing method, such as DrawLines or DrawRectangles. All of these methods (and the Graphics class itself) are covered in-depth throughout the rest of this chapter.

Pens

The companion to the Graphics class is the Pen class. In fact, in order to draw nearly anything, you'll need at least a Graphics and a Pen instance. The Pen class is used to define how the outlines of shapes are rendered to the surface. Similar to a real pen, the Pen class defines a width color that will be used to do the drawing. Additionally, you can create a Pen based on a Brush instance. This allows you to draw with more stylized lines. Table 9.2 demonstrates the various constructors that are available to you when creating new Pen instances.

Table 9.2 Pen Constructors

Constructor

Description

New Pen(Color, Single)

Creates a Pen object based on a color (Color structure) and a width (Single) in pixels.

New Pen(Color)

Creates a Pen object based on a color defined by the Color structure. Sets the pen's width to the default of 1 pixel.

New Pen(Brush, Single)

Creates a Pen object using a valid class derived from the Brush base class. The pen's width (Single) is defined in pixels.

New Pen(Brush)

Creates a Pen object based on a valid Brush object. Sets the pen's width to the default of 1.0 pixels.


The Color parameter, used in the Pen constructor, is defined by an instance of the Color structure. The Color structure represents an ARGB (Alpha, Red, Green, and Blue) color. Most colors come predefined as properties of the Color structure for easy use. For example, Color.Red indicates the ARGB equivalent of red. There are a wide variety of predefined colors, everything from LawnGreen to Tomato to Transparent. Additionally, you can call methods of the Color structure to create custom colors or return the brightness, saturation, and hue of a given color.

Lines

So far, we've talked about pens and drawing methods but have yet to render anything to the screen. Now we'll use a Pen object to draw a line onto a form. This may not seem exciting, but it provides a foundation.

A line is a set of pixels linked by a start and end point. Line attributes are defined by the Pen object with which they are drawn. Of course, as pens can vary in width and color, so to can lines. To draw a line, we use the DrawLine method of the Graphics class. This method is overloaded; it defines a number of ways you can pass it parameters. For instance, you can pass it a Pen object and two Point structures between which GDI+ will draw the line. A Point structure stores the x and y coordinates of a point on a 2D plane.

The following code uses the DrawLine method and a Pen instance to draw a blue line onto a form. You can test this code, create a new form-based application, add a button to it, and add the code in the listing to the button's click event.

'local scope
Dim myGraphics As Graphics
Dim myPen As Pen

'return the current form as a drawing surface    
myGraphics = Graphics.FromHwnd(hwnd:=ActiveForm().Handle)

'instantiate a new pen object using the color structure
myPen = New Pen(color:=Color.Blue, Width:=4)

'draw the line on the form using the pen object
myGraphics.DrawLine(pen:=myPen, x1:=1, y1:=1, x2:=25, y2:=50)

Note that before we could draw anything to the screen, we needed to return a valid drawing surface. To do so, we created an instance of the Graphics class. This provides us an object on which to draw. The constructor accepts a Windows handle as its parameter. We pass it the active Windows handle. This sets up the Graphics object to use the active form as its target for drawing our line.

Next, a Pen instance is created. We pass its constructor a valid color and width. Finally, the DrawLine method of the Graphics object is called to render the line onto the form. The version of the DrawLine method we used requires a Pen instance and a set of start and end coordinates. These coordinates are simply passed in order as two points defined as (x1, y1) and (x2, y2). The method connects the two coordinate points with a blue line based on our Pen object.

Dashes and Caps

What if you want to add an arrow to the end of your line? Or maybe, you need a dotted line to get your point across. In addition to defining color and width, the Pen class is used to create dashed lines and to attach start and end line caps. Line caps can be as simple as an arrowhead or as complex as a custom-defined cap. Table 9.3 lists properties of the Pen class that are specific to dashes and caps.

Table 9.3 Pen Class Dash and Cap Properties

Property

Description

CustomStartCap

The CustomStartCap property is used to set or get a custom-defined line cap. The CustomStartCap property defines the cap at a line's start. The property is of type CustomLineCap.

CustomEndCap

The CustomEndCap property is used to set or get a custom-defined line cap. The CustomEndCap property defines the cap at a line's end. The property is of type CustomLineCap.

DashCap

The DashCap property is used to set or get the style used for the start or end caps of dashed lines.

DashOffset

The DashOffset property is used to set or get the distance between the start of a line and the start of the dash pattern.

DashPattern

The DashPattern property sets or gets an array of integers that indicates the distances between dashes in dash-patterned lines.

DashStyle

The DashStyle property sets or gets the style used for dashing a line. The property is of the type DashStyle enumeration. DashStyle enumeration members include the following: Dash, DashDot, DashDotDot, Dot, Solid.

EndCap

The EndCap property sets or gets the LineCap object used to define the end of the line. EndCap is of the type LineCap. The LineCap enumeration includes the following members: AnchorMask, ArrowAnchor, Custom, DiamondAnchor, Flat, NoAnchor, Round, RoundAnchor, Square, SquareAnchor, and Triangle.

StartCap

The StartCap property sets or gets the LineCap object used to define the start of the line. StartCap is of the type LineCap. The LineCap enumeration includes the following members: AnchorMask, ArrowAnchor, Custom, DiamondAnchor, Flat, NoAnchor, Round, RoundAnchor, Square, SquareAnchor, and Triangle.


The following code demonstrates setting the styles and cap properties of a Pen object. The code first creates a Pen object of the color blue. It then sets the EndCap property to an arrow using the LineCap enumeration. Last, it indicates the line's DashStyle to be a dash followed by a dot (DashDot).

'dimension a local variable of type Pen
Dim myPen As Pen

'instantiate a Pen using the color structure and width constructor
myPen = New Pen(color:=Color.Blue, Width:=5)

'set the Pen's end cap to be of type arrow
myPen.EndCap = Drawing.Drawing2D.LineCap.ArrowAnchor

'set the Pen's dash style to be a dash followed by a dot
myPen.DashStyle = Drawing.Drawing2D.DashStyle.DashDot

Joins

Suppose we have multiple lines that are joined to indicate a shape or routing direction through a diagram. The point at which two lines are joined can be rendered with three distinct styles. The Pen class defines how lines are joined. To do so, it provides the LineJoin property. This property is of the type LineJoin enumeration whose members include those listed in Table 9.4.

Table 9.4 LineJoin Enumeration Members

Member

Example

Description

Bevel

The Bevel member indicates a beveled join between the lines.

Miter

The Miter member specifies an angled join.

Round

The Round member creates a smooth and rounded join.


To join lines, you must add each line to a Path object (discussed later in the chapter). The path is drawn to the surface using one Pen instance. Intersecting lines are then joined based on the LineJoin property of the given Pen instance. The following snippet illustrates this with code.

'local scope
Dim myPath As New System.Drawing.Drawing2D.GraphicsPath()
Dim myGraphics As Graphics
Dim myPen As New Pen(color:=Color.Blue, Width:=8)

'return the current form as a drawing surface    
myGraphics = Graphics.FromHwnd(hwnd:=ActiveForm().Handle)

'add 2 intersecting lines to a path
myPath.AddLine(10, 10, 50, 10)
myPath.AddLine(50, 10, 50, 50)

'set the line join property
myPen.LineJoin = Drawing.Drawing2D.LineJoin.Miter

'draw the line to the form
myGraphics.DrawPath(pen:=myPen, path:=myPath) 

Curves

A curve is an array of points defining the perimeter of a conic section. Curves can be used for such things as connecting points on a graph or drawing a handlebar mustache.

There are two types of curves in the .NET library: cardinal splines and Bèzier splines. There are also a number of methods of the Graphics class that can be used to draw curves. Table 9.5 lists these methods. For our discussion, we will focus on the DrawCurve and DrawBezierCurve methods.

Table 9.5 Graphics Class Curve Drawing Methods

Method

Description

DrawCurve

The DrawCurve method connects an array of points using a curved line.

DrawClosedCurve

The DrawClosedCurve method draws a closed curve using an array of points. A closed curve ensures that the shape is closed. For instance, if you drew a curve between three points, the method would close the curve by connecting the third point with the first.

DrawBezier

The DrawBezier method is used to draw a Bèzier curve.

DrawArc

The DrawArc method draws an arc from a specified ellipse.


Cardinal Splines

A cardinal spline is an array of points through which a line smoothly passes. The curve or bend of the line is defined by a tension parameter. The curve's tension indicates how tightly the curve bends, the lower the tension on a given curve, the flatter (straighter) the line. A curve with a tension of zero (0), for instance, is equivalent to drawing a straight line between points.

To create a cardinal spline, you use the DrawCurve method. This method allows us to control the curve's tension and define the number of points in a given curve. The method is overloaded, and as such, provides a number of ways to display a curve. In the following example, we create a blue curve that passes through three points. Notice that we did not specify the tension. When left blank, the method uses the default tension of 0.5.

'declare local variables
Dim myGraphics As Graphics
Dim myPen As Pen
Dim myPoints(2) As Point

'create a 3-item array of point structures
myPoints(0) = New Point(100, 75)
myPoints(1) = New Point(125, 50)
myPoints(2) = New Point(150, 75)

'return the current form as a drawing surface    
myGraphics = Graphics.FromHwnd(hwnd:=ActiveForm().Handle)

'instantiate a new pen object using the color structure
myPen = New Pen(color:=Color.Blue, Width:=2)

'draw curve between the 3 points defined in the array
myGraphics.DrawCurve(pen:=myPen, points:=myPoints)

Figure 9.2 helps illustrate the concept of curve tension. The innermost line is drawn with a tension setting of zero. Each successive line increases the tension by .5 until we reach 2.0.

Figure 9.2 Curve tension.

Bèzier Splines

Bèzier splines can be used to create a wide variety of shapes. Fonts, for instance, often use Bèzier splines for outlining characters. Four points define a Bèzier spline: a start and end point and two control points. The curve is drawn between the start and end point. The control points influence how the curve flows between the points. As the curve moves from point to point, it is "pulled" toward the nearest control point.

Consider the following code:

'declare local variables
Dim myGraphics As Graphics
Dim myPen As Pen
Dim myPoints(3) As Point

'create a 4-item array of point structures
myPoints(0) = New Point(100, 75)
myPoints(1) = New Point(125, 50)
myPoints(2) = New Point(150, 75)
myPoints(3) = New Point(175, 50)

'return the current form as a drawing surface
myGraphics = Graphics.FromHwnd(ActiveForm().Handle)

'instantiate a new pen object using the color structure
myPen = New Pen(Color.Blue, 2)

'draw bezier using the points defined in the array
myGraphics.DrawBezier(pen:=myPen, pt1:=myPoints(0), pt2:=myPoints(1), _
   pt3:=myPoints(2), pt4:=myPoints(3))

In the preceding example, we created a Bézier curve using the DrawBezier method. First, we defined a set of four points. The first point (100, 75) is the starting point. The next two points, (125, 50) and (150, 75) act as the control points. The curve ends at the point (175, 50).

Suggestions for Further Exploration

  • For a complete listing of colors available through the Color structure, check out MSDN: Visual Studio .NET/.NET Framework Class Library/System.Drawing/Color Structure/Properties.

  • Use the curve code examples presented in this section to experiment with the DrawArc and DrawClosedCurve methods.

  • Use DrawBeziers method to create a series of Bèzier curves.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020