OpenCV Python ŌĆō How to draw a rectangle using Mouse Events?

In computer vision, OpenCV is a widely used tool for image processing. Python is a popular programming language known for its simplicity and ease of use. Combining Python and OpenCV can provide powerful image processing capabilities. In this article, we will learn how to draw a rectangle on a window using mouse events with OpenCV and Python.

Prerequisites

Before we start, make sure you have the following software installed on your system:

• Python 3
• OpenCV 2 or higher

You can install OpenCV using pip command:

pip install opencv-python

Once you have installed OpenCV, you can verify the installation by opening a python terminal and typing the following command:

import cv2
print(cv2.__version__)

This should print the version of OpenCV installed on your machine.

Drawing Rectangle using Mouse Events in OpenCV Python

To draw a rectangle on a window using mouse events with OpenCV and Python, we need to follow the steps given below:

1. Create a window
2. Define a callback function for mouse events
3. Register the callback function to the window
4. Wait for the user to draw a rectangle using mouse events
5. Destroy the window

Step 1: Create a window

First, we need to create a window to display the image. We can do this using the cv2.namedWindow() function.

import cv2

# Create a window
cv2.namedWindow("Window")

Step 2: Define a callback function for mouse events

Next, we need to define a callback function that will be called whenever a mouse event occurs on the window. Our callback function will be responsible for drawing a rectangle on the window.

import cv2

# Create a window
cv2.namedWindow("Window")

# Define a callback function for mouse events
def draw_rectangle(event, x, y, flags, params):
    global pt1, pt2, top_left_clicked, bottom_right_clicked

    if event == cv2.EVENT_LBUTTONDOWN:
        # Reset the rectangle
        if top_left_clicked and bottom_right_clicked:
            pt1 = (0, 0)
            pt2 = (0, 0)
            top_left_clicked = False
            bottom_right_clicked = False

        # Set the top left of the rectangle
        if not top_left_clicked:
            pt1 = (x, y)
            top_left_clicked = True

        # Set the bottom right of the rectangle
        elif not bottom_right_clicked:
            pt2 = (x, y)
            bottom_right_clicked = True

In the above code, we defined a function draw_rectangle() that takes five parameters event, x, y, flags, and params. The event parameter represents the mouse event that occurred, and the x and y parameters represent the coordinates of the mouse cursor. The flags parameter contains additional information about the mouse event, and the params parameter can be used to pass additional data to the callback function.

Inside the draw_rectangle() function, we defined four variables pt1, pt2, top_left_clicked, and bottom_right_clicked. The pt1 and pt2 variables represent the top-left and bottom-right points of the rectangle, respectively. The top_left_clicked and bottom_right_clicked variables represent whether the top-left and bottom-right points of the rectangle have been clicked or not.

If the user clicks the left mouse button (cv2.EVENT_LBUTTONDOWN), the draw_rectangle() function checks the top_left_clicked and bottom_right_clicked variables. If both variables are True, it means the user has already drawn a rectangle, and the function resets the rectangle by setting pt1 and pt2 to (0, 0) and top_left_clicked and bottom_right_clicked to False.

If top_left_clicked is False, it means the user is setting the top-left point of the rectangle, and the function sets pt1 to the current mouse cursor position and top_left_clicked to True.

If top_left_clicked is True and bottom_right_clicked is False, it means the user is setting the bottom-right point of the rectangle, and the function sets pt2 to the current mouse cursor position and bottom_right_clicked to True.

Step 3: Register the callback function to the window

After defining the callback function, we need to register it with the window. We can do this using the cv2.setMouseCallback() function.

import cv2

# Create a window
cv2.namedWindow("Window")

# Define a callback function for mouse events
def draw_rectangle(event, x, y, flags, params):
    global pt1, pt2, top_left_clicked, bottom_right_clicked

    if event == cv2.EVENT_LBUTTONDOWN:
        # Reset the rectangle
        if top_left_clicked and bottom_right_clicked:
            pt1 = (0, 0)
            pt2 = (0, 0)
            top_left_clicked = False
            bottom_right_clicked = False

        # Set the top left of the rectangle
        if not top_left_clicked:
            pt1 = (x, y)
            top_left_clicked = True

        # Set the bottom right of the rectangle
        elif not bottom_right_clicked:
            pt2 = (x, y)
            bottom_right_clicked = True

# Register the callback function to the window
cv2.setMouseCallback("Window", draw_rectangle)

In the above code, we used the cv2.setMouseCallback() function to register the draw_rectangle() function to the window "Window". This function takes two parameters: the name of the window and the callback function.

Step 4: Wait for the user to draw a rectangle using mouse events

After registering the mouse callback function, we need to implement a loop that will wait for the user to draw a rectangle using mouse events.

import cv2

# Create a window
cv2.namedWindow("Window")

# Define a callback function for mouse events
def draw_rectangle(event, x, y, flags, params):
    global pt1, pt2, top_left_clicked, bottom_right_clicked

    if event == cv2.EVENT_LBUTTONDOWN:
        # Reset the rectangle
        if top_left_clicked and bottom_right_clicked:
            pt1 = (0, 0)
            pt2 = (0, 0)
            top_left_clicked = False
            bottom_right_clicked = False

        # Set the top left of the rectangle
        if not top_left_clicked:
            pt1 = (x, y)
            top_left_clicked = True

        # Set the bottom right of the rectangle
        elif not bottom_right_clicked:
            pt2 = (x, y)
            bottom_right_clicked = True

# Register the callback function to the window
cv2.setMouseCallback("Window", draw_rectangle)

# Initialize the top left and bottom right points to (0, 0)
pt1 = (0, 0)
pt2 = (0, 0)

# Initialize the top-left-clicked and bottom-right-clicked flags
top_left_clicked = False
bottom_right_clicked = False

# Loop until the user draws a rectangle and presses the 'q' key
while True:
    # Display the image and wait for a keypress
    img = cv2.imread("test_image.jpg")
    cv2.imshow("Window", img)
    key = cv2.waitKey(1)

    # Exit the loop if the user presses the 'q' key
    if key == ord("q"):
        break

# Draw the rectangle on the image
img_rect = img.copy()
cv2.rectangle(img_rect, pt1, pt2, (0, 255, 0), thickness=2)
cv2.imshow("Window", img_rect)
cv2.waitKey(0)

# Destroy the window
cv2.destroyAllWindows()

In the above code, we added a while loop that runs until the user draws a rectangle and presses the ‘q’ key. Inside the loop, we read an image from a file using cv2.imread() and display it on the window using cv2.imshow(). We also wait for a keypress using cv2.waitKey() and exit the loop if the user presses the ‘q’ key.

After the loop, we draw the rectangle on the image using the cv2.rectangle() function and show it on the window. Finally, we wait for the user to press a key using cv2.waitKey(0) and destroy the window using cv2.destroyAllWindows().

Conclusion

Drawing a rectangle on a window using mouse events with OpenCV and Python is a simple and straightforward process. We can create a window, define a callback function for mouse events, register the callback function to the window, wait for the user to draw a rectangle using mouse events, and destroy the window. By using OpenCV and Python, we can create powerful image processing applications with ease.