Python+OpenCV实战之拖拽虚拟方块的实现

目录
  • 一、项目效果
  • 二、核心流程
  • 三、代码流程
    • 1. 读取摄像头视频,画矩形
    • 2. 导入mediapipe处理手指坐标
    • 3. 位置计算
  • 完整代码

一、项目效果

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

二、核心流程

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'):
        break

cap.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 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() 

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

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 = 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)

    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())

            # 记录手指每个点的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 - x
                        L2 = index_finger_y - y
                        square_color = (255, 0, 255)
                        on_square = True

            else:
                # 双指不合并/分开
                on_square = False
                square_color = (0, 255, 0)

            # 更新坐标
            if on_square:
                x = index_finger_x - L1
                y = 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'):
        break

cap.release()
cv2.destroyAllWindows() 

到此这篇关于Python+OpenCV实战之拖拽虚拟方块的实现的文章就介绍到这了,更多相关Python OpenCV拖拽虚拟方块内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Python使用OpenCV实现虚拟缩放效果

    目录 介绍 要求 目标 构建 结论 介绍 OpenCV 彻底改变了整个图像处理领域.从图像分类到对象检测,我们不仅可以使用 OpenCV 库做一些很酷的事情,而且还可以构建一流的应用程序. 今天我们要实现一个有趣的东西,它是手机或电脑中的一种功能,即图像缩放.但在这里,它将是实时对帧上所需的图像进行虚拟缩放. 要求 对于这个项目,我们将使用 OpenCV 库和另一个名为 Cvzone 的库来使用虚拟缩放. CVZone 它是一个建立在 OpenCV 和 MediaPipe 之上的库.它使事情变得

  • 使用 OpenCV 开发虚拟键盘的方法

    目录 介绍 使用 OpenCV 实现虚拟键盘 使用 OpenCV 为虚拟键盘导入库 定义绘制函数 使用 OpenCV 的虚拟键盘主程序 自定义键盘 使用 OpenCV 的虚拟键盘的完整代码 结论 介绍 OpenCV 是最流行的计算机视觉任务库,它是用于机器学习.图像处理等的跨平台开源库,用于开发实时计算机视觉应用程序. CVzone 是一个计算机视觉包,它使用 OpenCV 和 Media Pipe 库作为其核心,使我们易于运行,例如手部跟踪.人脸检测.面部标志检测.姿势估计等,以及图像处理和其

  • OpenCV利用手势识别实现虚拟拖放效果

    目录 第一步 第二步 第三步 完整代码 本文将实现一些通过手拖放一些框,我们可以使用这个技术实现一些游戏,控制机械臂等很多有趣的事情. 第一步 通过opencv设置显示框和调用摄像头显示当前画面 import cv2 cap = cv2.VideoCapture(0) cap.set(3,1280) cap.set(4,720) while True:     succes, img = cap.read()     cv2.imshow("Image", img)     cv2.w

  • Python+OpenCV实战之拖拽虚拟方块的实现

    目录 一.项目效果 二.核心流程 三.代码流程 1. 读取摄像头视频,画矩形 2. 导入mediapipe处理手指坐标 3. 位置计算 完整代码 一.项目效果 学校宿舍今天搬家,累麻了,突然发现展示处理的也很粗糙,就这样吧嘿嘿~~~ 二.核心流程 1.openCV读取视频流.在每一帧图片上画一个矩形. 2.使用mediapipe获取手指关键点坐标. 3.根据手指坐标位置和矩形的坐标位置,判断手指点是否在矩形上,如果在则矩形跟随手指移动. 三.代码流程 环境准备: python: 3.8.8 op

  • Python OpenCV实战之与机器学习的碰撞

    目录 0. 前言 1. 机器学习简介 1.1 监督学习 1.2 无监督学习 1.3 半监督学习 2. K均值 (K-Means) 聚类 2.1 K-Means 聚类示例 3. K最近邻 3.1 K最近邻示例 4. 支持向量机 4.1 支持向量机示例 小结 0. 前言 机器学习是人工智能的子集,它为计算机以及其它具有计算能力的系统提供自动预测或决策的能力,诸如虚拟助理.车牌识别系统.智能推荐系统等机器学习应用程序给我们的日常生活带来了便捷的体验.机器学习的蓬勃发展,得益于以下三个关键因素:1) 海

  • Python+Opencv实战之人脸追踪详解

    目录 前言 人脸追踪技术简介 使用基于 dlib DCF 的跟踪器进行人脸跟踪 使用基于 dlib DCF 的跟踪器进行对象跟踪 小结 前言 人脸处理是人工智能中的一个热门话题,人脸处理可以使用计算机视觉算法从人脸中自动提取大量信息,例如身份.意图和情感:而目标跟踪试图估计目标在整个视频序列中的轨迹,其中只有目标的初始位置是已知的,将这两者进行结合将产生许多有趣的应用.由于外观变化.遮挡.快速运动.运动模糊和比例变化等多种因素,人脸追踪非常具有挑战性. 人脸追踪技术简介 基于判别相关滤波器 (d

  • Python+OpenCV实战之利用 K-Means 聚类进行色彩量化

    目录 前言 利用 K-Means 聚类进行色彩量化 完整代码 显示色彩量化后的色彩分布 前言 K-Means 聚类算法的目标是将 n 个样本划分(聚类)为 K 个簇,在博文<OpenCV与机器学习的碰撞>中,我们已经学习利用 OpenCV 提供了 cv2.kmeans() 函数实现 K-Means 聚类算法,该算法通过找到簇的中心并将输入样本分组到簇周围,同时通过简单的示例了解了 K-Means 算法的用法.在本文中,我们将学习如何利用 K-Means 聚类进行色彩量化,以减少图像中颜色数量.

  • Python Opencv实战之印章提取的实现

    目录 前言 源码展示 效果展示 前言 这期分享的是使用opencv提取印章,很多时候我们需要电子版的章,所以今天就带大家使用代码提取出来! Photoshop虽然强大,但是奈何小编不会使啊,昨天就有一个小伙伴问我能不能帮忙,这不? PS虽然我不会,但是我会写代码呀!这可难不倒我!安排安排~ (特别提醒:所有爱好设计和喜欢做图的小伙伴们,切记千万不要帮着老板或者朋友PS伪造公章,刑法第280条特别指出,伪造证件印章,是可以追究刑事责任的,违法的事情不要做哦.) 源码展示 import cv2 im

  • Python+OpenCV实战之实现文档扫描

    目录 1.效果展示 2.项目准备 3.代码的讲解与展示 4.项目资源 5.项目总结与评价 1.效果展示 网络摄像头扫描: 图片扫描: 最终扫描保存的图片: (视频) (图片) 2.项目准备 今天的项目文件只需要两个.py文件,其中一个.py文件是已经写好的函数,你将直接使用它,我不会在此多做讲解,因为我们将会在主要的.py文件import 导入它,如果想了解其中函数是如何写的,请自行学习. utlis.py,需要添加的.py文件 import cv2 import numpy as np # T

  • Python Opencv实战之文字检测OCR

    目录 1.相关函数的讲解 2.代码展示 Detecting Words Detecting ONLY Digits 3.问题叙述 4.image_to_data()配置讲解 5.项目拓展 6.总结与评价 1.相关函数的讲解 image_to_data()的输出结果是表格形式,输出变量的类型依旧是字符串. 你会得到一个这样的列表['level', 'page_num', 'block_num', 'par_num', 'line_num', 'word_num', 'left', 'top', '

  • jquery实现拖拽小方块效果

    今天来讲一个很常用的拖拽功能,主要是利用一点css,js和jquery,很简单但同时也很重要,掌握好才是最关键的! 下面来看下效果图: 这里可以看到,在鼠标hover的时候会有一个透明度的变化和一个盒子阴影!并且在右下角会实时的显示出小方块移动时横纵坐标的变化! 可以看到有一个盒子阴影 在鼠标单击按住的时候会变红,然后可以拖动小块随意移动 我们在看代码之前可以先了解下jquery中的基本知识(选择器,css控制器什么的)和offset()和clientX,clientY.思路很简单,就是分别监听

  • 利用JavaScript实现拖拽改变元素大小

    大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下

  • 浅析JavaScript动画模拟拖拽原理

    模拟拖拽的原理: x1等于div.offsetLeft y1等于div.offsetTop x2等于ev.clientX(ev表示event事件) y2等于ev.clientY 当我们在方块上按下鼠标的时候,x2-x1即可确定.移动鼠标之后,我们用鼠标当前的位置即x4.y4减去x2-x1.y2-y1就可以得到方块现在的位置. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

随机推荐