虚拟拖拽系统--详细注释解析恩培作品2

感谢恩培大佬对项目进行了完整的实现，并将代码进行开源，供大家交流学习。

一、项目简介

本项目最终达到的效果为手势控制虚拟拖拽方块。如下所示

项目用python实现，调用opencv，mediapipe，ctypes等库，由以下四个步骤组成：

1、使用OpenCV读取摄像头视频流；

2、识别手掌关键点像素坐标；

3、根据食指和中指指尖的坐标，利用勾股定理计算距离，当距离较小且都落在矩形内，则触发拖拽（矩形变色）；

4、矩形跟着手指动；

5、两指放开，则矩形停止移动

二、代码详解

# 导入OpenCV,用于图像处理，图像显示
import cv2
# 导入mediapipe，手势识别
import mediapipe as mp

# 导入其他依赖包
import time
import math


# 方块管理类
class SquareManager:
    def __init__(self, rect_width):

        # 可自定义方块长度
        self.rect_width = rect_width

        # 方块数目，用列表储存方块的x、y值
        self.square_count = 0
        self.rect_left_x_list = []
        self.rect_left_y_list = []
        self.alpha_list = []

        # 中指与矩形左上角点的距离
        self.L1 = 0
        self.L2 = 0

        # 激活移动模式，用于储存状态，表示方块是否可以移动
        self.drag_active = False

        # 激活的方块ID，表示哪一块方块目前处于可以移动的状态
        self.active_index = -1

    # 创建一个方块，将x、y值加入list里，增加方块计数器的数目
    def create(self, rect_left_x, rect_left_y, alpha=0.4):
        self.rect_left_x_list.append(rect_left_x)
        self.rect_left_y_list.append(rect_left_y)
        self.alpha_list.append(alpha)
        self.square_count += 1

    # 展示方块的位置
    def display(self, class_obj):
        for i in range(0, self.square_count):#用for循环遍历每一个方块
            x = self.rect_left_x_list[i]#获取方块的x、y坐标。为左上角点的坐标
            y = self.rect_left_y_list[i]
            alpha = self.alpha_list[i]#此方块的透明度，用于叠加在大图像上

            overlay = class_obj.image.copy()

            if (i == self.active_index):#判断当前方块是否处于可移动状态
                # 若方块可移动，则将此方块涂色为粉色画在图像上。rectangle函数输入的两组坐标依次为左上角和右下角坐标
                cv2.rectangle(overlay, (x, y), (x + self.rect_width, y + self.rect_width), (255, 0, 255), -1)
            else:
                # 若方块属性为不可移动，则将此方块涂色为蓝色画在图像上。
                cv2.rectangle(overlay, (x, y), (x + self.rect_width, y + self.rect_width), (255, 0, 0), -1)

            # 将原图和方块相叠加，一起显示。从效果上讲，可以允许方块重叠。
            class_obj.image = cv2.addWeighted(overlay, alpha, class_obj.image, 1 - alpha, 0)

    # 判断落在哪个方块上，返回方块的ID
    def checkOverlay(self, check_x, check_y):
        for i in range(0, self.square_count):
            x = self.rect_left_x_list[i]
            y = self.rect_left_y_list[i]
            # 按照序号从小到大的顺序，逐个比对手指的x、y是否在方块中
            if (x < check_x < (x + self.rect_width)) and (y < check_y < (y + self.rect_width)):
                # 若判断到手指在某个方块中，则保存此方块的序号，并退出函数
                self.active_index = i

                return i
        return -1

    # 计算与指尖的距离
    def setLen(self, check_x, check_y):
        # 计算指尖与方块左上角点的距离
        self.L1 = check_x - self.rect_left_x_list[self.active_index]
        self.L2 = check_y - self.rect_left_y_list[self.active_index]

    # 更新方块    
    def updateSquare(self, new_x, new_y):
        # 如何控制方块的移动呢？这里抓住一个核心点就行了，那就是，一旦拽住了方块
        # 手指中间的与方块左上角角点的相对移动是固定的，也就setLen中保存的L1和L2
        self.rect_left_x_list[self.active_index] = new_x - self.L1
        self.rect_left_y_list[self.active_index] = new_y - self.L2


