Drawing and the GDI

1
Chapter 12

• Drawing and the GDI

2
Objectives

• Understand the GDI
• Understand color and the Color structure
• Define lines, rectangles, text, and polygons
• Draw images to a graphical device
• Understand the different graphical
  transformations
• Send graphical output to a printer
• Create bar and pie charts

3
Introducing the GDI

• The Graphical Device Interface (GDI) provides
  the means by which Windows displays
• Text
• Lines
• Rectangles
• Complex shapes, such as polygons
• GDI draws to the screen or to printers
• GDI renders images such as bitmaps
• GDI performs typography

4
Services Provided by the GDI

• Services provided by the GDI are divided into
  four categories
• GDI supplies classes to draw simple shapes, such
  as lines and rectangles, or more complex shapes,
  such as polygons and curves
• GDI allows a developer to display bitmaps and
  other types of images
• GDI allows a developer to display text of
  varying fonts
• GDI performs transformations

5
GDI Namespaces and Classes

• Members of the System.Drawing namespace define
  the shapes that you can draw, and how those
  shapes are outlined or filled
• Members of the System.Drawing.Drawing2D namespace
  extend the features of the System.Drawing
  namespace
• Not supported by Windows 98
• The System.Graphics class serves two purposes
• Its members are used to draw shapes, such as
  lines and rectangles, draw images, and perform
  typography
• An instance of the Graphics class provides a
  reference to the drawing surface itself

6
Understanding Color and the Color Structure

• Combining varying intensities of red, green, and
  blue creates a color
• The term RGB refers to the three colors (red,
  green, and blue) used to create a color
• Each RGB value ranges from 0 to 255
• If the value is 0, then the color is off
• If the value is 255, then the color is applied at
  full intensity

7
Color and the Color Structure

• System.Drawing.Color structure
• Properties
• The A property returns the alpha component of the
  color
• One purpose of the alpha component is to control
  opacity
• The R property returns the red component of the
  color
• The G property returns the green component of the
  color
• The B property returns the blue component of the
  color
• The Color structure supplies several named colors
• Color.Red, Color.Blue, Color.Green, etc.

8
Color and the Color Structure

• Methods
• The overloaded shared FromArgb method creates a
  color based on R, G, B, and alpha values
• Examples
• Dim colCurrent As Color
• Color is white
• colCurrent Color.FromArgb(255, 255, 255)
• Color is blue
• colCurrent Color.FromArgb(0, 0, 255)

9
Drawing Lines

• A straight line is drawn between two points using
  a pen
• Pens are of two types
• Cosmetic pens draw solid lines
• Lines may have a different thickness
• Default is 1 pixel
• Geometric pens allow creation of custom lines
  with custom endpoints

10
Defining a Point (1)

• A straight line is drawn from a starting point to
  an ending point
• The Point structure defines a position on a
  graphical output device having x and y coordinate
  values
• Constructor syntax
• Public Sub New(ByVal x As Integer, ByVal y As _
  Integer)

11
Defining a Point (2)

• The x argument defines the horizontal distance
  from the left edge of the graphical device to the
  point
• The y argument defines the vertical distance from
  the top of the graphical device to the point
• Example to create a point at the origin
  (upper-left) corner of the form
• Dim pntCurrent As New Point(0, 0)

12
Defining a Pen

• Pens define the color and thickness of a line, or
  the border surrounding other shapes
• Properties
• The Color property defines the color of the pen
• The DashStyle property contains the value of a
  DashStyle enumeration member
• The EndCap property defines the shape of the cap
  appearing at the end of the line
• The StartCap property defines the shape of the
  cap appearing at the beginning of a line

13
Pen Constructor

• The Pen constructor creates a new pen
• Pen has a color and an optional width
• Public Sub New(color As Color)
• Public Sub New(color As Color, width As Width)
• The color argument contains an existing color
• The optional width argument defines the width of
  the line
• Default width is 1 pixel

14
Defining a Pen (Example)

• Create a new one pixel wide red pen
• Dim penCurrent As New Pen(Color.Red)
• Create a red pen three pixels wide
• Dim penCurrentWide As New Pen(Color.Red, 3)
• Explicitly dispose of all custom pens by calling
  the Dispose method
