Section 13.0

Introduction

Here, we mainly look at the built-in procedures (also termed 'methods') for shape drawing. We need to pass parameters (or 'arguments'). These terms mean exactly the same thing.  

Section 13.1

Objects, procedures, (methods), properties, classes - an analogy

Sometimes, you can approach object-oriented programming via an analogy. Here, we will look at the concept of a graphics drawing kit from a real-world point of view, and then from a computer object-oriented point of view. Please note that this is very much an introduction, and we will cover this material in more detail in following chapters.

In the real world, our drawing kit might consist of a pile of blank sheets of paper, some pens, and a set of shape-drawing tools ( for example a ruler, and a template with shapes cut out). The pens must match the paper: if the sheets are transparencies, then we might use oil-based pens.

Note that the paper by itself, or the template by itself, is not enough - it is the combination of them that provides us with the drawing kit.

In the computer's object-oriented world, we request that VB supplies us with a drawing area (rather like selecting 'new' in a word-processor). This drawing area comes with a set of procedures - also known as 'methods' (functions, operations) for shape-drawing. The idea of a sheet of paper that can do nothing goes against the object- oriented approach. To re-phrase: in VB's object style, we obtain a sheet of 'clever' paper, which comes with a set of facilities.

How many drawing kits can we create? There is no practical limit on a computer. For example, in a word-processor, you can create as many new document windows as you need, by clicking the 'new' button. In fact, in VB the word New is used to provide the programmer with newly-created objects to work with. When we use New, we must also specify what type of new object we require. In other words, we choose the class of the object. VB has a large collection of existing classes (such as buttons, labels, forms etc).

Let us move slightly closer to actual coding. The approximate code for drawing a rectangle is:

paper.DrawRectangle(details of color, rectangle position, etc.)

Objects can also have 'properties' as well as methods. We don't call properties - they don't do tasks for us. Rather, they let us access or change the current 'state' (settings) of an object. For example, the Text property of a button contains the message that the button shows. We can set this at design time, and in fact at run-time if we wish.

In the following code, we will be calling methods of the Graphics class provided by VB. It comes with a list of methods (such as DrawRectangle etc). Our drawing area - which we choose to name as paper - will in effect be a picture box control, available from the toolbox.

We will also be creating a new pen object and setting its color.

Section 13.2

A first drawing

Private Sub Button1_Click( _
                    ByVal sender As System.Object, _
                    ByVal e As System.EventArgs) _
                    Handles Button1.Click
    Dim paper As Graphics                             'always do this
    paper = PictureBox1.CreateGraphics()              '   and this
    Dim myPen As Pen = New Pen(Color.Black)           '   and this

    paper.DrawRectangle(myPen, 10, 10, 100, 50)
    paper.DrawRectangle(myPen, 10, 75, 100, 100)
End Sub

fig 1 - first drawing

Section 13.3

The final stage in creating the program is to double-click on the button and insert the drawing instructions. All of the instructions go within the Button1_Click1 method, as shown in the above code.

Run the program, then click on the 'Draw' button to see the two rectangles.

Now we will examine the detail of drawing shapes.  

Section 13.4

The graphics coordinate system

• the horizontal position, often referred to as x in mathematics, and also in the VB documentation. This value increases from left to right;
• the vertical position, often referred to as y - this value increases downwards.

The size of the drawings depends on the quality of your screen, and on the graphics settings on your system. Higher-quality graphics has more (hence smaller) pixels, so your drawings will be smaller.

fig 2 - coordinates

Section 13.5

Explanation of the program

Our drawing code is contained within one method, named Button1_Click. There are two phases here: firstly we set up the drawing facilities, and then we actually draw. Here is the first part:

Dim paper As Graphics
paper = PictureBox1.CreateGraphics()
Dim myPen As Pen = New Pen(Color.Black)

• Line 1 is where we choose our name for the drawing area (we chose paper).The word Dim (short for 'dimension' ) allows us to choose a name for our object, and we must also choose its 'class' i.e. its type. It is a Graphics item (rather than a Button, for example, or an Integer)
• In the second line, we link our drawing area to the picture box you placed on the form.
• In Line 3, we choose a name for our pen. The word Pen is already in use by VB - it is the name of a class of item - so we went for myPen. At the same time, we set it to the color black.

To draw the shapes, we call (or invoke) VB's drawing methods/procedures. Here is the code:

paper.DrawRectangle(myPen, 10, 10, 100, 50)
paper.DrawRectangle(myPen, 10, 75, 100, 100)

The DrawRectangle method is one of the many methods provided by the VB system in a library. The statement shown is a call (also known as an invocation) of the method, asking it to carry out the task of displaying a rectangle. A method is so called because it is a method (or way) of doing something.

When we make use of the DrawRectangle method, we need to supply it with a pen, and with values to fix its position and size. We need to get these in the correct order, which is:

• a Pen object;
• the horizontal value of the top left corner of the rectangle;
• the vertical value of the top left corner of the rectangle;
• the width of the rectangle;
• the height of the rectangle.

• we supply the correct number of arguments;
• we supply the correct type of arguments;
• we arrange them in the right order.

PictureBox1.CreateGraphics()

Here, we have been calling pre-written methods, but with VB's help we have written our own method. VB has named it Button1_Click. We don't need to call it, because VB calls it for us when Button1 is clicked. Its task is to call the DrawRectangle method twice.

Section 13.6

Methods for drawing

• lines;
• ellipses (i.e. ovals). This also includes circles.
• filled rectangles and ellipses;
• images from files.

Here we list the arguments for each method, and provide an example program (Some Shapes) which uses them.

DrawRectangle

• a pen object;
• the horizontal value of the top left corner of the rectangle;
• the vertical value of the top left corner of the rectangle;
• the width of the rectangle;
• the height of the rectangle.

