Drawing Shapes on a Form
In this lesson, you will learn how to draw shapes such as rectangles or circles on a form.
In the previous lesson, you learned how to draw lines on a form using the DrawLine graphics method and a Pen object. In addition to the DrawLine method, Visual Basic also has graphics methods for drawing shapes, and graphics objects known as brushes for filling shapes.
Drawing Simple Shapes
Drawing a shape is similar to drawing a line—you need to define the coordinates and the color with which to draw. Where a line took coordinates defining a starting and ending point, a shape such as a square or rectangle takes coordinates describing its upper-left corner, width, and height.
Circles and ovals (also known as ellipses) do not have upper-left corners, so instead the coordinates describe the upper-left corners of their bounding rectangles—an imaginary rectangle of the same width and height of the circle or oval.
Try It!
To draw shapes
On the File menu, choose New Project.
On the Templates pane, in the New Project dialog box, select Windows Application.
In the Name box, type Shapes and then click OK.
A new Windows Forms project opens.
Double-click the form to open the Code Editor, and then select Paint from the Events drop-down list.
In the Form1_Paint event handler, add the following code.
' Draw a 200 by 150 pixel green rectangle. e.Graphics.DrawRectangle(Pens.Green, 10, 10, 200, 150) ' Draw a blue square e.Graphics.DrawRectangle(Pens.Blue, 30, 30, 150, 150) ' Draw a 150 pixel diameter red circle. e.Graphics.DrawEllipse(Pens.Red, 0, 0, 150, 150) ' Draw a 250 by 125 pixel yellow oval. e.Graphics.DrawEllipse(Pens.Yellow, 20, 20, 250, 125)Press F5 to run the program. You should see four shapes on the form.
Keep the project open—you will add to it in the next procedure.
Drawing Filled Shapes
So far, the shapes that you have drawn are just outlines. To draw shapes with solid colors, you need to use one of the fill methods such as FillRectangle or FillEllipse. The fill methods use a Brush object, another type of graphics object that can paint.
When filling a shape with a different color, you will need to define coordinates that are smaller than the shape; otherwise the border will be covered. For example, to fill a square with the coordinates 0, 0, 150, 150 you would specify a fill with the coordinates 1, 1, 149, 149, accounting for the one pixel thickness of the line.
To draw filled shapes
In the Form1_Paint event handler, add the following code below the code that you entered earlier.
' Fill the circle with the same color as its border. e.Graphics.FillEllipse(Brushes.Red, 0, 0, 150, 150) ' Fill the square with a different color. e.Graphics.FillRectangle(Brushes.Aquamarine, 31, 31, 149, 149)Press F5 to run the program.
Notice that the filled square appears on top of the filled circle, but that part of its border has disappeared. The order in which you call the graphics methods determines the order in which they are drawn—in this case, the filled circle was drawn after the blue-border rectangle.
Try changing the order of the methods and see what happens.
Next Steps
In this lesson, you learned how to draw and fill shapes. In the next lesson, you will learn how to draw text using graphics methods.
Next Lesson: Drawing Text on a Form