• penCurrent.Dispose()
• penCurrentWide.Dispose()

15
The Graphics Class

• The Graphics class supplies methods to clear a
  drawing surface, and to draw all shapes to an
  output device (window or printer)
• Properties
• DpiX and DpiY properties return the horizontal
  and vertical resolution of the graphics device

16
The Graphics Class Methods (1)

• The Clear method clears the drawing surface and
  fills that surface with a background color
• The DrawArc method draws an arc using a pen
• The DrawEllipse method draws an ellipse bounded
  by a rectangle
• The DrawImage and DrawImageScaled methods draw an
  image to the output device
• The DrawLine method draws a line between two
  points using a pen
• The DrawLines method draws a series of connected
  lines

17
The Graphics Class Methods (2)

• The DrawPie method draws a pie shape
• The DrawPolygon method draws an outline of a
  polygon using a pen
• The DrawRectangle method draws a bordered
  rectangle using a pen
• The DrawString method represents the GDIs
  typography capabilities
• Draws filled and outlined text
• The FillPie method fills a pie slice with a brush
• The FillPolygon method fills a polygon with a
  brush
• The FillRectangle method fills a rectangle with a
  brush

18
The Graphics Class Methods (3)

• The Flush method forces all graphical requests to
  be processed
• The RotateTransform method rotates images using
  an angle between 1 and 360 degrees
• The ScaleTransform method zooms in and out of the
  graphics displayed on an output device
• The TranslateTransform method changes the point
  that VB .NET considers the origin

19
Paint Event Handler
20
Drawing Lines (1)

• Call the DrawLine method of the Graphics class to
  draw a line
• The overloaded DrawLine method draws a straight
  line to an output device using an existing
  instance of the Pen class
• Syntax
• Overloads Public Sub DrawLine(ByVal pen As Pen,
• pt1 As Point, pt2 As Point)
• Overloads Public Sub DrawLine(ByVal pen As Pen,
• x1 As Integer, y1 As Integer, x2 As Integer,
• y2 As Integer)

21
Drawing Lines (2)

• Dissection
• The pen argument contains a reference to an
  existing pen
• The pt1 and pt2 arguments reference existing
  Point structures
• Points define the line's endpoints
• The x1 and y1 arguments define the lines
  starting point
• The x2 and y2 arguments define the lines
  endpoint

22
Drawing Lines (Example)

• Create a pen and points
• Dim penCurrent As New Pen(Color.Red)
• Dim pntStart As New Point(0, 0)
• Dim pntEnd As New Point(50, 50)
• Draw equivalent lines
• Graphics.DrawLine(penCurrent, pntStart, pntEnd)
• Graphics.DrawLine(penCurrent, 0, 0, 50, 50)
• Always dispose of custom pens
• penCurrent.Dispose()

23
Drawing Rectangles

• A rectangle consists of Point and Size structures
• The Point structure defines the origin of the
  rectangle
• The Size structure defines the rectangles height
  and width

24
Size Constructor

• The Size constructor defines the size of a
  bounding rectangle
• Public Sub New(ByVal width As Integer, ByVal _
• height As Integer)
• The width argument defines the width of the
  rectangle
• The height argument defines the height of the
  rectangle
• Values are measured in pixels

25
Size Constructor (Example)

• Create a new instance of the Size structure that
  is roughly one inch square
• Dim sizCurrent As New Size(72, 72)

26
Rectangle Constructor (1)

• Create a rectangle using existing Point and Size
  structures or positional arguments
• Overloads Public Sub New(ByVal location As
  Point, ByVal size As Size)
• Overloads Public Sub New(ByVal x As Integer,
  ByVal y As Integer, ByVal width As Integer,
  ByVal height As Integer)

27
Rectangle Constructor (2)

• The location argument contains an existing Point
  structure
• The size argument contains an existing Size
  structure
• The x and y arguments define the origin of the
  rectangle
• The width and height arguments define the size of
  the rectangle

28
Rectangle Constructor (Example)

• Create Point and Size structures
• Dim pntCurrent As New Point(0, 0)
• Dim sizCurrent As New Size(100, 100)
• Create a new rectangle using existing Point and
  Size structures
