Using Picture Box

We start our project by adding picture box into our form, to make it resizable and become a drawing canvas. Click here to download the code

1. Open a new Standard Exe Project
2. Change the Name Property of Form1 into frmMap, then the Caption property into My Canvas.
3. Drag and drop Picture Box from the Toolbox into the form frmMap.
4. Change the Name property into picMap
5. Change the AutoRedraw property to True. This will automatically redraw your picture again after other form goes over your picture box.
6. Change the AutoSize Property to True so that the picture box will be also be resize when we change the size of the form. Type this code in the Form_Resize:
   

Private Sub Form_Resize()

picMap.Width = Me.Width - 120
picMap.Height = Me.Height - 400

End Sub

The number 120 and 400 is arbitrary to make the boundary look nice. You can experiment with other numbers to know how it looks like.

7. Change the ScaleMode property of the Picture box to Pixel
8. Change the Background property of the picture box to white (select from the palette)
9. In the declaration section, type this code:

   Option Explicit
   Public myColor As Long

   Private num As Long
   Private X1 As Single
   Private Y1 As Single
   Private drawFlag As Boolean
   

10. Type the following code in picMap.Mouse_Down, Mouse_Up and Mouse_Move events procedures:
    

Private Sub picMap_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

If Button = vbRightButton Then

picMap.Cls

Else

drawFlag = True
picMap.DrawWidth = 5
picMap.PSet (X, Y), myColor

End If

End Sub

Private Sub picMap_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)

If drawFlag Then

picMap.Line -(X, Y), myColor

End If

End Sub

Private Sub picMap_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)

drawFlag = False

End Sub

PSet is to draw a point; Line is to draw a line from (X1, Y1) to (X2, Y2). If we do not specify the first point, it will use the last point as the first point. Cls is to clear screen (when you do right click on the picture box). The DrawWidth property is to set how big you line or point. The private variable drawFlag is used to switch between drawing and not drawing. When your mouse move and you press the mouse down in the picture box, the line will be drawn. When your mouse is up, the drawFlag is set False, then when your mouse move, the program will not draw anything. The public variable myColor will be set later.

11. Run the program and try to draw many shapes. Resize the form and see what happen. Does the shape you draw change as you resize the form?
    

<Previous lesson | Table of Content | Content of this Chapter | Next lesson>