openCV實踐專案:拖拽虛擬方塊

語言: CN / TW / HK

一、專案效果:

image.png 影片連結: https://img-blog.csdnimg.cn/27234904f0284e498aa9390a8006383d.gif

完整程式碼: https://mianbaoduo.com/o/bread/Yp6cmJxp

二、核心流程:

1、openCV讀取影片流、在每一幀圖片上畫一個矩形。

2、使用mediapipe獲取手指關鍵點座標。

3、根據手指座標位置和矩形的座標位置,判斷手指點是否在矩形上,如果在則矩形跟隨手指移動。

三、程式碼流程:

環境準備:

python: 3.8.8 opencv: 4.2.0.32 mediapipe: 0.8.10.1 注:

1、opencv版本過高或過低可能出現一些如攝像頭打不開、閃退等問題,python版本影響opencv可選擇的版本。

2、pip install mediapipe 後可能導致openCV無法正常使用,卸了重新下載,習慣了就好。

1. 讀取攝像頭影片,畫矩形:

image.png

這是很基礎的一步操作,此時我們執行這段程式碼,攝像頭開啟,我們會驚訝地看到自己英俊的臉龐,且左上角有個100*100的紫色矩形。

2. 匯入mediapipe處理手指座標

pip install mediapipe

此時可能出現一些問題,比如openCV突然用不了了,沒關係,解除安裝了重新下。

mediapipe詳細資訊:Hands - mediapipe (google.github.io)

image.png

image.png 簡單來說,它會返回給我們21個手指關鍵點的座標,即它在影片畫面的位置比例( 0~1 ),我們乘以對應畫面的寬高,就能得到手指對應的座標了。

本次用到食指和中指指尖,也就是8號和12號。

2.1 配置一些基礎資訊:

image.png

2.2 在處理每一幀影象時,加入:

image.png 當我們在影片流中讀取每一幀圖片時,將其從BGR轉為RGB供給mediapipe生成的hands物件讀取,它會返回這張圖片中手指關鍵點的資訊,我們只需要繼續對其作畫,畫在每一幀圖片上。

image.png

2.3 至此步驟完整程式碼

image.png

image.png

image.png 此時我們執行看一下還挺有意思的: 影片連結: https://img-blog.csdnimg.cn/d6bcf8ea6ac443aa9bad340432a5ceb8.gif

3. 位置計算

我們這個實驗要求拖動方塊,那肯定也有不拖動的時候,因此不妨根據上一步獲取食指(8)中指(12) 指尖的位置,如果這倆離得近,我們就在他與方塊重合的時候,根據手指的位置改變方塊的座標。

image.png

完整程式碼:

image.png