一、ImGui的简介
简介:ImGui又称为Dear ImGui,它是与平台无关的C++轻量级跨平台图形界面库,没有任何第三方依赖,可以将ImGui的源码直接加到项目中,也可以编译成dll,ImGui使用DX或OpenGL进行界面渲染,对于画面质量要求较高,例如客户端游戏、4k/8k视频播放时,用ImGui是很好的选择。
简介参考:https://www.jb51.net/article/229827.htm
项目地址:https://github.com/ocornut/imgui
二、ImGui基础的语法
1、窗口的语法
(1)创建窗口
ImGui::Begin("Hello, world!");
ImGui::End();
(2)修改窗口的两种形式
1)靠近的位置进行设置
ImGui::Begin("1111");
{
//设置窗口位置
ImVec2 pos = { 100, 100 };
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
}
2)第二种带名字的形式进行修改
//设置窗口位置
ImVec2 pos = { 100, 100 };
ImGui::SetWindowPos("1111", pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize("1111", nSize);
(3)实例
mGui::Begin("1111");
{
设置窗口位置
//ImVec2 pos = { 100, 100 };
//ImGui::SetWindowPos(pos);
//ImVec2 nSize = { 300, 200 };
//ImGui::SetWindowSize(nSize);
}
ImGui::End();
ImGui::Begin("2222");
{
//设置窗口位置
ImVec2 pos = { 100, 100+200+20 };
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
}
ImGui::End();
//设置窗口位置
ImVec2 pos = { 100, 100 };
ImGui::SetWindowPos("1111", pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize("1111", nSize);
2、按钮的语法
(1)创建简单按钮
ImGui::Button(按钮题目, 按钮大小);
1)只能响应左键点击的按钮
bool IsClick = ImGui::Button("11111", ImVec2(80, 20));
if (IsClick)
{
MessageBoxA(NULL, "鼠标左键被按下了", 0, 0);
}
(2)扩展版本EX版本(需要头文件"imgui_internal.h")
ImGui::ButtonEx(按钮题目, 按钮大小, 具体的参数);
1)创建响应右键的按钮
bool IsClick2 = ImGui::ButtonEx("2222", ImVec2(160, 20), ImGuiButtonFlags_::ImGuiButtonFlags_MouseButtonRight);
if (IsClick2)
{
MessageBoxA(NULL, "鼠标右键被按下了", 0, 0);
}
3、文本按钮
(1)创建单行文本框
ImGui::InputText();
1)简单的文本框
char BuffText[256] = "Init Edit";
ImGui::InputText("111", IN OUT BuffText, sizeof(BuffText));
2)InputText的高級用法(创建过滤文本框)
char BuffText2[256] = "Init Edit";
ImGui::InputText("222", IN OUT BuffText2, sizeof(BuffText2), ImGuiInputTextFlags_CallbackCharFilter, testEditCallback);
static int testEditCallback(ImGuiInputTextCallbackData* data)
{
printf("data->EventChar=%d buf=%s EventKey=%d EventFlag=%d\r\n",
data->EventChar,
data->Buf,
data->EventKey,
data->EventFlag
);
if (data->EventChar >= '0' && data->EventChar <= '9')
{
return 1; //过滤0~9 屏蔽掉输入
}
else
{
return 0;
}
}
(2)创建多行文本框
ImGui::InputTextMultiline(名称, 缓冲区, 缓冲区大小, 文本框大小);
1)使用InputTextMultiline编写过滤多行文本框
char BuffText3[256] = "Init \n Edit";
ImGui::InputTextMultiline("Name", BuffText3, sizeof(BuffText3), ImVec2{ 200, 100 }, ImGuiInputTextFlags_CallbackCharFilter, testEditCallback);
static int testEditCallback(ImGuiInputTextCallbackData* data)
{
printf("data->EventChar=%d buf=%s EventKey=%d EventFlag=%d\r\n",
data->EventChar,
data->Buf,
data->EventKey,
data->EventFlag
);
if (data->EventChar >= '0' && data->EventChar <= '9')
{
return 1; //过滤0~9 屏蔽掉输入
}
else
{
return 0;
}
}
4、复选框
bool IsDown = ImGui::Checkbox(描述, 状态);
(1)编写简单的复选框
static bool Checkstate = FALSE;
bool IsDown = ImGui::Checkbox(u8"文字描述", &Checkstate);
if (IsDown)
{
if (Checkstate)
{
//选中时代码
MessageBoxA(NULL, "被选中", 0, 0);
}
else
{
//未选中时代码
MessageBoxA(NULL, "未被选中", 0, 0);
}
}
5、单选框
ImGui::RadioButton(标题, 条件)
(1)v方式一:创建简单的复选框
enum mymode
{
Mode1,
Mode2,
Mode3,
};
static mymode iValue;
bool IsDown1 = ImGui::RadioButton(u8"单选框1", iValue == Mode1);
ImGui::SameLine(); //与下一行显示在同一行
bool IsDown2 = ImGui::RadioButton(u8"单选框2", iValue == Mode2);
bool IsDown3 = ImGui::RadioButton(u8"单选框3", iValue == Mode3);
if (IsDown1)
{
iValue = Mode1;
}
if (IsDown2)
{
iValue = Mode2;
}
if (IsDown3)
{
iValue = Mode3;
}
(2)方式二:创建条件的复选框
bool IsDown = ImGui::RadioButton(标题, 输入输出缓冲区, 判断值);
条件: IsDown为True时,判断值输入到缓冲区中, 输入输出缓冲区 == 判断值 则被选
中,
static int Arg2 = 4;
bool IsDown4 = ImGui::RadioButton(u8"单选框4", IN OUT & Arg2, Mode4);
bool IsDown5 = ImGui::RadioButton(u8"单选框5", IN OUT & Arg2, Mode5);
if (IsDown4 || IsDown5)
{
printf("%d\r\n", Arg2);
}
6、菜单按钮
ImGui::BeginMenu(u8"菜单名字")
ImGui::EndMenu();
ImGui::BeginMenuBar()
ImGui::EndMenuBar();
(1)方式一:创建简单的菜单按钮
if (ImGui::BeginMenu(u8"菜单名字"))
{
if (ImGui::MenuItem(u8"1"))
{
}
ImGui::MenuItem(u8"2");
ImGui::MenuItem(u8"3");
ImGui::MenuItem(u8"4", NULL, &Menu2, true);
ImGui::EndMenu();
};
ImGui::End();
(2)方式二:创建菜单的另一种方式
static bool Menu3 = false;
ImGui::Begin(u8"菜单测试", 0, ImGuiWindowFlags_MenuBar);
{
ImVec2 pos = { 100 , 100};
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
if (ImGui::BeginMenuBar())
{
//菜单
if (ImGui::BeginMenu(u8"菜单名字"))
{
if (ImGui::MenuItem(u8"1"))
{
}
ImGui::MenuItem(u8"2");
ImGui::MenuItem(u8"3");
ImGui::MenuItem(u8"4", NULL, &Menu3, true);
ImGui::EndMenu();
};
ImGui::EndMenuBar();
}
}
7、List控件
ImGui::ListBox(列表标题,&输出选项, 列表名称地址, 数量)
ImGui::BeginListBox(列表标题);
ImGui::EndListBox();
(1)方式一:ListBox创建列表控件
ImGui::Begin(u8"List框测试2");
{
ImVec2 pos = { 100 , 100 + 200 };
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
static int Number2 = 4;
const char* items[] = { "11111", "22222", "33333", "44444", "5555", "66666", "7777", "888888", "999999" };
ImGui::Text(u8"选中%d\r\n", Number2);
ImGui::ListBox("listboxtext", &Number2, items, sizeof(items) / sizeof(char*) , -1);
}
ImGui::End();
(2)方式二:BeginListBox创建列表控件
ImGui::Begin(u8"List框测试");
{
ImVec2 pos = { 100 , 100};
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
static int Number = 4;
const char* items[] = { "11111", "22222", "33333", "44444", "5555", "66666", "7777", "888888", "999999" };
ImGui::Text(u8"选中%d\r\n", Number);
if (ImGui::BeginListBox("ListBox"))
{
for (int n = 0; n < IM_ARRAYSIZE(items); n++)
{
const bool IsDown = (Number == n);
if (ImGui::Selectable(items[n], Number))
{
Number = n;
}
if (IsDown)
{
ImGui::SetItemDefaultFocus();
}
}
ImGui::EndListBox();
}
};
ImGui::End();
8、TreeNode控件
ImGui::TreeNode("List boxes")
ImGui::TreePop();
(1) 方式一:创建简单树结构
ImGui::Begin(u8"List框测试");
{
ImVec2 pos = { 100 , 100};
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
static int Number = 4;
const char* items[] = { "11111", "22222", "33333", "44444", "5555", "66666", "7777", "888888", "999999" };
ImGui::Text(u8"选中%d\r\n", Number);
if (ImGui::BeginListBox("ListBox"))
{
for (int n = 0; n < IM_ARRAYSIZE(items); n++)
{
const bool IsDown = (Number == n);
if (ImGui::Selectable(items[n], Number))
{
Number = n;
}
if (IsDown)
{
ImGui::SetItemDefaultFocus();
}
}
ImGui::EndListBox();
}
};
ImGui::End();
、
9、页面控件
ImGui::BeginTabBar(u8"页面组", 0)
ImGui::EndTabBar();
ImGui::BeginTabItem(页标题)
ImGui::EndTabItem();
(1)方式一:BeginTabBar创建页面
ImGui::Begin(u8"页测试");
{
ImVec2 pos = { 100 , 100 + 200 };
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
if (ImGui::BeginTabBar(u8"页面组", 0))
{
if (ImGui::BeginTabItem(u8"页1"))
{
ImGui::EndTabItem();
}
if (ImGui::BeginTabItem(u8"页2"))
{
ImGui::EndTabItem();
}
if (ImGui::BeginTabItem(u8"页3"))
{
ImGui::EndTabItem();
}
if (ImGui::BeginTabItem(u8"页4"))
{
ImGui::EndTabItem();
}
ImGui::EndTabBar();
}
}
ImGui::End();
(2)方式二:CheckboxFlags + BeginTabBar组合使用
static int Flag = 0;
//各种功能开启
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_Reorderable", &Flag, ImGuiTabBarFlags_Reorderable);
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_AutoSelectNewTabs", &Flag, ImGuiTabBarFlags_AutoSelectNewTabs);
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_TabListPopupButton", &Flag, ImGuiTabBarFlags_TabListPopupButton);
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_NoCloseWithMiddleMouseButton", &Flag, ImGuiTabBarFlags_NoCloseWithMiddleMouseButton);
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_NoTabListScrollingButtons", &Flag, ImGuiTabBarFlags_NoTabListScrollingButtons);
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_NoTooltip", &Flag, ImGuiTabBarFlags_NoTooltip);
ImGui::CheckboxFlags(u8"ImGuiTabBarFlags_FittingPolicyResizeDown", &Flag, ImGuiTabBarFlags_FittingPolicyResizeDown);
if (ImGui::BeginTabBar(u8"页面组"))
{
if (ImGui::BeginTabItem(u8"页1"))
{
ImGui::EndTabItem();
}
if (ImGui::BeginTabItem(u8"页2"))
{
ImGui::EndTabItem();
}
if (ImGui::BeginTabItem(u8"页3"))
{
ImGui::EndTabItem();
}
if (ImGui::BeginTabItem(u8"页4"))
{
ImGui::EndTabItem();
}
ImGui::EndTabBar();
}
10、UI控件颜色设置
ImGui::PushStyleColor(ImGuiCol_Button, 0xFFFF0000);
ImGui::PopStyleColor();
(1)方式一:修改按钮颜色
ImGui::Begin(u8"颜色测试");
{
ImVec2 pos = { 100 , 100 + 200 };
ImGui::SetWindowPos(pos);
ImVec2 nSize = { 300, 200 };
ImGui::SetWindowSize(nSize);
ImGui::PushStyleColor(ImGuiCol_Button, 0xFFFF0000);
ImGui::Button("test");
ImGui::PopStyleColor()
}
ImGui::PushStyleColor(ImGuiCol_Text, 0xFF000FFF);
ImGui::Text(u8"hahahahahahahahahah");
ImGui::PopStyleColor();
11、滑块UI控件
ImGui::SliderInt("名称", &返回值, 最小值, 最大值, 显示格式);
(1)创建整数滑块
static int OutValue1 = 30;
static int OutValue2 = 30;
ImGui::SliderInt("slider int", &OutValue1, 1, 60);
ImGui::Text(u8"测试滑块 返回值=%d", OutValue1);
ImGui::SliderInt("slider int", &OutValue2, 1, 60, "~%X~");
ImGui::Text(u8"测试滑块 返回值=%d", OutValue2);
(2)创建浮点数滑块
static float OutValue3 = 30;
ImGui::SliderFloat("slider int", &OutValue3, 1, 60.0f, "~%0.1f~");
12、进度条控件
ImGui::ProgressBar(数值, 控件大小);
(1)方式一:创建精度条
static float Value = 0.1f;
Value = Value + 0.001f;
ImGui::ProgressBar(Value, ImVec2(-1.0f, 0.0f));
三、ImGui的模态窗口和非模态窗口
1、什么是模态窗口、什么是模态窗口
所谓模态对话框,就是指除非采起有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性,用户能够在当前对话框以及其余窗口间进行切换。
2、模态窗口的创建
//创建模态窗口
if (ImGui::BeginPopupModal("MyModalWindow", NULL, ImGuiWindowFlags_AlwaysAutoResize))
{
ImGui::Text(u8"我的第一个模态窗口");
if (ImGui::Button(u8"退出"))
{
ImGui::CloseCurrentPopup();
}
//添加其他的UI控件
ImGui::EndPopup();
}
//开启模态窗口
if (ImGui::Button(u8"显示模态窗口"))
{
ImGui::OpenPopup("MyModalWindow");
}
3、非模态窗口的创建
//非模态窗口创建
if (ImGui::BeginPopup("MyWindow"))
{
ImGui::Text(u8"我的第一个非模态窗口");
if (ImGui::Button(u8"退出"))
{
ImGui::CloseCurrentPopup();
}
//添加其他的UI控件
ImGui::EndPopup();
}
if (ImGui::Button(u8"显示非模态窗口"))
{
ImGui::OpenPopup("MyWindow");
}
四、单元格的创建
1、静态创建单元格
ImGui::Begin(u8"表格测试");
{
if (ImGui::BeginTable("table1", 8, ImGuiTableFlags_Borders))
{
for (int row = 0; row < 4; row++)
{
//转到下一行
ImGui::TableNextRow();
for (int column = 0; column < 8; column++)
{
//指定列
ImGui::TableSetColumnIndex(column);
//显示单元格 内容
ImGui::Text(u8"单元 (%d,%d)", row, column); //单元格
}
}
ImGui::EndTable();
}
}
ImGui::End();
2、动态创建单元格
ImGui::Begin(u8"表格测试");
{
if (ImGui::BeginTable("table1", 3, ImGuiTableFlags_BordersInner))
{
for (int row = 0; row < 4; row++)
{
ImGui::TableNextRow();
for (int column = 0; column < 3; column++)
{
ImGui::TableSetColumnIndex(column);
char textid[265];
sprintf_s(textid, u8"##单元格(%d,%d)", row, column);
//添加
ImGui::InputText(textid, Buf[row][column], 256); //单元格
}
}
ImGui::EndTable();
//标志位置0
initonce = false;
}