一、项目效果：

学校宿舍今天搬家，累麻了，突然发现展示处理的也很粗糙，就这样吧嘿嘿~~~

二、核心流程：

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. 读取摄像头视频，画矩形：

import cv2
import time
import numpy as np# 调用摄像头 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)# 画矩形 cv2.rectangle(frame, (x, y), (x + w, y + h), (255, 0, 255), -1)# 显示画面cv2.imshow('frame',frame)# 退出条件if cv2.waitKey(1) & 0xFF == ord('q'):breakcap.release()
cv2.destroyAllWindows()

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

2. 导入mediapipe处理手指坐标

pip install mediapipe

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

mediapipe详细信息：Hands - mediapipe (google.github.io)

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

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

2.1 配置一些基础信息：

import cv2
import time
import numpy as np
import mediapipe as mpmp_drawing = mp.solutions.drawing_utils
mp_drawing_styles = mp.solutions.drawing_styles
mp_hands = mp.solutions.handshands =  mp_hands.Hands(static_image_mode=True,max_num_hands=2,min_detection_confidence=0.5)

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

    frame.flags.writeable = Falseframe = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)# 返回结果results = hands.process(frame)frame.flags.writeable = Trueframe = 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 mpmp_drawing = mp.solutions.drawing_utils
mp_drawing_styles = mp.solutions.drawing_styles
mp_hands = mp.solutions.handshands =  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 = Falseframe = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)# 返回结果results = hands.process(frame)frame.flags.writeable = Trueframe = 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'):breakcap.release()
cv2.destroyAllWindows()

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

3. 位置计算

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

完整代码：

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 = 100L1 = 0
L2 = 0on_square = False
square_color = (0, 255, 0)# 读取一帧帧照片
while True:# 返回frame图片rec,frame = cap.read()# 镜像frame = cv2.flip(frame,1)frame.flags.writeable = Falseframe = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)# 返回结果results = hands.process(frame)frame.flags.writeable = Trueframe = 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())# 记录手指每个点的x y 坐标x_list = []y_list = []for landmark in hand_landmarks.landmark:x_list.append(landmark.x)y_list.append(landmark.y)# 获取食指指尖index_finger_x, index_finger_y = int(x_list[8] * width),int(y_list[8] * height)# 获取中指middle_finger_x,middle_finger_y = int(x_list[12] * width), int(y_list[12] * height)# 计算两指尖距离finger_distance = math.hypot((middle_finger_x - index_finger_x), (middle_finger_y - index_finger_y))# 如果双指合并(两之间距离近)if finger_distance < 60:# X坐标范围 Y坐标范围if (index_finger_x > x and index_finger_x < (x + w)) and (index_finger_y > y and index_finger_y < (y + h)):if on_square == False:L1 = index_finger_x - xL2 = index_finger_y - ysquare_color = (255, 0, 255)on_square = Trueelse:# 双指不合并/分开on_square = Falsesquare_color = (0, 255, 0)# 更新坐标if on_square:x = index_finger_x - L1y = index_finger_y - L2# 图像融合 使方块不遮挡视频图片overlay = frame.copy()cv2.rectangle(frame, (x, y), (x + w, y + h), square_color, -1)frame = cv2.addWeighted(overlay, 0.5, frame, 1 - 0.5, 0)# 显示画面cv2.imshow('frame',frame)# 退出条件if cv2.waitKey(1) & 0xFF == ord('q'):breakcap.release()
cv2.destroyAllWindows()

openCV实践项目：拖拽虚拟方块相关推荐

13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）
目录一:案例鼠标拖拽小方块,小方格跟着移动(桌面图标拖动) 二:取消拖拽文字的行为 1.没取消前: 2.取消后: 三:鼠标拖拽案例优化: 如果有好多个小盒子要做拖拽,一个一个加上面的1,2,3步太麻 ...
opencv实践项目-图像卡通化
目录 1.如何使图像卡通画 2.铅笔素描滤波器 3. 细节增强滤波器 4. 双边过滤器 5. 铅笔边缘滤波器 1.如何使图像卡通画我们通常需要执行两个主要步骤将图像转换为卡通图像:边缘检测和区域平滑 ...
opencv实践项目-人脸检测
目录 1. opencv CascadeClassifier人脸检测步骤 2. CascadeClassifier分类器简介 2.1 从文件中加载级联分类器 2.2 目标检测方法 3. 代码实现 1. ...
opencv实践项目-图片拼接之缝合线算法
目录 1. stitcher_detail执行过程 2. 源码 3. stitching_detail 程序接口介绍 4. 执行 5. 结果图 1. stitcher_detail执行过程 stitc ...
可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...
vue拖动改变模板_可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...
js拖拽俄罗斯方块小游戏（一）
分享一个小游戏的编写历程,内容还是有不少的,我就分开来写了哈.使用的是cocos2d-js引擎,观看此教程要有一点基础会比较容易的,这个小游戏参照了1010!这个游戏了. 这是一个拖拽类游戏,拖拽元素 ...
计算机视觉项目：手势拖拽方块和手势控制音量
项目简介: 电子科技大学中山学院2019级计算机视觉的课程设计语言:Python 开发工具:Pycharm.Python3.9 库:PyQt.OpenCv.mediapipe 功能: 手势拖拽方块: ...
前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...

openCV实践项目：拖拽虚拟方块