Create a Doodle Program – part 3

| March 1, 2012 | 0 Comments

final design

In this final part of the series on creating a doodle application in Visual Basic I’ll show you how to add functionality in the form of ellipses and rectangles which can be created as filled or unfilled shapes. I’ll also show you how to add separate line colour and fill colour options and a two extra colours: black and white.

If you missed them, here are links to Part 1 and Part 2.

To add the new functionality to the doodler, add two new buttons which will become Button10 and Button11 for the black and white colour buttons – set their BackColor properties to black and white respectively and remove the text from the buttons’ Text properties.

Extend the Line Style GroupBox to fit two new RadioButtons; RadioButton6 – set its Text property to Rectangle and RadioButton7 – set its Text property to Ellipse.

Add a new GroupBox and place in it RadioButton8 – set its Text property to Line Colour and its Checked property to True and RadioButton9 – set its Text property to Fill Colour. Set the GroupBox text property to Line/Fill.

Alongside the Line Colour RadioButton add Button12 – set its BackColor to MediumSlateBlue and alongside the Fill Colour add Button13 – set its BackColor to Crimson. Remove the text from both buttons’ Text properties and set their FlatStyle to read Popup.

Add Button14 alongside the other color buttons, remove its Text property – it will become the new No fill button.

doodle program form

Create your NoFill image

In your graphics software create an image the same size as your buttons – mine are 28 x 26 pixels in size. Set up the image with a white background and a red line diagonally across it. Save it calling it nofill.bmp – you can pay and download mine here.

no fill

In VB, double click My Project in the Solution Explorer and click the Resources category. From the Add Resource dropdown list select Add Existing File and add your nofill.bmp image. Make sure it is called noFill in the Solution Explorer. Set the Image property for Button14 to the noFill.bmp image.


Creating the code

The code changes begin with replacing some of the existing Declaration statements and adding some new ones:


Dim xStart, yStart, xEnd, yEnd, recWidth, recHeight As Integer
Dim myColour As Color
Dim myContinuousBrush As New Drawing.SolidBrush(Color.MediumSlateBlue)
Dim continuousFlag, shapeFill As Boolean

Add two new procedures for drawing the rectangle and drawing the ellipse:

Private Sub drawMyRectangle()
PictureBox1.Image = DrawBitmap
DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.None
recWidth = Math.Abs(xStart - xEnd)
recHeight = Math.Abs(yStart - yEnd)
If xStart > xEnd Then xStart = xEnd
If yStart > yEnd Then yStart = yEnd
If shapeFill = True Then
DrawGraphics.FillRectangle(myBrush, xStart, yStart, recWidth, recHeight)
End If
DrawGraphics.DrawRectangle(myPen, xStart, yStart, recWidth, recHeight)
End Sub


Private Sub drawMyEllipse()
PictureBox1.Image = DrawBitmap
DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
recWidth = Math.Abs(xStart - xEnd)
recHeight = Math.Abs(yStart - yEnd)
If xStart > xEnd Then xStart = xEnd
If yStart > yEnd Then yStart = yEnd
If shapeFill = True Then
DrawGraphics.FillEllipse(myBrush, New Rectangle(xStart, yStart, recWidth, recHeight))
End If
DrawGraphics.DrawEllipse(myPen, New Rectangle(xStart, yStart, recWidth, recHeight))
End Sub


When a rectangle or ellipse is drawn, the filled version is drawn first and then the unfilled version is drawn on top so the outside line shows. The rectangle draws between the place the mouse is pressed down and where it is lifted up and the ellipse is drawn inside a rectangle described in the same way. Both routines include a calculation that ensures the correct coordinates are used for the top left corner of the rectangle regardless of how you draw it.

Add this line to the Form1_Load event – it keeps track of whether you’re drawing a filled or unfilled shape:


shapeFill = True


Replace the If statement in the PictureBox1_MouseMove event with this code:


If continuousFlag Then
myContinuousBrush.Color = myPen.Color
DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.None
DrawGraphics.FillEllipse(myContinuousBrush, e.X, e.Y, myBrushWidth, myBrushWidth)
PictureBox1.Image = DrawBitmap
End If


The new features require us to make a distinction between the fill and the line colour so we need to ensure the continuous line is drawn using the line colour. Because the continuous line is really a series of small ellipses a new brush is required to manage its colour and to keep it separate from the fill colour.

Edit the PictureBox1_MouseUp code to include these new options to manage drawing the rectangles and ellipses:


If RadioButton1.Checked Then
continuousFlag = False
ElseIf RadioButton2.Checked Then
ElseIf RadioButton6.Checked Then
ElseIf RadioButton7.Checked Then
End If


Add this new procedure to handle the colour selectors:


Sub changeLineColour(ByVal myColour As Color)
If RadioButton8.Checked Then
myPen.Color = myColour
Button12.BackColor = myColour
myBrush.Color = myColour
Button13.Image = Nothing
Button13.BackColor = myColour
shapeFill = True
End If
End Sub


Because each colour button now requires so much code it is better to remove the code to a separate procedure and call it from each button. This code checks to see which of the Line Colour or Fill Colour buttons is selected and it sets either the pen or the brush colour as required and sets the appropriate colour button too.

For the click event for each of Button4, Button5, Button6, Button7, Button8, Button9, Button10 and Button11 remove any existing code and replace it with this code:


myColour = Color.Orange


Change the colour in the first line to the colour of the button to which the code is attached. So, for the white colour button the first line would read myColour=color.white and so on.

To the Button14_click event  (the no fill button), add this code:


shapeFill = False
Button13.BackColor = Color.White
Button13.Image = My.Resources.noFill


To the Button13_click event add this code:


RadioButton9.Checked = True


To the Button12_click event add this code:


RadioButton8.Checked = True


To the RadioButton8_CheckedChange event add this code:


Button14.Enabled = False


To the RadioButton9_CheckedChange event add this code:


Button14.Enabled = True


When you are done, save the project and run it. You should now be able to select a line and a fill colour and draw rectangles and ellipses to your Doodle application.

final design

Want to save yourself some typing? Pay 1.99$ and download the all the code for all three parts  as three separate text files as well as the entire doodle program, code and resources itself!

Add to Cart   View Cart

Tags: , , , , , , , , , , , , , , ,

Category: Visual Basic

About the Author ()

Leave a Reply