Create a Doodle program – Part 1

| February 22, 2012 | 2 Comments

building a doodle program

 

Follow these instructions to create a doodling program in Visual Basic Express 2010.

This is a VB 2010 Express Edition program that lets you to doodle onto the screen. The program starts with a small window that you can draw on by dragging with the mouse. A line is drawn between the point you click on the drawing area and the point where you lift your mouse cursor from the drawing area. If you don’t like what you’ve drawn, click the Clear button and start over.

To create this application, start a new Visual Basic 2010 application – you can download the program from here (http://bit.ly/vbexpressdownload) – and choose Windows Forms Application, type the name Doodler and click Ok. Enlarge the form on the screen to around half again its existing size.

Drag two buttons long the bottom edge of the form. Click one button and Shift + click on the second one and choose Format > Make Same Size > Both and then Format > Align > Tops to align the buttons and size them. Click the PictureBox control and drag a large PictureBox inside the form. The PictureBox should be almost the full width of the form and it should sit just above the buttons.

 

picture box placement

Right click the PictureBox, select Properties and set the BackColor to a light or white color. Double click the form to open the code window for the form. Type this code in the General > Declarations section.

Dim xStart, yStart, xEnd, yEnd As Integer
Dim DrawBitmap As Bitmap
Dim DrawGraphics As Graphics
Dim myPen As New Pen(Color.BlueViolet, 3)

Add this code to the Form_Load event. It creates a new drawing in the PictureBox control which is where the line drawing will take place:

drawbitmap = New Bitmap(PictureBox1.Width, PictureBox1.Height)
drawgraphics = Graphics.FromImage(drawbitmap)
PictureBox1.Image = DrawBitmap

The code that does the actual drawing is this MyLine subroutine which you can type now. You can call this code anytime you need to draw a line. This program records the starting point when you click the mouse button and the ending point when you let it go. This routine draws the actual line between the two points. Regardless of whether the mouse is moved in a curve or a straight line – the routine always draws a straight line.

Private Sub drawMyLine()
PictureBox1.Image = DrawBitmap
DrawGraphics.SmoothingMode = Drawing2D.SmoothingMode.HighQuality
DrawGraphics.DrawLine(myPen, xStart, yStart, xEnd, yEnd)
End Sub

The color and size of the line are set up using the Pen object in the General Declarations area. Here you can change the line color and width by replacing the statement with something like this:

Dim myPen As New Pen(Color.Red, 5)

Add this code to the PictureBox1_MouseDown event.

 

putting in code

 

When added to the MouseDown event this code calculates the value of the mouse pointer’s X and Y coordinates. It uses the Control.MousePosition property to return the absolute screen position for the mouse pointer. From this, the code subtracts the distance in from the left or the top of the screen of the form, the distance between the PictureBox and the form and the number of pixels of space consumed by the edge of the form and the title bar (4 and 31 pixels respectively).

xStart = Control.MousePosition.X - (Me.Left + PictureBox1.Left + 4)
yStart = Control.MousePosition.Y - (Me.Top + PictureBox1.Top + 31)
' to do continuous drawing, enable this line
' drawMyLine()

Type this next code into the PictureBox_MouseUp event handler. As with the MouseDown event this code retrieves the end X and Y coordinates for the end position of the mouse when you have dragged it and you let it go. These coordinates are calculated relative to the PictureBox. This event handler also takes care of drawing the line as it includes a call to the drawMyLine subroutine.

xEnd = Control.MousePosition.X - (Me.Left + PictureBox1.Left + 4)
yEnd = Control.MousePosition.Y - (Me.Top + PictureBox1.Top + 31)
drawMyLine()

The remaining code for the form is for the buttons. In the Button2_Click event type this:

End

 

code

In the Button1_Click event type this code which resets the PictureBox so you can create a new image. This is a repeat of the code from the Form1_Load event:

DrawBitmap = New Bitmap(PictureBox1.Width, PictureBox1.Height)
DrawGraphics = Graphics.FromImage(DrawBitmap)
PictureBox1.Image = DrawBitmap

Once you have created the code, name the buttons Clear and Exit, name the form Doodler and test the application to check that it works. Test the Exit button to make sure that it exits the application. To draw, hold your mouse over the white picture area on the screen and click and drag to draw a line. Every time you click and drag, a new line will be added to the image. To clear the image and start again click the Clear button.

In the next installment I’ll add some extra functionality to the project including a save feature, I’ll improve the continuous drawing and add a tool for selecting a color and line width.

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


continue the tutorial here with part 2.

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