Tutorial 21 - “Cat and Mouse” Painter Application Introducing the Graphics Object and Mouse Events

1. Tutorial 21 - “Cat and Mouse” Painter ApplicationIntroducing the Graphics Object and Mouse Events Outline21.1 Test-Driving the Painter Application21.2 Constructing the Painter Application21.3 Using a Graphics Object21.4 Handling the MouseDown Event21.5 Handling the MouseUp Event21.6 Handling the MouseMove Event21.7 Distinguishing Between Mouse Buttons21.8 Wrap-Up

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.

3. 21.1 Test-Driving the Painter Application

4. 21.1 Test-Driving the Painter Application • Opening the completed Painter application • Double click Painter.sln • Debug > Start

5. 21.1 Test-Driving the Painter Application Figure 21.1　Painter application before drawing.

6. Drawing lines composed of small, colored circles 21.1 Test-Driving the Painter Application Figure 21.2　Drawing on the Painter application’s Form.

7. 21.1 Test-Driving the Painter Application Figure 21.3　Drawing a cat and a computer mouse on the Form.

8. Erasing by drawing circles that are the same color as theForm’sbackground 21.1 Test-Driving the Painter Application Figure 21.4　Erasing part of the drawing.

9. 21.2 Constructing the Painter Application

10. 21.3 Using a Graphics Object • Creating a Graphics object • Use the Form’s CreateGraphics method

11. Creating a Graphics object 21.3 Using a Graphics Object Figure 21.6　Declaring a Graphics reference.

12. 21.4 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

13. Class NameComboBoxwith (BaseClass Events) selected Select MouseDown Method NameComboBox 21.4 Handling the MouseDown Event Figure 21.7　Creating a MouseDown event handler.

14. MouseEventArgsargument 21.4 Handling the MouseDown Event Figure 21.8　MouseDown event handler generated for FrmPainter.

15. Using the Graphics object to draw a colored circle 21.4 Handling the MouseDown Event Figure 21.9　Adding code to the MouseDown event handler.

16. 21.4 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

17. Width Height Bounding box 21.4 Handling the MouseDown Event Figure 21.10　General ellipse. (x,y)

18. Type Color followed by a dot (.) to accessIntellisense 21.4 Handling the MouseDown Event Figure 21.11　Selecting a color by using Intellisense.

19. 21.4 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

20. 21.4 Handling the MouseDown Event Figure 21.12　Running the application.

21. 21.5 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

22. Using a constant to store a circle’s diameter 21.5 Handling the MouseUp Event Figure 21.13　Declaring a constant for use in the MouseUp event handler.

23. 21.5 Handling the MouseUp Event • Add the event handler • Select Base Class Events • Select MouseUp to generate the MouseUp event handler

24. MouseUp event handler after commenting and formatting 21.5 Handling the MouseUp Event Figure 21.14　MouseUp empty event handler.

25. 21.5 Handling the MouseUp Event • Drawing a circle when the user releases a button • MouseUp circles have half the diameter of MouseDown circles

26. Drawing a green circle with half the diameter of the blue-violet circle 21.5 Handling the MouseUp Event Figure 21.15　MouseUp event handler code.

27. 21.5 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

28. Drawing a flower using only MouseUp and MouseDown event handlers Pressing mouse button, then releasing after moving pointer Pressing the mouse button and releasing it without moving the mouse pointer 21.5 Handling the MouseUp Event Figure 21.16　Running the application.

29. 21.6 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

30. Declaring and setting an instance variable to control painting 21.6 Handling the MouseMove Event Figure 21.17　Boolean instance variable m_blnShouldPaint is declared and set to False.

31. 21.6 Handling the MouseMove Event • Altering the MouseDown event handler • Delete the code from the previous version of the application • Add line 60 of Fig. 21.18 to theMouseDownevent handler to setm_blnShouldPaint to True when mouse button is pressed

32. Allow drawing when mouse button is pressed 21.6 Handling the MouseMove Event Figure 21.18　Setting m_blnShouldPaint to True.

33. 21.6 Handling the MouseMove Event • Altering the MouseUp event handler • Delete the code from the previous version of this application • Add line 69 of Fig. 21.19 to theMouseUpevent handler to setm_blnShouldPaint to False

34. Disable drawing when mouse button is released 21.6 Handling the MouseMove Event Figure 21.19　Setting m_blnShouldPaint to False.

35. 21.6 Handling the MouseMove Event • Adding the MouseDown event handler • Select Base Class Events from the Class Name ComboBox • Select MouseMove

36. MouseMove event handler after commenting and formatting 21.6 Handling the MouseMove Event Figure 21.20　MouseMove empty event handler.

37. 21.6 Handling the MouseMove Event • Adding code to the MouseMove handler • Add lines 78-82 from Fig 21.21 to the handler • If m_blnShouldPaint is True, draw a BlueViolet circle on the Form • If m_blnShouldPaint is False, nothing is drawn

38. Drawing a circle when the mouse moves and a mouse button is pressed 21.6 Handling the MouseMove Event Figure 21.21　MouseMove event handler draws circles on the Form if a mouse button is held down.

39. 21.7 Distinguishing Between Mouse Buttons • Add another Boolean variable • m_blnShouldErase determines whether the mouse should act like an eraser

40. Declaring and setting an instance variable to control erasing 21.7 Distinguishing Between Mouse Buttons Figure 21.22　Boolean instance variable m_blnShouldErase is declared and set to False.

41. 21.7 Distinguishing Between Mouse Buttons • Determining which mouse button was pressed • MouseButtons enumeration • Defines constants for 3 mouse buttons: Right, Left, and Middle • Change MouseDown event handler • If left button is pressed m_blnShouldPaint becomes True • If right button is pressed m_blnShouldErase becomes True

42. Using the Button property to enable drawing Using the Button property to enable erasing 21.7 Distinguishing Between Mouse Buttons Figure 21.23　Determining which mouse button was pressed.

43. 21.7 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

44. 21.7 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

45. Disabling erasing when a mouse button is released 21.7 Distinguishing Between Mouse Buttons Figure 21.24　Setting m_blnShouldErase to False when a mouse button is released.

46. Drawing circles if right mouse button is pressed while the mouse moves Erasing by drawing circles with the Form’s background color 21.7 Distinguishing Between Mouse Buttons Figure 21.25　Changing the MouseMove event handler to allow erasing.

47. Painter.vb(1 of 3)

48. Property Button specifies which button was pressed Enumeration MouseButtons specifies constants for the mouse button Painter.vb(2 of 3)

49. Method FillEllipse used to draw a BlueViolet ellipse Create a Brush with the Form’s background color Painter.vb(3 of 3)