一、项目效果：

视频链接： http://img-blog.csdnimg.cn/27234904f0284e498aa9390a8006383d.gif

完整代码： http://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. 读取摄像头视频，画矩形：

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

2. 导入mediapipe处理手指坐标

pip install mediapipe

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

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

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

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

2.1 配置一些基础信息：

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

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

2.3 至此步骤完整代码

此时我们运行看一下还挺有意思的： 视频链接： http://img-blog.csdnimg.cn/d6bcf8ea6ac443aa9bad340432a5ceb8.gif

3. 位置计算

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

完整代码：