• Dim recCurrent As New Rectangle(pntCurrent, _
• sizCurrent)
• Create a new rectangle using x and y coordinates
  along with the width and height
• Dim recCurrent1 As New Rectangle(0, 0, _
• 100, 100)

29
Filling the Region of a Rectangle

• Brushes fill a rectangle or other shape
• Four types of brushes are supported
• A SolidBrush fills a shape with a solid color
• A HatchBrush has a foreground and background
  color
• Foreground color specifies the color of the
  horizontal, vertical, or diagonal lines drawn on
  the background
• A LinearGradientBrush defines a brush with two
  colors
• Colors painted in the shape are varied from the
  starting color to the ending color
• A TextureBrush fills a shape with an image

30
Solid Brush (Example 1)

• Create a SolidBrush instance
• Dim sbCurrent As New SolidBrush(Color.Red)
• Create a Rectangle
• Dim recCurrent As New Rectangle(1, 1, 100,
  100)
• Fill the Rectangle
• e.Graphics.FillRectangle(sbCurrent,
  recCurrent)
• Explicitly destroy all custom brushes
• sbCurrent.Dispose()

31
Solid Brush (Example 2)

• Create a rectangle
• Dim recCurrent As New Rectangle( _
• 1, 1, 100, 100)
• Fill a rectangle with a named brush
• No need to destroy named brushes
• e.Graphics.FillRectangle( _
• Brushes.Red, recCurrent)

32
HatchBrush Constructor

• A HatchBrush fills a region with a pattern
  instead of a solid color
• Arguments define the foreground and optional
  background colors
• Public Sub New HatchBrush(hatchstyle As
  HatchStyle, forecolor As Color)
• Public Sub New HatchBrush(hatchstyle As
  HatchStyle, forecolor As Color, backcolor As
  Color)
• The hatchstyle argument specifies the type of
  HatchBrush to use
• The forecolor and backcolor arguments specify the
  color of the hatch pattern and the background
  color, respectively

33
HatchBrush (Example)

• Create a HatchBrush using a Cross style
• Dim hbCurrent As New HatchBrush(HatchStyle.Cross,
  _
• Color.Red)
• Define the rectangle
• Dim recCurrent As New Rectangle(5, 5, 100, 100)
• Fill the rectangle using the HatchBrush
• e.Graphics.FillRectangle(hbCurrent, recCurrent)
• Dispose of the HatchBrush
• hbCurrent.Dispose()

34
Filling Shapes with a LinearGradientBrush

• The LinearGradientBrush class defines a brush
  used to fill a shape
• Code example
• Dim recLGB As New Rectangle(10, 10, _
• Me.ClientSize.Width 20, 235)
• Dim lgbRectangle As New LinearGradientBrush(recLG
  B, _
• Color.AliceBlue, Color.SteelBlue, _
• LinearGradientMode.Horizontal)
• e.Graphics.FillRectangle(lgbRectangle, recLGB)
• lgbRectangle.Dispose()

35
Painting an Imagewith a TextureBrush

