A more highly interactive graphics program tracks the position of the mouse cursor in a canvas and responds to events such as mouse button presses, cursor movement, and dragging (a combination of the two). For example, to draw an oval, the user might press the mouse button at the oval’s upper left corner, drag the cursor down to oval’s lower right corner, and release the mouse button.
To develop an application that handles mouse events in a canvas, the programmer must use a different design pattern from the one just discussed. In this new pattern, the programmer defines a new subclass of EasyCanvas. The new subclass includes definitions of the methods that will respond to relevant mouse events in the canvas. An instance of this class is then added to the window, as the optional canvas argument to the addCanvas method. When a mouse event occurs in the canvas, the corresponding handler method is triggered. Default handler methods that do nothing are also defined in EasyCanvas, but if the programmer overrides the relevant method in her subclass, the application can then respond to the event appropriately. Here are the types of mouse events and their handler methods.
| EasyCanvas Method | What it does |
| mousePressed(event) | Triggered when the left mouse button is pressed. event.x and event.y hold the mouse cursor’s coordinates. |
| mouseReleased(event) | Triggered when the left mouse button is released. event.x and event.y hold the mouse cursor’s coordinates. |
| mouseMoved(event) | Triggered when the mouse is moved. event.x and event.y hold the mouse cursor’s coordinates. |
| mouseDragged(event) | Triggered when the mouse is moved with left mouse button pressed. event.x and event.y hold the mouse cursor’s coordinates. |
| mouseClicked(event) | Triggered when the left mouse button is clicked. event.x and event.y hold the mouse cursor’s coordinates. |
The application window shown in Figure 25 contains two colored canvases. The user can draw ovals by dragging the mouse in the left canvas, and can show the coordinates of a mouse press in the right canvas. The command button clears the ovals in the left canvas.
The code for this application includes the definition of two new classes called LeftCanvas and RightCanvas. Both are subclasses of EasyCanvas. The __init__ method adds an instance of each canvas class to the window, as shown in the next code segment. Note that the constructor for each new canvas class expects self, the parent window, as an argument. Also, the application window is no longer responsible for maintaining a list of items drawn in a canvas. That’s the responsibility of the new canvas subclass.
def __init__(self):
"""Sets up the window and widgets."""
EasyFrame.__init__(self, title = "Canvas Demo")
# Add the labels
self.addLabel(text = "Canvas 1", row = 0, column = 0)
self.addLabel(text = "Canvas 2", row = 0, column = 1)
# Add the canvases
self.leftCanvas = self.addCanvas(canvas = LeftCanvas(self),
row = 1, column = 0)
rightCanvas = self.addCanvas(canvas = RightCanvas(self),
row = 1, column = 1)
# Add the command button
self.button = self.addButton(text = "Clear Shapes",
row = 2, column = 0,
columnspan = 2,
command = self.clearAll)
# Command button event handler
def clearAll(self):
"""Deletes all shapes from left canvas."""
self.leftCanvas.clearAll()