# 识别控制类
class HandControlVolume:
    def __init__(self):
        # 按照mediapipe库的使用方式，初始化mediapipe的画图，手势识别对象
        self.mp_drawing = mp.solutions.drawing_utils
        self.mp_drawing_styles = mp.solutions.drawing_styles
        self.mp_hands = mp.solutions.hands

        # 中指与矩形左上角点的位移向量，x、y两个方向的值
        self.L1 = 0
        self.L2 = 0

        # image实例，以便另一个类调用
        self.image = None

    # 主函数
    def recognize(self):
        # 程序开始的地方计时，为了计算帧率
        fpsTime = time.time()

        # 初始化OpenCV对象，为了获取usb摄像头的图像
        cap = cv2.VideoCapture(0)
        # 视频分辨率
        resize_w = 1280
        resize_h = 720

        # 画面显示初始化参数
        rect_percent_text = 0

        # 初始化方块管理器，方块的宽为150像素
        squareManager = SquareManager(150)

        # 创建5个方块，输入方块的长宽，中心位置。将方块一字排开
        for i in range(0, 5):
            squareManager.create(200 * i + 20, 200, 0.6)
        # 手势识别。0.7为关节点置信度阈值，意为置信度大于0.7才判断为检测到了手指
        with self.mp_hands.Hands(min_detection_confidence=0.7,
                                 min_tracking_confidence=0.5,
                                 max_num_hands=2) as hands:
            while cap.isOpened():#只要相机持续打开，则不间断循环

                # 获取视频的一帧图像，返回值两个。第一个为判断视频是否成功获取。第二个为获取的图像，若未成功获取，返回none
                success, self.image = cap.read()
                # 为了方便看，调整图像的大小
                self.image = cv2.resize(self.image, (resize_w, resize_h))
                # 视频获取为空的话，进行下一次循环，重新捕捉画面
                if not success:
                    print("空帧.")
                    continue

                # 将图片格式设置为只读状态，可以提高图片格式转化的速度
                self.image.flags.writeable = False
                # 将BGR格式存储的图片转为RGB
                self.image = cv2.cvtColor(self.image, cv2.COLOR_BGR2RGB)
                # 镜像处理
                self.image = cv2.flip(self.image, 1)
                # 使用mediapipe，将图像输入手指检测模型，得到结果
                results = hands.process(self.image)
                # 重新设置图片为可写状态，并转化会BGR格式
                self.image.flags.writeable = True
                self.image = cv2.cvtColor(self.image, cv2.COLOR_RGB2BGR)
                # 当画面中检测到手掌，results.multi_hand_landmarks值不为false
                if results.multi_hand_landmarks:
                    # 遍历每个手掌，注意是手掌，意思是可能存在多只手
                    for hand_landmarks in results.multi_hand_landmarks:
                        # 用最开始初始化的手掌画图函数及那个手指关节点画在图像上
                        self.mp_drawing.draw_landmarks(
                            self.image,
                            hand_landmarks,
                            self.mp_hands.HAND_CONNECTIONS,
                            self.mp_drawing_styles.get_default_hand_landmarks_style(),
                            self.mp_drawing_styles.get_default_hand_connections_style())

                        # 解析手指，存入各个手指坐标
                        landmark_list = []#初始化一个列表来存储

                        # 用来存储手掌范围的矩形坐标
                        paw_x_list = []
                        paw_y_list = []
                        for landmark_id, finger_axis in enumerate(
                                hand_landmarks.landmark):
                            landmark_list.append([
                                landmark_id, finger_axis.x, finger_axis.y,
                                finger_axis.z
                            ])
                            # 储存每个手指的x、y坐标
                            paw_x_list.append(finger_axis.x)
                            paw_y_list.append(finger_axis.y)
                        if landmark_list:
                            # 比例缩放到像素，lambda为一种简单的函数表达方式
                            # math.ceil为向上取整的函数
                            # 在这里的意思是，输入x，则返回x*resize_w向上取整的值
                            ratio_x_to_pixel = lambda x: math.ceil(x * resize_w)
                            ratio_y_to_pixel = lambda y: math.ceil(y * resize_h)

                            # 设计手掌左上角、右下角坐标
                            # map表示一个映射，这里将mediapipe检测出来的手掌x、y列表
                            # 通过lambda定义的映射规则，映射到图像上
                            paw_left_top_x, paw_right_bottom_x = map(ratio_x_to_pixel,
                                                                     [min(paw_x_list), max(paw_x_list)])
                            paw_left_top_y, paw_right_bottom_y = map(ratio_y_to_pixel,
                                                                     [min(paw_y_list), max(paw_y_list)])

                            # 给手掌画框框
                            cv2.rectangle(self.image, (paw_left_top_x - 30, paw_left_top_y - 30),
                                          (paw_right_bottom_x + 30, paw_right_bottom_y + 30), (0, 255, 0), 2)

                            # 获取中指指尖坐标，这里充分体现了lambda函数的简洁性
                            middle_finger_tip = landmark_list[12]
                            middle_finger_tip_x = ratio_x_to_pixel(middle_finger_tip[1])
                            middle_finger_tip_y = ratio_y_to_pixel(middle_finger_tip[2])

                            # 获取食指指尖坐标
                            index_finger_tip = landmark_list[8]
                            index_finger_tip_x = ratio_x_to_pixel(index_finger_tip[1])
                            index_finger_tip_y = ratio_y_to_pixel(index_finger_tip[2])
                            # 计算中指和食指的中间点
                            between_finger_tip = (middle_finger_tip_x + index_finger_tip_x) // 2, (
                                        middle_finger_tip_y + index_finger_tip_y) // 2
                            
                            thumb_finger_point = (middle_finger_tip_x, middle_finger_tip_y)
                            index_finger_point = (index_finger_tip_x, index_finger_tip_y)
                            # 画出中指和食指2点，再次利用简介的lambda函数。输入point，执行cv2.circle画图函数
                            circle_func = lambda point: cv2.circle(self.image, point, 10, (255, 0, 255), -1)
                            self.image = circle_func(thumb_finger_point)
                            self.image = circle_func(index_finger_point)
                            self.image = circle_func(between_finger_tip)
                            # 画2点连线
                            self.image = cv2.line(self.image, thumb_finger_point, index_finger_point, (255, 0, 255), 5)
                            # 勾股定理计算食指和中指的距离
                            line_len = math.hypot((index_finger_tip_x - middle_finger_tip_x),
                                                  (index_finger_tip_y - middle_finger_tip_y))
                            # 将食指中指的指尖距离取整
                            rect_percent_text = math.ceil(line_len)

                            # 激活模式，需要让矩形跟随移动
                            if squareManager.drag_active:
                                # 更新方块，输入食指和中指中间点的位置
                                squareManager.updateSquare(between_finger_tip[0], between_finger_tip[1])
                                # 食指和中指放开，距离大于某个值，判定为松开
                                if (line_len > 50):
                                    # 取消激活
                                    squareManager.drag_active = False
                                    squareManager.active_index = -1
                            # 当食指和中指距离变小，则判断食指和中指是否在某个方块的内部
                            elif (line_len < 50) and (squareManager.checkOverlay(between_finger_tip[0],
                                                                                  between_finger_tip[1]) != -1) and (
                                    squareManager.drag_active == False):
                                # 激活拖拽模式
                                squareManager.drag_active = True
                                # 计算开始拖拽时，食指和中指的中间点与方块左上角的相对位置
                                squareManager.setLen(between_finger_tip[0], between_finger_tip[1])

                # 显示方块，传入本实例，主要为了半透明的处理
                squareManager.display(self)

                # cv2.putText可在图像上写字。显示距离
                cv2.putText(self.image, "Distance:" + str(rect_percent_text), (10, 120), cv2.FONT_HERSHEY_PLAIN, 3,
                            (255, 0, 0), 3)

                # 显示当前激活
                cv2.putText(self.image, "Active:" + (
                    "None" if squareManager.active_index == -1 else str(squareManager.active_index)), (10, 170),
                            cv2.FONT_HERSHEY_PLAIN, 3, (255, 0, 0), 3)

                # 显示刷新率FPS，cTime为一次循环结束的时间，结合循环开始时的计时，可以计算帧率
                cTime = time.time()
                fps_text = 1 / (cTime - fpsTime)
                fpsTime = cTime
                cv2.putText(self.image, "FPS: " + str(int(fps_text)), (10, 70),
                            cv2.FONT_HERSHEY_PLAIN, 3, (255, 0, 0), 3)
                # 显示画面
                # 用opencv的imshow函数显示画面
                cv2.imshow('virtual drag and drop', self.image)
                # 等待5毫秒，判断按键是否为Esc，判断窗口是否正常，来控制程序退出
                if cv2.waitKey(5) & 0xFF == 27 or cv2.getWindowProperty('virtual drag and drop', cv2.WND_PROP_VISIBLE) < 1:
                    break
            cap.release()


# 开始程序
control = HandControlVolume()
control.recognize()