OpenCV を使ってお絵かきアプリを作る方法

0.最初に

今回作るものがどういう感じで動くのか見てみたい方は、こちら(youtubeの動画)からどうぞ。

1.実装

opencv.py

import cv2
import numpy as np

drawing = False 
color = (255,255,255)
ix,iy = 0,0

def nothing(x):
    pass

def draw_circle(event,x,y,flags,param):
    global ix,iy,drawing,color

    b = cv2.getTrackbarPos('B','image')
    g = cv2.getTrackbarPos('G','image')
    r = cv2.getTrackbarPos('R','image')
    s = cv2.getTrackbarPos('Size','image')
    i = cv2.getTrackbarPos(switch,'image')

    if event == cv2.EVENT_LBUTTONDOWN:
        drawing = True
        ix,iy = x,y

    elif event == cv2.EVENT_MOUSEMOVE:
        if i == 1:
            b,g,r = 0,0,0
        if drawing == True:
            cv2.circle(img,(x,y),s,(b,g,r),-1)

    elif event == cv2.EVENT_LBUTTONUP:
        if i == 1:
            b,g,r = 0,0,0
        drawing = False
        cv2.circle(img,(x,y),s,(b,g,r),-1)

img = np.full((800,800,3),255,np.uint8)
cv2.namedWindow('image')

cv2.createTrackbar('B','image',0,255,nothing)
cv2.createTrackbar('G','image',0,255,nothing)
cv2.createTrackbar('R','image',0,255,nothing)
cv2.createTrackbar('Size', 'image',1,30,nothing)
cv2.setMouseCallback('image',draw_circle)
switch = '0 : OFF \n1 : ON'
cv2.createTrackbar(switch, 'image',0,1,nothing)

while True:  
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break
    cv2.imshow('image',img)
cv2.destroyAllWindows()

ここでは、色を変えるためのトラックバー3つとペンのサイズを変えるためのトラックバーを1つ、消しゴムとペンに切り替えるためのトラックバー1つを作っています。nothing()はコールバック関数でその名の通り何もしません。なのでマウスが押されたときに色のトラックバーの値を取得し、その位置に円を描きます。これが連続的に続くことによって線が描かれているように見えます。マウスが離れたらその位置まで円を描いて終了です。線がマウスに追いつかなかったり、マウスを速く動かしすぎると円が見えてしまいますがそこまで気になりませんでした。また、消しゴムは上から黒で塗りつぶしているだけです。

最後に

今回作ったものはYoutubeでも解説しているのでそちらも良かったらご覧ください。質問、アドバイスなどがございましたらぜひコメントしてください。