Mouse as a Paint-Brush

Goal

• Learn to handle mouse events in OpenCV
• You will learn these functions : cv.setMouseCallback()
• 學習如何在OpenCV中處理滑鼠事件
• 你將學習這些函式： cv.setMouseCallback()

Simple Demo

Here, we create a simple application which draws a circle on an image wherever we double-click on it.

First we create a mouse callback function which is executed when a mouse event take place. Mouse event can be anything related to mouse like left-button down, left-button up, left-button double-click etc. It gives us the coordinates (x,y) for every mouse event. With this event and location, we can do whatever we like. To list all available events available, run the following code in Python terminal:

這裡，我們建立了一個簡單的應用，當我們雙擊的時候，在一張圖片上畫一個圓。

首先我們建立一個滑鼠的回撥函式，當一個滑鼠事件發生時該函式執行。滑鼠事件可以是任何和滑鼠相關的事件，比如左鍵按下，左鍵鬆開，雙擊左鍵等等。它為我們提供每個滑鼠事件的座標（x,y）。有了事件和座標，我們可以做任何我們想做的。想要列出所有可用的可用事件，在Python終端執行下列程式碼：

import cv2 as cv
events = [i for i in dir(cv) if "EVENT" in i]
print(events)

Creating mouse callback function has a specific format which is same everywhere. It differs only in what the function does. So our mouse callback function does one thing, it draws a circle where we double-click. So see the code below. Code is self-explanatory from comments :

建立滑鼠回饋函式有一個明確的在各處都一樣的格式。它僅在功能上有所不同。所以我們的滑鼠回饋函式做一件事，它在我們滑鼠雙擊之處畫一個圓。看看下面的程式碼。程式碼從註釋就是一目瞭然的：

import numpy as np
import cv2 as cv
#mouse callback function
def draw_circle(event,x,y,flags,param);
	if event == cv.EVENT_LBUTTONBLCLK:
		CV.circle(img,(x,y),100,(255,0,0),-1)
#Create a black image,a window and bind the function to window
img = np.zeros((512,512,3),np.uint8)
cv.namedWindow("image")
cv.setMouseCallback("image",draw_circle)
while(1):
	cv.imshow("image",img)
	if cv.waitKey(20)&0xFF ==27；
		break
	cv.destroyAllWindows()
 

More Advanced Demo

Now we go for a much better application. In this, we draw either rectangles or circles (depending on the mode we select) by dragging the mouse like we do in Paint application. So our mouse callback function has two parts, one to draw rectangle and other to draw the circles. This specific example will be really helpful in creating and understanding some interactive applications like object tracking, image segmentation etc.

現在我們尋找一個更好的應用。在這，我們靠拖拽滑鼠來畫矩形或者圓（取決於我們選擇的模式），就像我們在繪畫應用中一樣。所以我們的滑鼠回撥函式有兩部分，一部分畫矩形，另一部分畫圓圈。這個明確的應用將對建立和理解一些互動式應用非常有幫助，比如目標跟蹤 ，影象分割等等。

import numpy as np
import cv2 as cv

drawing = False#true if mouse is pressed
mode = True #if True,draw rectangle.Press "m" to toggle to curve
ix,iy = -1,-1

# mouse callback function
def draw_circle(event,x,y,flags,param):
	global ix,iy,drawing,mode
	
	if event == cv.EVENT_LBUTTONDOWM:
		drawing = True
		ix,iy =x,y
		
	elif event == cv.EVENT_MOUSEMOVE:
		if drawing == True:
			if mode == True:
				cv.rectangle(img,(ix,iy),(x,y),(0,0,255),-1)
			else:
				cv.circle(img,(x,y),5,(0,0,255),-1)
	elif event == cv.EVENT_LBUTTONUP:
		drawing == False
		if mode == True：
			cv.rectangle(img,(ix,iy),(x,y),(0,255,0),-1)
		else:
			cv.circle(img,(x,y),5,(0,0,255),-1)

Next we have to bind this mouse callback function to OpenCV window. In the main loop, we should set a keyboard binding for key ‘m’ to toggle between rectangle and circle.

接下來我們將繫結滑鼠回撥函式到OpenCV的視窗。在主迴圈中，我們應該設定繫結一個健”m“來切換矩形和圓。

img = np.zeros((512,512,3),np.uint8)
cv.nameWindow("image")
cv.setMouseCallback("image",draw_circle)

while(1):
	cv.imshow("image",img)
	k = cv.waitKey(1)&0xFF
	if k == ord("m"):
		mode = not mode
	elif k == 27
		break

cv.destroyAllWindows()

Additional Resources

Exercises

1. In our last example, we drew filled rectangle. You modify the code to draw an unfilled rectangle.

在我們的上個例子中，我們畫填滿的矩形。你修改程式碼來畫一個沒有填滿的矩形。