Basic GDI+ Objects in VB.NET
In this article we will discuss some basic GDI+ objects, such as the color-point-, and rectangle-related structures provided by the .NET Framework library. Understanding these structures is very important because they are used throughout.
The Color Structure
You may have notices that we used the Color structure in our previous example. The Color satructure represents a GDI+ ARGB (alpha-red-green-blue) color. This class contains a static property for almost every possible color. For example, Color.Black and Color.Red represent black and red respectively. Beside these static properties, this structure has the additional properties defined in Table 2.1.
IsKnownColor, IsNamedColor and IsSystemColor represent members of the KnownColor enumeration, which again defines almost every color as a member.
Table 2.2 describes the methods of the Color structure.
TABLE 2.1 Color properties
Property
|
Description
|
Red, Blue, Green, Aqua, Azure, and so on
|
A specified color static property for almost every color.
|
A
|
Return the alpha component value in a Color structure.
|
R
|
Returns the red component value in a Color Structure.
|
G
|
Returns the green component value in a Color Structure.
|
B
|
Returns the blue component value in a Color Structure.
|
IsEmpty
|
Indicates whether a Color structure is uninitialized.
|
IsKnownColor
|
Indicate whether a color is predefined.
|
IsNamedColor
|
Indicate whether a color is predefined.
|
IsSytemColor
|
Indicates whether a color is a system color.
|
Name
|
Return the name of the color.
|
TABLE 2.2: Color methods
Method
|
Description
|
FromArgb
|
Creates a Color structure from the four 8-bit ARGB component (alpha-red-green-blue) values.
|
FromKnownColor
|
Create a Color structure from the specified predefined color.
|
FromName
|
Creates a Color structure from the specified name of a predefined color.
|
GetBrightness
|
Returns the hue-saturation-brightness (HSB) brightness value of this Color structure.
|
GetHue
|
Returns the HSB he value, in degrees, of this Color structure.
|
GetSaturation
|
Returns the HSB hue value in degrees, of this Color structure.
|
ToArgb
|
Returns the 32-bit ARGB value of this Color structure.
|
ToKnownColor
|
Return the KnownColor value of this Color structure.
|
The Point and PointF Structure
In GDI+, the Point structure represents an ordered pair of integer x- and y-coordinates that define a point in a two-dimensional plane. The Point structure's constructor initializes a new instance of the Point structure.
The following code snippet creates Point objects using all three forms of the constructor:
Dim pt1 As New Point(10)
Dim pt2 As New Point(New Size(20, 20))
Dim pt3 As New Point(30, 30)
The PointF structure is similar to the Point structure, but it uses floating point values of integers. Unlike the Point structure, PointF has only one constructor, which takes two floating point values as x- and y-coordinates.
Dim pt3 As New PointF(30F, 30F)
Both the Point and the PointF structures define three properties: IsEmpty, X, and Y. The IsEmpty property returns true if a point is empty, which means that both X and Y values are zero; otherwise it returns false. The X and Y properties return the x- and y-coordinates of a point, respectively. The Empty static field of the Point structure creates a new point with x and y values set to zero.
Listing 2.3 creates a point with zero x and y values using Point. Empty and assigns new coordinates values using the X and Y properties. This example creates a Graphics object using the Graphics.FromHwnd method and returns the graphics surface for a form. The Graphics.FromHwnd method creates a Graphics object from a window handle, which we pass as this.Handle. The DrawLine method draws a line starting from the first point to the second point using the defined pen. You can test this code on a button or a menu click event handler.
LISTING 2.3: Creating Point objects
'Create a new Point object
Dim pt As New Point(50, 50)
'Create a new point using Point.Empty
Dim newPoint As Point = Point.Empty
'Set X and Y properties of Point
newPoint.X = 100
newPoint.Y = 200
'Create a Graphics object from the
'Current form's handle
Dim g As Graphics = Graphics.FromHwnd(Me.Handle)
'Create a new pen with color blue and width = 4
Dim pn As New Pen(Color.Blue, 4)|
'Draw a line from point pt to new point
g.DrawLine(pn, pt, newPoint)
'Dispose of Pen and Graphics objects
pn.Dispose()
g.Dispose()
FIGURE 2.10: Using Point to draw a line
Figure 2.10 shows the output of Listing 2.3. This program draws a line from point 1 to point 2. The "Point" text in this figure is a menu item.
Like the Point structure, PointF can also use Empty, x, and y properties, as shown in Listing 2.4. You can test this code on a button or a menu click event handler.
LISTING 2.4: Creating PointF objects
'Create a new PointF object
Dim pt As New PointF(50.0F, 50.0F)
'Create a new point using PointF.Empty
Dim newPoint As PointF = PointF.Empty
'Set x and y properties of PointF
newPoint.X = 100.0F
newPoint.Y = 200.0F
'Create a Graphics object from the current form's handle
Dim g As Graphics = Graphics.FromHwnd(Me.Handle)
'Create a new pen with color blue and width 4
Dim pn As New Pen(Color.Blue, 4)
'Draw a line from point pt to new point
g.DrawLine(pn, pt, newPoint)
'Dispose of Pen and Graphics objects
pn.Dispose()
g.Dispose()
FIGURE 2.11: Using PointF to draw a line
Figure 2.11 shows the output of Listing 2.4. It is identical to Figure 2.10.
The Point structure also defines methods to convert from PointF to Point. The Ceiling method of the Point structure converts a PointF object to a Point object by rounding off the values of the PointF object to the next higher integer values. The Round method converts a PointF object to Point by rounding floating values to the nearest integer values. The Truncate method converts a PointF object to Point by truncating the floating values to integers. Listing 2.5 shows how to use the Ceiling, Round, and Truncate methods. You can test this code on a button or a menu click event handler.
LISTING 2.5 Using the Ceiling, Round, and Truncate methods of Point
'Create three points
Dim pt1 As New PointF(30.6F, 30.8F)
Dim pt2 As New PointF(50.3F, 60.7F)
Dim pt3 As New PointF(110.3F, 80.5F)
'Call Ceiling, round, and Truncate methods and return new points
Dim pt4 As Point = Point.Ceiling(pt1)
Dim pt5 As Point = Point.Round(pt2)
Dim pt6 As Point = Point.Truncate(pt3)
'display results
MessageBox.Show("Value of pt4: " & pt4.ToString())
MessageBox.Show("Value of p5: " & pt5.ToString())
MessageBox.Show("Value of pt6: " & pt6.ToString())
The Point structure also defines additional, equality, inequality, subtraction, Point-to-Size, and Point-to-PointF conversion operators. Listing 2.6 shows how do add and subtract a Size object from a Point object, convert from Point to PointF, and convert from a Point object to a Size object. You can test this code on a button or menu click event handler.
LISTING 2.6: Some Point and PointF conversions
'Create a Size object
Dim sz As New Size(12, 12)
'Create a Point object
Dim pt As New Point(20, 20)
'Add point and size and copy to point
pt = pt + sz
MessageBox.Show("Addition : " & pt.ToString())
'Subtract point and size
pt = pt - sz
MessageBox.Show("subtraction : " & pt.ToString())
'Create a PointF object from Point
Dim ptf As PointF = pt
MessageBox.Show("PointF : " & pt.ToString())
'Convert Point to size
sz = DirectCast(pt, Size)
MessageBox.Show(("Size :" & sz.Width.ToString() & ",") + sz.Height.ToString())
The Rectangle and RectangleF Structure
The Rectangle and RectangleF structure represent a rectangle in GDI+. A Rectangle structure stores the top left corner and height and width of a rectangle region. You can create a Rectangle object from Point and Size objects or by using four integer values as starting and ending coordinates of the rectangle.
The Rectangle and RectangleF structure provides properties that can be used to get the height, width, and position of the rectangle. Table 2.3 describes the properties of the Rectangle and RectangleF structures.
LISTING 2.7: Using Rectangle Properties
'Create Point, Size, and Rectangle objects
Dim pt As New Point(10, 10)
Dim sz As New Size(60, 40)
Dim rect1 As Rectangle = Rectangle.Empty
Dim rect2 As New Rectangle(20, 30, 30, 10)
TABLE 2.3: Rectangle and RectangleF Properties
Property
|
Description
|
Bottom
|
Return the y-coordinate of the bottom edge.
|
Height
|
Represents the rectangle's height.
|
IsEmpty
|
Returns true if all of the rectangle's values (starting point, height, and width) are zero, otherwise returns false.
|
Left
|
Returns the x-coordinates of the left edge.
|
Location
|
Represents the coordinates of the upper left corner.
|
Right
|
Returns the x-coordinate of the right edge.
|
Size
|
Represents the size of a rectangle.
|
Top
|
Return the y-coordinate of the top edge.
|
Width
|
Represents the width of a rectangle.
|
X
|
Represents the width of a rectangle.
|
Y
|
Represents the y-coordinate of the upper left corner.
|
'Set Rectangle properties
If rect1.IsEmpty Then
rect1.Location = pt
rect1.Width = sz.Width
rect1.Height = sz.Height
End If
'Get Rectangle properties
Dim str As String = "Location: " & rect1.Location.ToString()
str += ", X: " & rect1.X.ToString()
str += ", y:" & rect1.Y.ToString()
str += " Left : " & rect1.Left.ToString()
str += ", Right:" & rect1.Right.ToString()
str += ", Top: " & rect1.Top.ToString()
str += ", Bottom:" & rect1.Bottom.ToString()
MessageBox.Show(str)
Listing 2.8 uses three different methods to create three Rectangle objects. The first method creates a Rectangle object by using a Point and a Size. The second and third methods create a Rectangle by using four integer values as the starting x- and y-coordinates and the width and height of the rectangle. After creating the rectangle, the program creates pen and brush objects using the Pen and SolidBrush classes and calls the fill and draw methods of Graphics to draw and fill the rectangles. Finally, we dispose of the objects. You can test this code on a button or menu click event handler.
LISTING 2.8: Creating Rectangle Objects
'Create a Graphics object
Dim g As Graphics = Me.CreateGraphics()
Dim x As Integer = 40
Dim y As Integer = 40
Dim height As Integer = 120
Dim width As Integer = 120
'Create a Point object
Dim pt As New Point(80, 80)
'Create a Size object
Dim sz As New Size(100, 100)
'Create a rectangle from Point and size
Dim rect1 As New Rectangle(pt, sz)
'Create a rectangle from integers
Dim rect2 As New Rectangle(x, y, width, height)
'Create a rectangle from direct integers
Dim rect3 As New Rectangle(10, 10, 180, 180)
'Create pens and brushes
Dim redPen As New Pen(Color.Red, 2)
Dim greenBrush As New SolidBrush(Color.Blue)
Dim blueBrush As New SolidBrush(Color.Green)
'Draw and fill rectangles
g.DrawRectangle(redPen, rect3)
g.FillRectangle(blueBrush, rect2)
g.FillRectangle(greenBrush, rect1)
'Dispose of the objects
redPen.Dispose()
blueBrush.Dispose()
greenBrush.Dispose()
g.Dispose()
Figure 2.12 shows the output from Listing 2.8: three different rectangles.
FIGURES 2.12: Using Rectangle to create rectangles
You can create a Rectangle object in a similar way. The only difference is that RectangleF takes floating point arguments instead of integers, SizeF instead of Size, and PointF instead of Point. Listing 2.9 creates RectangleF objects from SizeF, PointF, Size and Point objects. You can test this code on a button or a menu click event handler.
LISTING 2.9: creating RectangleF objects
'Create a Graphics object
Dim g As Graphics = Me.CreateGraphics()
Dim x As Single = 40.0F
Dim y As Single = 40.0F
Dim height As Single = 120.0F
Dim width As Single = 120.0F
'Create a Point object
Dim pt As New PointF(80.0F, 80.0F)
'Create a Size object
Dim sz As New SizeF(100.0F, 100.0F)
'Create a rectangle from Point and size
Dim rect1 As New RectangleF(pt, sz)
'Create a rectangle from integers
Dim rect2 As New RectangleF(x, y, width, height)
'Create a rectangle from direct integers
Dim rect3 As New RectangleF(10.0F, 10.0F, 180.0F, 180.0F)
'Create pens and brushes
Dim redPen As New Pen(Color.Red, 2)
Dim greenBrush As New SolidBrush(Color.Blue)
Dim blueBrush As New SolidBrush(Color.Green)
'Draw and fill rectangles
g.DrawRectangle(redPen, rect3.X, rect3.Y, rect3.Width, rect3.Height)
g.FillRectangle(blueBrush, rect2)
g.FillRectangle(greenBrush, rect1)
'Dispose of the objects
redPen.Dispose()
blueBrush.Dispose()
greenBrush.Dispose()
g.Dispose()
Figure 2.13 shows the output from Listing 2.9: three different rectangles as in Figure 2.12.
FIGURE 2.13: Using RectangleF to create rectangles
TABLE 2.4: Rectangle and RectangleF methods
Method
|
Description
|
Ceiling
|
Converts a RectangleF object to a Rectangle object by rounding the RectangleF values to the next higher integer values.
|
Contains
|
Determines if the specified point is contained within the rectangular region of a rectangle.
|
FromLTRB
|
Creates a rectangle with the specified edge locations.
|
Inflate
|
Creates and returns an inflated copy of a rectangle.
|
Intersect
|
Replaces a rectangle with the intersection of itself and another rectangle.
|
IntersectsWith
|
Determines it a specified rectangle intersects with rect.
|
Offset
|
Adjust the location of a specified rectangle by the specified amount.
|
Round
|
Converts a RectangleF object to a Rectangle object by rounding the RectangleF values of the nearest integer values.
|
Truncate
|
Converts a RectangleF object to a Rectangle object by truncating the RectangleF values.
|
Union
|
Returns a rectangle that contains the union of two Rectangle structure.
|
Like the Point and PointF structures, Rectangle and RectangleF define Ceiling, Round, and Truncate methods. These methods are described in Table 2.4. Listing 2.10 shows how to use these methods.
LISTING 2.10: Using the Round, Truncate, Union, inflate, Ceiling, and Intersect methods of Rectangle
'Create a Graphics object
Dim g As Graphics = Me.CreateGraphics()
'Create PointF, SizeF, and RectangleF objects
Dim pt As New PointF(30.8F, 20.7F)
Dim sz As New SizeF(60.0F, 40.0F)
Dim rect2 As New RectangleF(40.2F, 40.6F, 100.5F, 100.0F)
Dim rect1 As New RectangleF(pt, sz)
Dim rect3 As Rectangle = Rectangle.Ceiling(rect1)
Dim rect4 As Rectangle = Rectangle.Truncate(rect1)
Dim rect5 As Rectangle = Rectangle.Round(rect2)
'Draw rectangles
g.DrawRectangle(Pens.Black, rect3)
g.DrawRectangle(Pens.Red, rect5)
'Insert rectangles
Dim isectRect As Rectangle = Rectangle.Intersect(rect3, rect5)
'Fill new rectangle
g.FillRectangle(New SolidBrush(Color.Blue), isectRect)
'Create a Size object
Dim inflateSize As New Size(0, 40)
' Inflate rectangle
isectRect.Inflate(inflateSize)
'Draw new rectangle
g.DrawRectangle(Pens.Blue, isectRect)
'Set Rectangle properties
rect4 = Rectangle.Empty
rect4.Location = New Point(50, 50)
rect4.X = 30
rect4.Y = 40
'Union two rectangles
Dim unionRect As Rectangle = Rectangle.Union(rect4, rect5)
'Draw new rectangle
g.DrawRectangle(Pens.Green, unionRect)
'Dispose of the Graphics object
g.Dispose()
Figure 2.14 shows the output from listing 2.10
The Size and SizeF Structures
The Size and SizeF structures represent the size of a rectangle area. Like Point/PointF and Rectangle/RectangleF, Size and SizeF also each have an Empty static field, which creates a Size object with zero height and zero width. The only difference between Size and SizeF is that Size uses integer values and SizeF uses floating point values.
You can create Size and SizeF objects by passing the width and height of the Point and PointF objects as constructor arguments, respectively. Listing 2.11 shows different ways to create Size and SizeF objects.
FIGURE 2.14: Using the Round, Truncate, Union, Inflate, Ceiling, and Intersect methods of Rectangle.
LISTING 2.11 Creating Size and SizeF objects
Dim pt1 As New Point(20, 40)
Dim pt2 As New PointF(50.0F, 80.0F)
Dim sz1 As New Size(pt1)
Dim sz2 As New SizeF(pt2)
Dim sz3 As New Size(100, 150)
Dim sz4 As New SizeF(12.5F, 87.6F)
The Height and Width properties represent the height and width respectively, of the area represented by the Size and SizeF structures. The IsEmpty property return true if Size has zero height and zero width; otherwise it returns false.
Like the Point/PointF and Rectangle/RectangleF structures, Size and SizeF have Ceiling, Truncate, and Round static methods. Each method can convert a SizeF object to a Size object: the Ceiling method by rounding the values of the Size structure to the next higher integer values; the Round method, by rounding the values of the Size structures to the nearest integer values; and the Truncate method, by truncating the values to the next lower integer values.
Listing 2.12 shows the use of the Ceiling, Round and Truncate methods. You can test this code on a button or a menu click event handler.
LISTING 2.12: Using the Ceiling, Round, and Truncate methods of Size and SizeF
Dim pt1 As New PointF(20.6F, 30.8F)
Dim pt2 As New PointF(50.3F, 60.7F)
Dim pt3 As New PointF(110.3F, 80.5F)
Dim sz1 As New SizeF(pt1)
Dim sz2 As New SizeF(pt2)
Dim sz3 As New SizeF(pt3)
Dim sz4 As SizeF = Size.Ceiling(sz1)
Dim sz5 As SizeF = Size.Round(sz2)
Dim sz6 As SizeF = Size.Truncate(sz3)
Conclusion
Before you write a graphic application, a basic understanding of drawing surfaces and coordinates is a must. This article began with the basic of the drawing surface and the coordinate system, describing how drawing surface and coordinate system are represented in GDI+ and how the GDI+ coordinate system differs from other coordinate systems.
Before using any GDI+ related classes defined in the .NET Framework library, you must reference System.Drawing and its subnamespaces. In this article you learned how to add reference to the GDI+ library and how to import the GDI+ related namespaces into your application. After adding a reference to the GDI+ library and namespaces to the application, the nest step is to get the Graphics object. There are several ways to get a Graphics object in an application. This article discussed three different ways, and then showed how to use the Graphics class methods to draw and fill lines, rectangles, and ellipses. You also learned to dispose of objects when you're finished with them.
Finally, we covered some basic GDI+ structures - including Color, Rectangle, RectangleF, Point, PointF, Size and SizeF-describing their members and how to use them in your application.
You should now be able to write simple graphics applications using GDI+.