Drawing Shapes on an Image with a Mouse

In Photoshop, we crop an image by drawing a shape on it. We can’t always rely on drawing shapes automatically using code. We may want to work on the image manually to add the personal touch. In those cases, we can use our mouse to draw shapes. OpenCV provides us the feature to detect various mouse operations, such as left-click and right-click.

We start by declaring variables and reading the image. Then we need to create the ttemp image that we’ll use later for clearing the image after drawing shapes on it.

Create a temp image

To create a temp image, we need to use the clone() function. We use the namedWindow() function to create a window. We need to provide only one parameter to this function. It’s the name that we want to give to that window.

cv::Mat temp = image.clone();
cv::namedWindow("Window");

Function to draw rectangle

First, we need to detect touch on a mouse. We use the setMouseCallback() function, to which we need to pass two parameters:

• The window in which we want to detect mouse events
• The function where it’ll pass the event values

This function is used to call a certain function if there are any mouse events.

cv::setMouseCallback("Window", drawRectangle);

The statement above will call the drawRectangle() function if any mouse event occurs. Since this function is called using the setMouseCallback() function, it records the mouse event type, event flag, and x- and y-coordinates of the point. These parameters are passed to the drawRectangle() function. *userdata is also passed to the function, but we don’t need that data in this chapter.

So, we’ll use the following parameters:

• action is the mouse event
• x is the x-coordinate of the mouse point during the mouse event
• y is the y-coordinate of the mouse point during the mouse event

Similar to any other photo editing tool, we draw the rectangle by pressing at one point and dragging the mouse to another point. Our first point is where we press the mouse button, and the second is the point where we release the mouse. We’ll use this concept to draw a rectangle using the mouse.

We initially check the event when the left mouse button is pressed down. This event gives us the top left point of the rectangle. We compare the action with EVENT_LBUTTONDOWN, which is true if the left button is pressed down. Then we’ll set the point tl to the x and y coordinate.

void drawRectangle(int action, int x, int y, int flags, void *userdata)
{
  if(action == cv::EVENT_LBUTTONDOWN)
  {
    tl = cv::Point(x,y);
  }
}

Then we check the event when the left mouse button is released. This event gives us the bottom right point of the rectangle. We compare the action with EVENT_LBUTTONUP, which is true if the left button is pressed down. Then we set the point br to the x and y coordinate.

Next, we draw a rectangle using the rectangle() function of the OpenCV library. We have five parameters inside this function, where:

• image is the original image.
• tl is the top left corner point of where we want to draw the rectangle.
• br is the bottom right corner point of where we want to draw the rectangle.
• Scalar(0,255,0) gives a green color to the rectangle. It can be changed to another color with a different color code.
• 2 is the thickness of the rectangle. We can use the value of -1 to fill the rectangle with the same color.