15. CVUI 2.7.0 行和列：Rows and Columns（官方文档翻译）

最新推荐文章于 2024-01-12 10:08:34 发布
最新推荐文章于 2024-01-12 10:08:34 发布
阅读量772 收藏 3
点赞数
分类专栏： CVUI 文章标签： OpenCV CVUI row and column
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyuankl123/article/details/105621984
版权

官方文档链接：https://dovyski.github.io/cvui/layout-introduction/

Rows and Columns 简介

在构建 UI 时，最麻烦的任务之一时计算每个组件在屏幕上的位置。cvui 有一组抽象该进程的方法，因此不必考虑 (x, y) 的坐标。相反，你只需要创建 rows/columns ，cvui 将为用户安排组件。

使用 beginRow() 和 endRow() 创建行。类似地，可以使用 beginColumn() 和 endColumn() 创建列。cvui::begin() 的函数声明如下：

void begin{Row, Column} (
    cv::Mat& theWhere,
    int theX,
    int theY,
    int theWidth = -1,
    int theHeight = -1,
    int thePadding = 0
)

cvui::beginRow() 和 cvui::beginColumn() 都要求用户说明行和列将被渲染的帧以及琪仔屏幕上的 (x, y) 坐标。用户可以指定宽度、高度和行列的填充。

注意：在 cvui::beginRow() 和 cvui::beginColumn() 中，用户将指明行列本身的 (x, y) 坐标，而不是其组件的坐标。

创建行和列 （Create rows and columns）

可以通过三个步骤创建 row/column：

  • 使用 begin*() 启动组（行或列），添加组件，然后通过调用 end*() 完成组。
  • 在一行中，所有添加的元素都水平放置，一个接着一个（从左到右）。
  • 在一列中，所有添加的元素从上到下垂直放置，一个接着一个。

下面是一个行的例子：

核心代码：

cv::Mat frame = cv::Mat(300, 800, CV_8UC3);
frame = cv::Scalar(100, 100, 100);

// beginRow(cv::Mat, x, y)
cvui::beginRow(frame, 10, 20);
cvui::text("This is another row");
cvui::checkbox("checkbox", &checked);
cvui::button(100, 30, "Fixed");
cvui::text("with text.");
cvui::endRow();

完整代码：

#define CVUI_IMPLEMENTATION
#define CVUI_DISABLE_COMPILATION_NOTICES
#include "cvui.h"

#include <iostream>

#include <opencv2/core/core.hpp>
#include <opencv2/imgcodecs/imgcodecs.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/highgui/highgui.hpp>

#define WINDOW_NAME "CVUI Test"

void bit_plane_layering(const cv::Mat& src, cv::Mat& dst, int iBit);

int main(int argc, char* argv)
{
	cvui::init(WINDOW_NAME);

	bool checked = true;

	cv::Mat frame = cv::Mat(300, 800, CV_8UC3);
	frame = cv::Scalar(100, 100, 100);

	// beginRow(cv::Mat, x, y)
	cvui::beginRow(frame, 10, 20);
	cvui::text("This is another row");
	cvui::checkbox("checkbox", &checked);
	cvui::button(100, 30, "Fixed");
	cvui::text("with text.");
	cvui::endRow();

	cvui::imshow(WINDOW_NAME, frame);
	cv::waitKey(0);

	return 0;
}

输出结果：

在这里插入图片描述
在上面的示例中，row 将从坐标 (10, 20) 处开始渲染组件。需要注意的是，beginRow() 和 endRow() 之间的所有组件调用都没有指定 (x, y) 坐标，只在需要时制定了宽度和高度，例如 cvui::button(100, 30, “Fixed”)。

宽度、高度、填充、空白 （Width, height, padding and spacing）

默认情况下，row/column 的宽度和高度的值为 -1，这意味着 cvui 将根据组件来计算其宽度和高度。如果为 row/column 指定宽度和高度，则会影响嵌套式相邻组件（例如另一方或按钮）在 row/column 附近的渲染方式。

对 row/column 的填充默认为 0，这意味着组件放置没有间隔。可以通过添加参数来更改 row/column 中组件的间距。下面是使用 50 作为填充间距的示例：

核心代码：

cv::Mat frame = cv::Mat(300, 800, CV_8UC3);
frame = cv::Scalar(100, 100, 100);

// beginRow(cv::Mat, x, y)
cvui::beginRow(frame, 10, 20, -1, -1, 50);
cvui::text("This is another row");
cvui::checkbox("checkbox", &checked);
cvui::button(100, 30, "Fixed");
cvui::text("with text.");
cvui::endRow();

完整代码：

#define CVUI_IMPLEMENTATION
#define CVUI_DISABLE_COMPILATION_NOTICES
#include "cvui.h"

#include <iostream>

#include <opencv2/core/core.hpp>
#include <opencv2/imgcodecs/imgcodecs.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <opencv2/highgui/highgui.hpp>

#define WINDOW_NAME "CVUI Test"

