15. CVUI 2.7.0 行和列：Rows and Columns（官方文档翻译） |
您所在的位置：网站首页 › rows和columns › 15. CVUI 2.7.0 行和列：Rows and Columns（官方文档翻译） |
15. CVUI 2.7.0 行和列：Rows and Columns（官方文档翻译）
|
官方文档链接：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 #include #include #include #include #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/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 #include #include #include #include #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() 之间使用，则空间是水平的。 |
在上面的示例中，row 将从坐标 (10, 20) 处开始渲染组件。需要注意的是，beginRow() 和 endRow() 之间的所有组件调用都没有指定 (x, y) 坐标，只在需要时制定了宽度和高度，例如 cvui::button(100, 30, “Fixed”)。
【本文地址】