© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 21 - “Cat and Mouse” Painter Application Introducing the Graphics Object and Mouse Events Outline 21.1 Test-Driving the Painter Application 21.2 Constructing the Painter Application 21.3 Using a Graphics Object 21.4 Handling the MouseDown Event 21.5 Handling the MouseUp Event 21.6 Handling the MouseMove Event 21.7 Distinguishing Between Mouse Buttons 21.8 Wrap-Up

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 2 Objectives In this tutorial, you will learn to: –Use mouse events to allow user interaction with an application. –Handle MouseDown, MouseUp, and MouseMove events. –Use the Graphics object to draw circles on the Form. –Determine which mouse button was pressed.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Test-Driving the Painter Application

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Test-Driving the Painter Application Opening the completed Painter application –Double click Painter.sln –Debug > Start

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Test-Driving the Painter Application Figure 21.1 Painter application before drawing.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Test-Driving the Painter Application Figure 21.2 Drawing on the Painter application’s Form. Drawing lines composed of small, colored circles

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Test-Driving the Painter Application Figure 21.3 Drawing a cat and a computer mouse on the Form.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Test-Driving the Painter Application Figure 21.4 Erasing part of the drawing. Erasing by drawing circles that are the same color as the Form ’s background

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Constructing the Painter Application

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Using a Graphics Object Creating a Graphics object –Use the Form ’s CreateGraphics method

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Using a Graphics Object Creating a Graphics object Figure 21.6 Declaring a Graphics reference.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Generating the MouseDown event handler –Select Base Class Events from the Class Name ComboBox –Select MouseDown from the Method Name ComboBox

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Figure 21.7 Creating a MouseDown event handler. Class Name ComboBox with ( Base Class Events ) selected Select MouseDown Method Name ComboBox

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Figure 21.8 MouseDown event handler generated for FrmPainter. MouseEventArgs argument

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Figure 21.9 Adding code to the MouseDown event handler. Using the Graphics object to draw a colored circle

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Drawing on the Form whenever a mouse button is clicked –FillEllipse method Pass a Brush object, which is used to fill the shape with colors –Color of Brush is specified in call to constructor Pass x- and y- coordinates Pass height and width of ellipse

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Figure General ellipse. (x,y) WidthBounding box Height

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Figure Selecting a color by using Intellisense. Type Color followed by a dot (. ) to access Intellisense

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Run the application –Debug > Start –Note that a blue-violet dot is drawn when the mouse button is pressed over the Form

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseDown Event Figure Running the application.

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Adding a second diameter –Declare a second constant that stores the diameter of a smaller circle –A circle with this diameter will be drawn when the mouse button is released

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Figure Declaring a constant for use in the MouseUp event handler. Using a constant to store a circle’s diameter

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Add the event handler –Select Base Class Events –Select MouseUp to generate the MouseUp event handler

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Figure MouseUp empty event handler. MouseUp event handler after commenting and formatting

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Drawing a circle when the user releases a button –MouseUp circles have half the diameter of MouseDown circles

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Figure MouseUp event handler code. Drawing a green circle with half the diameter of the blue-violet circle

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Running the application – Debug > Start –BlueViolet circle is drawn when you press any mouse button and a Green circle is drawn when it is released

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseUp Event Figure Running the application. Pressing the mouse button and releasing it without moving the mouse pointer Pressing mouse button, then releasing after moving pointer Drawing a flower using only MouseUp and MouseDown event handlers

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Add a Boolean variable –Declare and initialize the Boolean variable m_blnShouldPaint –m_blnShouldPaint is True when any mouse button is held down

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Figure Boolean instance variable m_blnShouldPaint is declared and set to False. Declaring and setting an instance variable to control painting

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Altering the MouseDown event handler –Delete the code from the previous version of the application –Add line 60 of Fig to the MouseDown event handler to set m_blnShouldPaint to True when mouse button is pressed

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Figure Setting m_blnShouldPaint to True. Allow drawing when mouse button is pressed

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Altering the MouseUp event handler –Delete the code from the previous version of this application –Add line 69 of Fig to the MouseUp event handler to set m_blnShouldPaint to False

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Figure Setting m_blnShouldPaint to False. Disable drawing when mouse button is released

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Adding the MouseDown event handler –Select Base Class Events from the Class Name ComboBox –Select MouseMove

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Figure MouseMove empty event handler. MouseMove event handler after commenting and formatting

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Adding code to the MouseMove handler –Add lines from Fig to the handler If m_blnShouldPaint is True, draw a BlueViolet circle on the Form If m_blnShouldPaint is False, nothing is drawn

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Handling the MouseMove Event Figure MouseMove event handler draws circles on the Form if a mouse button is held down. Drawing a circle when the mouse moves and a mouse button is pressed

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Add another Boolean variable –m_blnShouldErase determines whether the mouse should act like an eraser

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Figure Boolean instance variable m_blnShouldErase is declared and set to False. Declaring and setting an instance variable to control erasing

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Determining which mouse button was pressed –MouseButtons enumeration Defines constants for 3 mouse buttons: Right, Left, and M iddle –Change MouseDown event handler If left button is pressed m_blnShouldPaint becomes True If right button is pressed m_blnShouldErase becomes True

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Figure Determining which mouse button was pressed. Using the Button property to enable drawing Using the Button property to enable erasing

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Changing the MouseUp event handler –Both Boolean instance variable are set to False –No drawing or erasing allowed when mouse button is not pressed

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Changing the MouseMove event handler –m_blnShouldPaint is True Draw a BlueViolet circle –m_BlnShouldErase is True Draw a circle with the same color as the background –Use the Form ’s BackColor property

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Figure Setting m_blnShouldErase to False when a mouse button is released. Disabling erasing when a mouse button is released

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved Distinguishing Between Mouse Buttons Figure Changing the MouseMove event handler to allow erasing. Drawing circles if right mouse button is pressed while the mouse moves Erasing by drawing circles with the Form ’s background color

Outline © Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 47 Painter.vb (1 of 3)

Outline © Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 48 Painter.vb (2 of 3) Property Button specifies which button was pressed Enumeration MouseButtons specifies constants for the mouse button

Outline © Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 49 Painter.vb (3 of 3) Method FillEllipse used to draw a BlueViolet ellipse Create a Brush with the Form ’s background color