void bit_plane_layering(const cv::Mat& src, cv::Mat& dst, int iBit);

int main(int argc, char* argv)
{
	cvui::init(WINDOW_NAME);

	bool checked = true;

	cv::Mat frame = cv::Mat(300, 800, CV_8UC3);
	frame = cv::Scalar(100, 100, 100);

	// beginRow(cv::Mat, x, y)
	cvui::beginRow(frame, 10, 20, -1, -1, 50);
	cvui::text("This is another row");
	cvui::checkbox("checkbox", &checked);
	//cvui::window(80, 80, "window");
	cvui::button(100, 30, "Fixed");
	cvui::text("with text.");
	cvui::endRow();

	cvui::imshow(WINDOW_NAME, frame);
	cv::waitKey(0);

	return 0;
}

输出结果：

在这里插入图片描述

同样，可以通过相同的方式创建列。下面是创建列的示例：

核心代码：

// cv::Mat, x, y, width, height, padding
cvui::beginColumn(frame, 50, 50, 100, 200);
cvui::text("Column 1 (no padding)");
cvui::button("button1");
cvui::button("button2");
cvui::text("End of column 1");
cvui::endColumn();

// cv::Mat, x, y, width, height, padding
cvui::beginColumn(frame, 300, 50, 100, 200, 10);
cvui::text("Column 2 (padding = 10)");
cvui::button("button1");
cvui::button("button2");
cvui::trackbar(150, &value3, 0., 5.);
cvui::text("End of column 2");
cvui::endColumn();

// cv::Mat, x, y, width, height, padding
cvui::beginColumn(frame, 550, 50, 100, 200);
cvui::text("Column 3 (use space)");
cvui::space(5);                       // Add 5 pixels of (vertical) space.
cvui::button("button1 5px below");
cvui::space(50);                      // Add 50 pixels of (vertical) space.
cvui::text("Text 50px below");
cvui::space(20);                      // Add 20 pixels of (vertical) space.
cvui::button("Button 20px below");
cvui::space(40);                      // Add 40 pixels of (vertical) space.
cvui::text("End of column 2 (40px below)");
cvui::endColumn();

输出结果：

在这里插入图片描述

如上面代码中所示，可以通过调用 cvui::space() 在组件之间添加任意数量的空间。

提示：cvui::space() 是上下文关联的，如果在 beginColumn()/endColumn() 之间使用它，则空间将是垂直的。如果在 begin.Row()/endRow() 之间使用，则空间是水平的。

