2024年大数据最全openCV实践项目：拖拽虚拟方块_opencv拖动照片框

cv2.rectangle(frame, (x, y), (x + w, y + h), (255, 0, 255), -1)

# 显示画面
cv2.imshow('frame',frame)

# 退出条件
if cv2.waitKey(1) & 0xFF == ord('q'):
    break

cap.release()
cv2.destroyAllWindows()

这是很基础的一步操作，此时我们运行这段代码，摄像头打开，我们会惊讶地看到自己英俊的脸庞，且左上角有个100\*100的紫色矩形。



### 2. 导入mediapipe处理手指坐标

pip install mediapipe

此时可能出现一些问题，比如openCV突然用不了了，没关系，卸载了重新下。


mediapipe详细信息：[Hands - mediapipe (google.github.io)](https://bbs.csdn.net/topics/618545628)")


![](https://img-blog.csdnimg.cn/d9708b9f213b4e32bcfac094b270839b.png)


![](https://img-blog.csdnimg.cn/a36e9e53eb4344b8b2feba8adcf81994.png)


简单来说，它会返回给我们21个手指关键点的坐标，即它在视频画面的位置比例( 0~1 )，我们乘以对应画面的宽高，就能得到手指对应的坐标了。


本次用到食指和中指指尖，也就是8号和12号。



#### 2.1 配置一些基础信息：

import cv2
import time
import numpy as np
import mediapipe as mp

mp_drawing = mp.solutions.drawing_utils
mp_drawing_styles = mp.solutions.drawing_styles
mp_hands = mp.solutions.hands

hands = mp_hands.Hands(
static_image_mode=True,
max_num_hands=2,
min_detection_confidence=0.5)

#### 2.2 在处理每一帧图像时，加入：

frame.flags.writeable = False
frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
# 返回结果
results = hands.process(frame)

frame.flags.writeable = True
frame = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)

当我们在视频流中读取每一帧图片时，将其从BGR转为RGB供给mediapipe生成的hands对象读取，它会返回这张图片中手指关键点的信息，我们只需要继续对其作画，画在每一帧图片上。

# 如果结果不为空
if results.multi_hand_landmarks:

    # 遍历双手(根据读取顺序，一只只手遍历、画画)
    for hand_landmarks in results.multi_hand_landmarks:
        mp_drawing.draw_landmarks(
            frame,
            hand_landmarks,
            mp_hands.HAND_CONNECTIONS,
            mp_drawing_styles.get_default_hand_landmarks_style(),
            mp_drawing_styles.get_default_hand_connections_style())

#### 2.3 至此步骤完整代码

import cv2
import time
import numpy as np
import mediapipe as mp

mp_drawing = mp.solutions.drawing_utils
mp_drawing_styles = mp.solutions.drawing_styles
mp_hands = mp.solutions.hands

hands = mp_hands.Hands(
static_image_mode=True,
max_num_hands=2,
min_detection_confidence=0.5)

调用摄像头 0 默认摄像头

cap = cv2.VideoCapture(0)

方块初始数组

x = 100
y = 100
w = 100
h = 100

读取一帧帧照片

while True:
# 返回frame图片
rec,frame = cap.read()

# 镜像
frame = cv2.flip(frame,1)



frame.flags.writeable = False
frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
# 返回结果
results = hands.process(frame)

frame.flags.writeable = True
frame = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)


# 如果结果不为空
if results.multi_hand_landmarks:

    # 遍历双手(根据读取顺序，一只只手遍历、画画)
    # results.multi_hand_landmarks n双手
    # hand_landmarks 每只手上21个点信息
    for hand_landmarks in results.multi_hand_landmarks:
        mp_drawing.draw_landmarks(
            frame,
            hand_landmarks,
            mp_hands.HAND_CONNECTIONS,
            mp_drawing_styles.get_default_hand_landmarks_style(),
            mp_drawing_styles.get_default_hand_connections_style())


# 画矩形 
cv2.rectangle(frame, (x, y), (x + w, y + h), (255, 0, 255), -1)

# 显示画面
cv2.imshow('frame',frame)

# 退出条件
if cv2.waitKey(1) & 0xFF == ord('q'):
    break

cap.release()
cv2.destroyAllWindows()

此时我们运行看一下还挺有意思的：


![](https://img-blog.csdnimg.cn/d6bcf8ea6ac443aa9bad340432a5ceb8.gif)



### 3. 位置计算


我们这个实验要求拖动方块，那肯定也有不拖动的时候，因此不妨根据上一步获取**食指(8)**和**中指(12)****指尖**的位置，如果这俩离得近，我们就在他与方块重合的时候，根据手指的位置改变方块的坐标。


![](https://img-blog.csdnimg.cn/a36e9e53eb4344b8b2feba8adcf81994.png)




## 完整代码：


![](https://img-blog.csdnimg.cn/9539480d0a8e477eba11ccdb0628c520.png)

import cv2
import time
import math
import numpy as np
import mediapipe as mp

mediapipe配置

mp_drawing = mp.solutions.drawing_utils
mp_drawing_styles = mp.solutions.drawing_styles
mp_hands = mp.solutions.hands
hands = mp_hands.Hands(
static_image_mode=True,
max_num_hands=2,
min_detection_confidence=0.5)

调用摄像头 0 默认摄像头

cap = cv2.VideoCapture(0)

cv2.namedWindow(“frame”, 0)

cv2.resizeWindow(“frame”, 960, 640)

获取画面宽度、高度

width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))

方块初始数组

x = 100
y = 100
w = 100
h = 100

L1 = 0
L2 = 0

on_square = False
square_color = (0, 255, 0)

读取一帧帧照片

while True:
# 返回frame图片
rec,frame = cap.read()

# 镜像
frame = cv2.flip(frame,1)

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

052)]
[外链图片转存中…(img-dHW6KW9W-1714643174052)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取