This chapter is from the book
This chapter is from the book
This chapter is from the book
Drawing Basic Shapes
We continue our exploration of the namespace by drawing some basic shapes. Again, the variety and features contained in the namespace are astounding; we'll try to take a path that focuses on the shapes and illustration details you're most likely to employ in building your application.
Rectangles
The Rectangle structure is the backbone of the shapes presented in this section. Classes like Ellipse and Pie use it to bind their shape. The structure stores the size and location of a rectangular region.
We have two constructors available to create an instance of the Rectangle structure. One creates the rectangle based on the upper-left x and y coordinate, the width of the rectangle, and its height. To the other constructor, you pass both location as an instance of the Point structure, and Size as an instance of the Size structure.
Listing 9.1 illustrates both rectangle constructors. The code is simply fired by a button's click event. The rectangles are output to the active form.
Listing 9.1 DrawRectangle
Private Sub Button1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
'dimension variables of local scope
Dim myGraphics As Graphics
Dim myRectangle As Rectangle
Dim myPen As New Pen(Color.Blue)
'return the current form as a drawing surface
myGraphics = Graphics.FromHwnd(ActiveForm().Handle)
'create a rectangle based on x,y coordinates, width, & height
myRectangle = New Rectangle(x:=5, y:=5, Width:=10, Height:=40)
'draw rectangle from pen and rectangle objects
myGraphics.DrawRectangle(pen:=myPen, rect:=myRectangle)
'create a rectangle based on Point and Size objects
myRectangle = New Rectangle(Location:=New Point(10, 10), _
Size:=New Size(Width:=20, Height:=60))
'draw another rectangle from Pen and new Rectangle object
myGraphics.DrawRectangle(pen:=myPen, rect:=myRectangle)
'draw a rectangle from a Pen object, a rectangle's x & y,
' width, & height
myGraphics.DrawRectangle(pen:=myPen, x:=20, y:=20, _
Width:=30, Height:=80)
End Sub
The DrawRectangle method of the Graphics object allows us to draw the outline of a rectangle to the drawing surface. The method is overloaded with three different sets of parameters. The first set allows you to create a rectangle based on a Pen and Rectangle instance. The other two sets create a rectangle directly from a Pen instance and the rectangle's x and y coordinates (width and height). The difference between these two is the data types used to define the coordinates and size. One uses the Int32 data type, and the other uses a Single.
Ellipses
An ellipse is simply a circle or oval bound inside a Rectangle structure. To draw an ellipse, you can use the DrawEllipse method of the Graphics class. This method requires a Pen object and some semblance of a rectangle definition (structure instance, coordinates, and so on). The following code illustrates drawing an ellipse inside of a defined Rectangle instance.
'dimension variables of local scope Dim myGraphics As Graphics 'return the current form as a drawing surface myGraphics = Graphics.FromHwnd(ActiveForm().Handle) 'draw an ellipse inside a bounding rectangle with a Pen instance myGraphics.DrawEllipse(pen:=New Pen(color.Blue), _ rect:=New Rectangle(x:=5, y:=5, width:=70, height:=25))
Polygons
A polygon is a closed plane, or object, represented by at least three lines (segments). To draw polygons with the namespace, we simply play connect-the-dots. We first create the dots using the Point structure. These dots are actually a series of coordinates through which we will draw lines. Figure 9.3 shows a set of six points using the basic Windows coordinate system.
){kind=link}
To connect the dots, we use the DrawPolygon method of the Graphics class. We indicate the order in which to connect the points of the polygons by their order in our Point array. You can see from code Listing 9.2 that the points can be connected in a variety of ways to produce varied results.
Figure 9.3 Polygon coordinates.
Listing 9.2 DrawPolygon
Private Sub Button1_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles Button1.Click 'declare variables of local scope Dim myGraphics As Graphics Dim myPoints() As Point 'return the current form as a drawing surface myGraphics = Graphics.FromHwnd(hwnd:=ActiveForm().Handle) 'create a 7-item array of point structures in order of connection ReDim myPoints(6) myPoints(0) = New Point(15, 20) myPoints(1) = New Point(25, 15) myPoints(2) = New Point(35, 20) myPoints(3) = New Point(35, 40) myPoints(4) = New Point(25, 45) myPoints(5) = New Point(15, 40) myPoints(6) = New Point(15, 20) 'draw the polygon (connect the dots between the points in the array) myGraphics.DrawPolygon(pen:=New Pen(Color.Blue, Width:=2), _ points:=myPoints) 'create a new 7-item array (y + 50 for offset) ReDim myPoints(6) myPoints(0) = New Point(15, 70) myPoints(1) = New Point(25, 65) myPoints(2) = New Point(35, 70) myPoints(3) = New Point(15, 90) myPoints(4) = New Point(25, 95) myPoints(5) = New Point(35, 90) myPoints(6) = New Point(15, 70) 'draw the polygon (connect the dots between the points in the array) myGraphics.DrawPolygon(pen:=New Pen(Color.Blue, Width:=2), _ points:=myPoints) End Sub
Notice that the last member of the array in Listing 9.2 always points back to the starting point. This closes the polygon. If you omit this last element in the array, the method assumes it and will close the polygon for you.
Pies
A pie is simply a wedge of a circle, similar to a section in a pie chart or a piece of pie. GDI+ defines a pie section by an Ellipse object (which is contained by a Rectangle), and the two radial lines that intersect with the endpoints of the arc defined by the Ellipse. Figure 9.4 illustrates this point.
){kind=link}
Figure 9.4 DrawPie method.
From Figure 9.4, you can see that the x and y coordinates actually define the upper-left corner (or starting point) of the bounding rectangle. The pie piece is drawn from the center of this rectangle. The width and height of the rectangle define the size of the ellipse, which in turn defines the size of our wedge.
To create a pie wedge we use, you guessed it, the Graphics class. The DrawPie method has two key parameters (in addition to the Rectangle that defines the Ellipse and the Pen object that is used to draw the pie), startAngle and sweepAngle. The startAngle parameter is an angle that is defined clockwise from the x-axis to the first side of the pie. The parameter, sweepAngle, is defined clockwise from the first side of the pie to the second side of the pie section. This is easier to grasp by looking at both the code in Listing 9.3.
Listing 9.3 DrawPie
Private Sub Button1_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles Button1.Click 'dimension variables of local scope Dim myGraphics As Graphics Dim myRectangle As Rectangle Dim myPen As New Pen(color:=Color.Blue, Width:=1) 'return the current form as a drawing surface myGraphics = Graphics.FromHwnd(ActiveForm().Handle) 'create a rectangle based on x,y coor. width & height myRectangle = New Rectangle(x:=5, y:=5, Width:=50, Height:=50) 'draw the upper-right pie section myGraphics.DrawPie(pen:=myPen, rect:=myRectangle, _ startAngle:=0, sweepAngle:=-90) 'draw the upper-left pie section myGraphics.DrawPie(pen:=myPen, rect:=myRectangle, _ startAngle:=-90, sweepAngle:=-90) 'draw the bottom-left pie section myGraphics.DrawPie(pen:=myPen, rect:=myRectangle, _ startAngle:=-180, sweepAngle:=-90) 'draw the bottom-right pie section myGraphics.FillPie(New SolidBrush(Color.Chartreuse), _ rect:=New Rectangle(x:=8, y:=8, Width:=50, Height:=50), _ startAngle:=-270, sweepAngle:=-90) End Sub
From Listing 9.3, you can see that when the first section of the pie is created, we set the start angle to 0 and the sweep angle to 90° counterclockwise (negative). The next piece starts where the last one left off and again creates a section of equal value (90°). Note how the last piece was created with the FillPie method with an offset to add extra highlighting to the piece.
Suggestions for Further Exploration
Experiment with the following methods of the Rectangle structure: inflate, intersects, and contains.
Check out the Graphics class methods: DrawRectangles, DrawLines, FillRectangle, and FillPolygon.