DrawLine

Note that this method does not use the concept of an enclosing rectangle. The arguments are

• a pen object;
• the horizontal value of the start of the line;
• the vertical value of the start of the line;
• the horizontal value of the end of the line;
• the vertical value of the end of the line.

DrawEllipse

• a pen object;
• the horizontal value of the top left corner of the rectangle;
• the vertical value of the top left corner of the rectangle;
• the width of the rectangle;
• the height of the rectangle.

To produce filled shapes we have:

FillRectangle

Dim myBrush As SolidBrush = New SolidBrush(Color.Black)
paper.FillRectangle(myBrush, 10, 10, 90, 90)

FillEllipse

DrawImage

The order of arguments for DrawImage is:

• a bitmap object containing an image from a file.
• the horizontal value of the top left corner of the rectangle;
• the vertical value of the top left corner of the rectangle;
• the width of the rectangle;
• the height of the rectangle.

Section 13.7

Colors

Black            Violet      Blue
Indigo           Green       Yellow
Orange           Red         Gray
Purple           White       Firebrick
LemonChiffon     Maroon      OliveDrab
  

Here is a program (called Some Shapes) which draws a variety of shapes. Figure 3 shows the resulting output.

Private Sub Button1_Click(...etc...


    Dim paper As Graphics
    paper = PictureBox1.CreateGraphics()
    Dim pic As New Bitmap("c:\mike\vbbook\imagedemo.jpeg")
    Dim myPen As Pen = New Pen(Color.Black)
    Dim fillBrush As SolidBrush = New SolidBrush(Color.Gray)
    paper.DrawRectangle(myPen, 10, 10, 100, 50)
    paper.DrawLine(myPen, 10, 10, 110, 60)
    paper.DrawRectangle(myPen, 10, 80, 100, 50)
    paper.DrawEllipse(myPen, 10, 80, 100, 50)
    paper.FillEllipse(fillBrush, 10, 150, 100, 50)
    paper.DrawRectangle(myPen, 130, 10, 150, 150)
    paper.DrawImage(pic, 130, 10, 150, 150)
End Sub

fig 3 - some shapes

Create the program in the same manner as the First Shapes one, but make the picture box larger: to 300, 300.

Section 13.8

2. Write and run a program which draws a large 'T' shape on the screen, with blue lines.

Section 13.9

Summary

• Statements are obeyed in sequence, top to bottom (unless we request otherwise).
• VB has a set of 'draw' methods which you can call up to display graphics.
• Graphics positioning is based on pixel coordinates.
• Argument values can be passed into methods.

Section 13.10

Problems

1 Write a program which draws a right-angled triangle. Choose an appropriate size.

2 Write a program which draws an empty tic-tac-toe (noughts and crosses) board, made out of lines.

3 Design a simple house, then write a program which draws it.

4 Here are some annual rainfall figures for the country of Xanadu, which we wish to display graphically:

    1998    150 cm
    1999    175 cm
    2000    120 cm
    2001    130 cm

(b) Instead of lines, use filled rectangles.

5 Write a program which displays an archery-style target with concentric circles of different colors. The purchase of a rubber sucker gun to fire at the screen is optional.

6 Write a program which displays a simple face. The outline of the face, the eyes, ears, nose, and the mouth can be formed by ellipses. 7 Create an image in a paint package, and save it as a bmp, gif, or jpeg file. Write a program which displays this image, and use DrawRectangle to provide a suitable frame round the image.

Section 13.11

Animation

Another approach is to place a picture into a small picture box, then move the picture box itself. This is not shown here.

To draw at regular intervals, we put a Timer on the form. We can set its interval (i.e how many milliseconds between each tick) and switch it on and off (setting its 'enabled' property to true/false).

The following program has:

• 2 buttons - one provides a moving filled circle, with no clearing of the picture box between draws.

  The other button provides a similar shape, but the circle bounces off each side of the picture box.

• There is a picture box, whose backColor property is set to e.g. white
• To run it, you need to create the 2 buttons and the picture box, and also put 2 timers onto the form.
• The timers are not visible on the form, but they still work.
• As soon as you put a timer on the form, double-click each timer to generate the sub..._Tick code, as seen at the bottom of the following code. Any code we place in the Tick sub gets done at regular intervals, automatically.

• 
  ' animation examples
  Public Class Form1
  
      'globals
      Dim paper As Graphics
      Dim fillBrush As SolidBrush = New SolidBrush(Color.Blue)
      Dim x As Integer
      Dim xStep As Integer = 10    'change x by this, for every tick of Timer2
      '---------------------------------------------------
  
      Private Sub simpleButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles simpleButton.Click
          paper = PictureBox1.CreateGraphics
          Timer1.Enabled = True   'for simple
      End Sub
      '--------------------------------------------------------
  
      Private Sub bouncingButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles bouncingButton.Click
          paper = PictureBox1.CreateGraphics
          Timer2.Enabled = True    'for bouncing
      End Sub
      '------------------------------------------------------
  
      'simple
      Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
          paper.FillEllipse(fillBrush, x, 20, 50, 50)
          x = x + 10   ' for next tick, this increased x will be used
      End Sub
      '--------------------------------------------------------
  
      'bouncing
      Private Sub Timer2_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer2.Tick
          PictureBox1.Refresh()     'clear the picture box
          paper.FillEllipse(fillBrush, x, 20, 50, 50)
          x = x + xStep
          
          'test if we are at either edge of pic box
          If x > PictureBox1.Width Then    ' at right edge, so reverse
              xStep = -xStep     ' the step is now -ve, thus reducing x
          End If
  
          If x < 0 Then    ' at left edge, so reverse
              xStep = -xStep     ' the step is now +ve
          End If
      End Sub
  End Class