OpenCV开发笔记（二）：cvui交互界面

原创

长沙红胖子Qt 2021-08-24 17:31:21 博主文章分类：Qt开发 ©著作权

文章标签 cvui 编译 cvui自带示例 opencv+cuvi javascript 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者长沙红胖子Qt的原创作品，请联系作者获取转载授权，否则将追究法律责任

各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

OpenCV开发专栏（点击传送门）

上一篇：《OpenCV开发笔记（一）：OpenCV介绍、编译》

下一篇：《OpenCV开发笔记（三）：OpenCV图像的概念和基本操作》

前言

OpenCV可用于做界面开发，cvui基于OpenCV的ui界面开发库，跨平台。

CVUI

概述

cvui是一个（非常）简单的UI lib，构建在OpenCV绘图基元之上。其他UI库（例如imgui）需要图形后端（例如OpenGL）才能工作，因此如果要在OpenCV应用程序中使用imgui，则必须使其启用OpenGL。

这不是与cvui的情况下，它使用只有OpenCV的图元来完成所有的渲染（无OpenGL或需要QT）。

特征

轻巧，易于使用的用户界面;
仅限标头，没有外部依赖（OpenCV除外）;
仅基于OpenCV绘图原语（不需要OpenGL或Qt）;
友好和类似C的API（没有类/对象等）;
轻松渲染组件而无需担心其位置（使用行/列）;
简单（但功能强大）的鼠标API;
适当数量的UI组件（总共11个）;
提供C ++和Python（纯实现，无绑定）。

CVUI下载

官方地址：https://dovyski.github.io/cvui/

OpenCV开发笔记（二）：cvui交互界面_opencv+cuvi

CVUI编译

编译并不是必须的，cvui只需要包含头文件，编译是为了其Demo。

步骤一：解压到编译文件夹

OpenCV开发笔记（二）：cvui交互界面_opencv+cuvi_02

步骤二：CMake配置

OpenCV开发笔记（二）：cvui交互界面_javascript_03

步骤三：配置错误“OpenCVConfig.cmake”、“opencv-config.cmake”

Cvui是基于OpenCV，导入这两个文件路径。

OpenCV开发笔记（二）：cvui交互界面_opencv+cuvi_04

继续配置，配置完成。

OpenCV开发笔记（二）：cvui交互界面_cvui自带示例_05

步骤四：命令行编译

OpenCV开发笔记（二）：cvui交互界面_javascript_06

OpenCV开发笔记（二）：cvui交互界面_编译_07

编译安装成功。

模块化

OpenCV开发笔记（二）：cvui交互界面_cvui_08

测试代码

void OpenCVManager::testCvuiRunNormal()
{
    cv::String windowName = "testCvuiRunNormal";
    cvui::init(windowName);
    //                      高度  宽度
    cv::Mat frame = cv::Mat(300, 400, CV_8UC3);
    int count = 0;
    while(true)
    {
        frame = cv::Scalar(100, 100, 100);
        if(cvui::button(frame, 100, 100, "testButton"))
        {
            count++;
        }
        cvui::printf(frame, 100, 200, 1.0, 0xFF0000, "count = %d", count);
        cvui::update();
        cv::imshow(windowName, frame);

        // Check if ESC key was pressed
        if (cv::waitKey(20) == 27)
        {
            break;
        }
    }
}

测试效果

OpenCV开发笔记（二）：cvui交互界面_javascript_09