• A TextureBrush fills a shape with an image
• Example
• Dim imgCurrent As Image
• imgCurrent _ Image.FromFile("..\..\Data\CourseL
  ogo.bmp")
• Dim tbCurrent As New TextureBrush(imgCurrent)
• e.Graphics.FillRectangle(tbCurrent, 1, 1, 200,
  200)

36
Drawing Text (Introduction)

• Drawing text involves
• Creating a font with the overloaded Font
  constructor
• Calling the DrawString method to paint a string
  having a particular font

37
Font Constructor

• The Font constructor creates a new instance of
  the Font class having a particular typeface, font
  characteristics, and size
• Public Sub New(ByVal familyName As String, ByVal
  emSize As Single, ByVal style As FontStyle)
• The familyName argument defines the font family,
  such as Arial or Tahoma, used to create the
  font
• The emSize argument defines the font size
• The style argument specifies font attributes such
  as boldface or underlining

38
Drawing Text (Example)

• Create a new 14-point bold Arial font
• Dim fntCurrent As New Font("Arial", _
• 14, FontStyle.Bold)

39
The DrawString Method (1)

• Call the DrawString method of the Graphics class
  to display text on the drawing surface
• The overloaded DrawString method draws a string
  to a graphical output device using a brush
• Overloads Public Sub DrawString(ByVal s As
  String, ByVal font As Font, ByVal brush As Brush,
  ByVal point As PointF)
• Overloads Public Sub DrawString(ByVal s As
  String, ByVal font As Font, ByVal brush As Brush,
  layoutrectangle As RectangleF)

40
The DrawString Method (2)

• The first argument s contains the string to be
  drawn
• The font argument contains an instance of the
  Font class representing the font to be drawn
• The point argument contains a Point structure
  defining the origin of the drawn string
• The string is drawn using brush as the brush
• The layoutrectangle argument contains a bounding
  rectangle in which the string will be drawn

41
The DrawString Method (Example)

• Draw a string at the origin using a named Red
  brush
• e.Graphics.DrawString("This is a string.", _
• fntCurrent, Brushes.Red, 0, 0)

42
Complex Shapes

• Three or more points may be connected together to
  form a polygon
• Outlined polygons or filled polygons are
  supported
• Ellipses are created by defining a bounding
  rectangle
• The center of the ellipse is the center of the
  bounding rectangle
• Ellipses may be outlined or filled
• An arc represents a portion of an ellipse
• A pie is created using that part of an ellipse
  formed by an arc

43
Drawing and Filling Polygons

• The Graphics class supplies methods to draw a
  polygon outline using a pen (DrawPolygon), and to
  fill a polygon using a brush (FillPolygon)
• The DrawPolygon method accepts two arguments
• A pen
• An array of Point structures

44
Creating Polygons (Example)

• Create an array of points
• Dim pnt1 As New Point(100, 100)
• Dim pnt2 As New Point(150, 200)
• Dim pnt3 As New Point(50, 200)
• Dim pntList() As Point pnt1, pnt2, pnt3
• Draw the polygon using a pen
• e.Graphics.DrawPolygon(Pens.Black, pntList)
• Fill the polygon using a brush
• e.Graphics.FillPolygon(Brushes.Plum, pntList)

45
Polygon Illustration
46
Drawing and Filling Ellipses

• Drawing an ellipse involves defining a bounding
  rectangle
• The shape of the bounding rectangle defines the
  shape of the ellipse
• Call the DrawEllipse method of the Graphics class
  to draw an outline of the ellipse using a pen
• Call the FillEllipse method to fill the ellipse
  with a brush

47
Drawing and Filling Ellipses (Illustration)
48
Drawing and Filling Arcs

• The process is similar to creating an ellipse
• Define the bounding rectangle and ellipse
• Define the starting angle
• Define the sweep angle
• Example create a 90 degree arc

Dim recArc As New Rectangle(5, 5, 100,
100) e.Graphics.DrawArc(Pens.Red, recArc, 0, 90)
49
Drawing Arcs
50
Drawing Images (Overview)

• The overloaded DrawImage method draws an image to
  a graphical device
• Drawing an image requires that you
• First load the image into memory
• Once an image has been loaded into memory, draw
  it to a graphics surface by calling the DrawImage
  method of the Graphics class

51
Drawing Images (Syntax)

• Overloads Public Sub DrawImage(ByVal image As _
  
• Image, ByVal point As Point)
• Overloads Public Sub DrawImage(ByVal image As _
• Image, ByVal rect As Rectangle)
• First overloaded method accepts two arguments
• The image to draw and a Point structure
• Image is drawn using the point as the origin
• Size of the drawn image is the same as the size
  of the underlying image
• Second overloaded method also accepts two
  arguments
• The image to draw and a bounding rectangle

52
Drawing Images (Example)

• Create a point and rectangle
• Dim imgCurrent As Image
• Dim pntImage As New Point(0, 0)
• Dim recImage As New Rectangle(40, 40, 80, 160)
• Load image
• imgCurrent Image.FromFile("C\image.bmp")
• Draw image at point and in rectangle
• e.Graphics.DrawImage(imgCurrent, pntImage)
• e.Graphics.DrawImage(imgCurrent, recImage)

53
Graphical Transformations (World Transformation)

• By default a form's origin is the upper-left
  corner of the form
• The mapping of world coordinates to page
  coordinates is called world transformation
• Call the TranslateTransform method to change the
  origin

54
World Transformation (Illustration)
55
World Transformation (Example)

• Make the center of the form the origin
• e.Graphics.TranslateTransform( _
• ToSingle(Me.ClientSize.Width / 2), _
• ToSingle(Me.ClientSize.Height / 2))

56
Graphical Transformations (Page Transformations)

• GDI performs a page transformation converting
  page coordinates into device coordinates
• Use to change unit of measure from pixels to
  something else
• Example change unit of measure to inches
• e.Graphics.PageUnit GraphicsUnit.Inch
• e.Graphics.DrawLine(Pens.Black, 0, 0, 0, 1)

57
Graphical Transformations (Graphical Rotation)

• Graphics are rotated about the forms originwhen
  the RotateTransform method of the Graphics class
  is called
• Examples
• Rotate 90 degrees
• e.Graphics.RotateTransform(90)
• Rotate 180 degrees
• e.Graphics.RotateTransform(190)

58
Graphical Transformations (Scaling Graphics)

• Scaling allows you to change the magnification of
  the graphics drawn about the form
• Zoom in
• e.Graphics.ScaleTransform(2, 2)
• Zoom out
• e.Graphics.ScaleTransform(0.5, 0.5)

59
Drawing to a Printer

• VB .NET supplies several related classes that
  support the printing process
• The PageSettings class defines page orientation
  and page margins
• The PrinterSettings class allows you to define
  settings for the printer itself, and to select a
  printer
• The PrintDialog class works similarly to the
  OpenFileDialog or the SaveFileDialog classes
• It allows the user to select print options

60
The PrintDocument Class (1)

• Allows drawing operations to be performed to a
  printer or PrintPreviewDialog
• Properties
• The DefaultPageSettings property references an
  object of type PageSettings
• The DocumentName property contains the name of
  the document
• The PrinterSettings property allows you to define
  which printer will be used to print the document
• Set the HasMorePages property to False when
  printing is complete
• Set the HasMorePages property to True to print
  another page

61
The PrintDocument Class (2)

• Methods
• Calling the Print method begins the printing
  process
• Events
• The BeginPrint event fires just before printing
  begins
• The EndPrint event fires after printing completes
• The PrintPage event fires after the BeginPrint
  event
• Perform printing operations in this event handler

62
The PrintDialog Control (1)

• Allows the user to select print options
• Does not cause printing to commence
• Properties
• The AllowSomePages property enables the radio
  buttons in the Print range section allowing the
  user to select which pages to print
• The AllowSelection property enables the Selection
  radio button allowing the user to print the
  selection
• The All button is always enabled
• The PrinterSettings property references a
  PrinterSettings object

63
The PrintDialog Control (2)

• Methods
• The ShowDialog method displays the PrintDialog
  control
• The method returns a value of type DialogResult

64
PrintDialog Control (Example)

• Create an instance of the PrinterSettings class
• Dim psImage As New PrinterSettings()
• Dim dlgResult As DialogResult
• Associate PrinterSettings with PrintDialog
• dlgImage.PrinterSettings psImage
• dlgResult dlgImage.ShowDialog()
• Display PrintDialog control instance
• If dlgResult DialogResult.OK Then
• ' Statements to print output
• EndIf

65
The PrinterSettings Class (1)

• Purpose is to configure the printer
• Properties (1)
• The Copies property contains the number of copies
  to print
• The FromPage property contains the starting page
  to print
• The ToPage property contains the ending page to
  print
• The IsValid property examines the value of the
  PrinterName property to determine whether the
  printer is a valid printer
• The PrinterName property contains the name of the
  printer to use
• The Boolean PrintToFile property, if True, causes
  the document to be printed to a file. If False
  (the default), then the document is printed to
  the selected printer

66
The PrintPreviewDialog and PrintPreview Controls

• The PrintPreviewDialog and PrintPreview controls
  allow you to preview a document before printing
  it
• The PrintPreviewDialog control previews the
  document in a separate dialog box
• The PrintPreview control previews the document
  inside the visible region of the control instance
  appearing on the form