Chris Kang
关注
专栏目录
简单的opencv GUI库
Dangkie的专栏
08-25 5606
对图像进行处理时通常需要调整函数的参数，特别是像边缘检测或者是图像亮度调节等操作，常常需要经过多次调节才能得到满意的结果。而每次要重新设置参数都需要重新更改程序中的代码，opencv也有自带的gui，不过一直觉得很不好用，今天发现了一个非常简单的gui库：cvui，只需要包含一个头文件，并且是跨平台的，不需要附属其他文件，非常方便。
cmake-3.17.0-win64-x64_opencv-4.3.0_cvui-2.7.0.zip
05-17
这个压缩包文件包含三个重要的组件：CMake 3.17.0的Windows 64位版本，OpenCV 4.3.0以及cvui 2.7.0。这三者都是在计算机视觉和软件构建领域至关重要的工具。 首先，CMake是一个跨平台的开源自动化构建系统，用于...
CVUI（配合Opencv书写界面神器）
10-12
配合Opencv生成交互界面，无序QT，只需要引入一个头文件即可编译，跨平台性能好
线性布局（Row/Column）
最新发布
01-12 1836
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。图1Column容器内子元素排列示意图图2Row容器内子元素排列示意图。
16. CVUI 2.7.0 行和列：行列嵌套（官方文档翻译）
Mr. Stone's Blog
04-22 266
官方文档链接：https://dovyski.github.io/cvui/layout-nesting/ 行列嵌套 （Nesting rows and columns） row/column 可以相互嵌套来创建更复杂的布局，而不需要单独定位组件。 当一列或一行嵌套在另一列或另一行中时，它的行为类似于普通的组件：如果需要，用户不需要指明渲染它的帧或它的 (x, y) 坐标，只需要指明它的宽度和高...
html table.rows,html table - by rows or columns
weixin_35327824的博客
06-25 227
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):问题:do all browsers support html table by columns first.i know you can do:but can you build up a table by columns first? Is there anything wrong with do...
cvui undefined reference to cvui::init
07-11
你可以通过添加`#include <opencv2/cvui.h>`来包含cvui头文件，并使用`cvui::`前缀来访问cvui库中的函数和类。 如果你已经检查了以上几点，但仍然遇到了这个错误，请检查一下你的代码是否存在其他错误或者警告，有...
cvui_opencv示例Demo_cvuiLib_opencvLib_Qt5.9.3mingw.rar
08-25
在"cvui_opencv示例Demo_cvuiLib_opencvLib_Qt5.9.3mingw.rar"这个压缩包中，集成了OpenCV 3.4.1和cvui 2.7.0的头文件、动态链接库（dll）、静态库（lib）以及相关的示例代码。这为开发者提供了完整的环境，以便快速...
cvui-master.zip
07-17
opencv 3.4.6 opencv3.4.6 windows 64 动态链接库OpenCV Open Computer Vision Library About Releases Courses Resources Books Links...* OpenCV – 3.4.6 2019-04-08 Docs Sources GitHub Windows...
使用cvui+Opencv手动编写拉普拉斯边缘提取和中值滤波去燥
u011713916的博客
07-07 236
Notes： 引：cvui的地址:https://dovyski.github.io/cvui/ 老师让我们手动编写两个算子，练习编程能力，算法挺简单。故使用cvui添加了一部分附带功能。比如调节二值化阈值等。 Code #include<iostream> #include <opencv2\opencv.hpp> #include<opencv.hpp> #include"cvui.h" #include<vector> #define CVU
OpenCV HighGUI图形用户界面设计
qq_35066464的博客
07-25 1050
OpenCV HighGUI图形用户界面设计 HighGUI模块为高层GUI图形用户界面模块，包含媒体的输入输出、视频捕捉、图像和视频的编码解码、图形交互界面的接口等内容。 1. opencv的.h文件 在写简单的OpenCV程序的时候，以下三句话可以作为标配 #include <opencv2/core/core.hpp> #include <opencv2/highgui/h...
OpenCV 4.2.0 - Introduction
既然选择了远方 便只顾风雨兼程 - 永强
02-22 1675
OpenCV 4.2.0 - Introduction OpenCV 4.2.0 - Modules https://docs.opencv.org/4.2.0/ OpenCV 4.2.0 - Introduction https://docs.opencv.org/4.2.0/d1/dfb/intro.html OpenCV (Open Source Computer Vision Library: http://opencv.org) is an open-source BSD-licensed lib
17. CVUI 2.7.0 鼠标和 OpenCV 窗口：介绍（官方文档翻译）
Mr. Stone's Blog
04-22 299
官方文档链接：https://dovyski.github.io/cvui/advanced-introduction/ 鼠标和 OpenCV 窗口 （Mouse and OpenCV windows） 有些应用程序需要复杂的 UI 交互，包括使用鼠标光标或多个 OpenCV 窗口。 在使用多个 OpenCV 窗口（包含着 cvui 组件）或 cvui 的鼠标 API 时，唯一需要考虑的是必须指...
cvui使用-从文件夹中读取图片
zeng_haoyu的博客
01-18 1283
#include&lt;opencv2/opencv.hpp&gt; #include&lt;iostream&gt; #define CVUI_IMPLEMENTATION #include "cvui/cvui.h" using namespace cv; using namespace std; #define WINDOW_NAME "img" int main() { con...
《谱图论》读书笔记（第三章）
meteor_0033的博客
08-30 1010
目录 Chapter 3．直径和特征值（Diameters and eigenvalues） 3.1 图的直径（The diameter of a graph） 3.2 特征值和两个子集之间的距离 Theorem 3.1. Corollary 3.2. Theorem 3.3. Lemma 3.4. Corollary 3.5. Lemma 3.6. Lemma 3.7....
Multidimensional Arrays
11-29 329
Overview An array having more than two dimensions is called a multidimensional array in the MATLAB® application. Multidimensional arrays in MATLAB are an extension of the normal two-dimensional...
tensorflow2是指_TensorFlow2学习(1)
weixin_31520435的博客
12-31 227
1 TensorFlow2学习1.1 张量(Tensor)1.1.1张量是多维数组(列表)，用阶表示张量的维数：维数阶名称例子0-D0scalar 标量s=1 2 31-D1vector 向量s=[1,2,3]2-D2matrix 矩阵s=[[1,2,3],[1,2,3],[1,2,3]]n-D3tensor 张量s=[[[ ]]] 其中左侧中括号有n个1.1.2创建一个Tensor1)tf.co...
cvui.h 使用总结
you_big_father的博客
05-28 4605
很多情况下个人更多用QT搭配opencv进行一系列开发，QT可以迅速开发出合乎要求的界面。但是实际上，试验过程中并不需要一个美观且功能齐全的界面，使用opencv进行图像处理，可能反反复复使用的是按键、勾选按钮、图片显示、参数修改或者显示等功能，这些小功能似乎没必要动用QT的牛刀。 有一个非常小巧的GUI库，CVUI。它是建立在OpenCV绘图基元之上的，除OpenCV之外，没有任何依赖性。而使...
7. CVUI 2.7.0 组件：Text （官方文档翻译）
Mr. Stone's Blog
04-05 591
官方文档链接：https://dovyski.github.io/cvui/components/text/ Text cvui::text() 渲染一段字符串。函数声明为： void text ( cv::Mat& theWhere, int theX, int theY, const cv::String& theText, doubl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值