Create a Doodle Program part – 2

| March 1, 2012 | 2 Comments

doodle program starter

Finished part 1? Now it’s time to add some extra functionality to your Visual Basic Doodler application.

In the previous article in this series we created a simple doodle application so you could draw lines in a picture box. This time I’ll show you how to add extra functions to the project including a save feature, smarter continuous drawing and the ability to select a colour and line width.

Add the functionality

Start by adding these new declarations to the declarations area of the project:

Dim myColour As Color = Color.Blue
Dim myBrush As New Drawing.SolidBrush(Color.Red)
Dim myBrushWidth As Integer
Dim continuousFlag As Boolean

To the end of the Form1_Load event handler, add these two lines:

DrawGraphics.Clear(Color.White)
myBrushWidth = 4

The first line is required to overcome a problem you will have when saving the doodle. Without it, the saved image will have a black background and this line of code solves the problem by ensuring a white background for the image.

Add two radio buttons inside a group box – change RadioButton1′s text property to Continuous and RadioButton2′s text property to Line by Line. Set the checked property for the Line by Line radio button to True as it is the default setting. Add this code to your PictureBox 1_MouseDown event:

If RadioButton1.Checked Then
continuousFlag = True
End If

This is part of the new continuous drawing feature and checks to see if Continuous drawing is selected and sets the continuousFlag variable if it is.

Add a new PictureBox1_MouseMove event and add this code to it:

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

This code handles continuous drawing and it ‘draws’ by painting a series of filled ellipses along the mouse path. The technique is such that the faster the mouse moves, the more distance there is between the ellipses.

In the PictureBox1.MouseUp event, replace the drawMyLine()statement with this code:

If RadioButton1.Checked Then
continuousFlag = False
Else
drawMyLine()
End If

Now we have two drawing options – one is the new continuous line and the other is the original doodler program line drawing tool. The setting of the continuousFlag variable ensures that the continuous line drawn only if the left mouse button is depressed and the mouse is moved. As soon as you let go the left mouse button drawing ceases but will continue as soon as you press the left mouse button and move the mouse again.

Add this as a last line in the Button1_Click event handler:

DrawGraphics.Clear(Color.White)

This is the same code as you added to the Form1_Load event and is needed to ensure the PictureBox has a preset background colour – in this case white – so the colour is saved when you save the doodle. This code manages the new drawing when you press the Clear button.

Add a new button (Button3), and set its Text property to Save. Double click the button and add this code to its Button3_click event handler:

Dim SaveFileDialog1 As New SaveFileDialog()
SaveFileDialog1.Filter = "bmp files (*.bmp)|*.bmp|All files (*.*)|*.*"
If SaveFileDialog1.ShowDialog() = DialogResult.OK Then
PictureBox1.Image.Save(SaveFileDialog1.FileName, System.Drawing.Imaging.ImageFormat.Bmp)
End If

This accesses the Windows Save File dialog to make it easy and quick for you to save your doodle. Where possible, use Windows dialogs instead of coding the solution yourself – the Windows dialogs make projects look great, they save you time and effort and they are familiar to users.

To control colour, add six small buttons to the form. Set each button’s backcolor property to a colour selected from the Web tab and note the colour you used. This is the colour you will set the pen and brush to when the colour is selected.

buttons

For each button set its Text property to nothing at all as you want colour not words here. Use the Format > Align > Make Same Size and Vertical and Horizontal Spacing options to adjust the spacing of the buttons so they look neat. For each button add and this code to its button_click event adjusting the colour name as required:

myPen.Color = Color.Turquoise
myBrush.Color = Color.Turquoise

colors

Finish the form with another GroupBox (set its text property to Line Width) and add three radio buttons. Set the text property of the first to Thin, the second to Medium and the third to Thick. Set the Checked property for the Thin radio button to True. Add this code to the Thin button’s Click event:

myPen.Width = 3
myBrushWidth = 4

Do the same for each of the other buttons – using values of 6 and 7 for the Medium and values of 10 and 12 for the Thick.

Now you have made these changes to your application, save and run it. Click the Continuous button and click and drag to draw in the dialog. Click to change colour and line thickness and test the save routine too.

In the final part of this series I’ll show you how to add some extra functionality and some final touches to the application.

 

 

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 ()

Helen Bradley is a lifestyle journalist specializing in Photoshop, Lightroom, photo editing, web design, Visual Basic and Office software. She writes how to articles, tips and projects and produces how to videos for computer magazines, newspapers and online services in the USA, Australia, Canada and the UK. She writes for PC World, SmallBusinessComputing.com, Practical Photoshop and Digital-Photography-School.com.

Leave a Reply