IMGUI快速入门
资源大全
官方资源
- 源码+例子：ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies (github.com)
- python绑定：pyimgui/pyimgui: Cython-based Python bindings for dear imgui (github.com)
- 调试IMGUI自身：调试工具 ·ocornut/imgui 维基 (github.com)
- 在线示例，可定位到代码：ImGui Manual (pthom.github.io)
- Getting Started · ocornut/imgui Wiki (github.com)
其它
每个控件都带图示例：ImGui 简单使用 - 无形深空 - 博客园 (cnblogs.com)
快速入门
使用vs打开下载的dear imgui，demo中13个project，他们之间没有差异，只是dx或opengl等版本不一样，示例代码在imgui_demo.cpp ShowDemoWindow
右键菜单(popups)
if (ImGui::BeginPopupContextItem()) // <-- use last item id as popup id
{
selected = n;
ImGui::Text("This a popup for \"%s\"!", names[n]);
if (ImGui::Button("Close"))
ImGui::CloseCurrentPopup();
ImGui::EndPopup();
}
ImGui::SetItemTooltip("Right-click to open popup");
阅读习惯：控件Label右置，如何左置？
pyimgui.begin("test window")
# default label
pyimgui.input_int("default label", 0)
# left label
pyimgui.text("left label")
pyimgui.same_line()
pyimgui.input_int("##left label item", 0)
pyimgui.end()
中文处理
中文乱码
中文乱码：TO_UTF8_CSTR("显示或隐藏挂点及挂件"));
输入框无法输入中文
字体要支持中文，否则只能用英文输入法，对源码修改
imgui.InputText
TreeNodeEx vs TreeNode
有两种树控件，建议使用新版的TreeNodeEx ，下面解释下这两种树控件的区别
TreeNode
TreeNode是一个较旧的函数，它显示一个简单的树，没有交互性，如下所示，
TreeNodeEx
TreeNodeEx是一个较新的函数，它通过枚举支持大量选项，ImGuiTreeNodeFlags可用来设置当前选中状态
ImGuiTreeNodeFlags flag = ImGuiTreeNodeFlags_DefaultOpen;//树默认是打开的
if (HAS_CHILDREN)
{
flags |= ImGuiTreeNodeFlags_Leaf;//没有子节点的就不显示箭头
}
flags |= ImGuiTreeNodeFlags_OpenOnArrow;//选择非叶节点不会切换选中状态
if (IS_SELECTED)
{
flags |= ImGuiTreeNodeFlags_Selected; //高亮选中当前节点
}
if (ImGui::TreeNodeEx("root", flag)) //这里返回的bool是树节点是否处于打开状态，而不是点击状态
{
// Call ImGui::TreeNodeEx() recursively to populate each level of children
if (ImGui::IsItemClicked())
{
// 当节点被点击时触发事件
}
ImGui::TreePop(); // 在结尾处必须要的
}
资料：ImGui 树节点 •TreeNode与TreeNodeEx
布局Layout
有以下方法用来布局
- SameLine
- SetCursorX
- table或列
SameLine
// Aligned to arbitrary position. Easy/cheap column.
IMGUI_DEMO_MARKER("Layout/Basic Horizontal Layout/SameLine (with offset)");
ImGui::Text("Aligned");
ImGui::SameLine(150); ImGui::Text("x=150");
ImGui::SameLine(300); ImGui::Text("x=300");
ImGui::Text("Aligned");
ImGui::SameLine(150); ImGui::SmallButton("x=150");
ImGui::SameLine(300); ImGui::SmallButton("x=300");
固定坐标，窗口拉大坐标也不改变
table
请使用新的table api，文档：新表 API （1.80 #3740 ·Ocornut/Imgui (github.com)，支持功能如下：
- 边框和奇数行/偶数行背景颜色选项，鼠标滑过的高亮
- 隐藏特定的列，可以调整列的大小
- 排序，每个表头都可以排序
可以看table / Advanced这个例子
按钮无法点击(ID冲突)
ImGui隐式维护ID，控件树中的控件路径被hash来标识一个控件
每个控件的接口一般都有label，是该控件的ID，ID可以是字符串（label参数），索引，或者指针
所以传空串就会导致无法交互，解决办法是用##XXX来标识，##后的内容在显示时被忽略
因为复杂的控件其实维护了状态，比如树节点，有开关状态，所以在帧之间需要标识，这个控件调用就是这个控件
错误示例
pyimgui.begin("test window")
# ID conflict
if pyimgui.button("button"): # ID = hash of ("test window", "button")
IINFO("button1")
if pyimgui.button("button"): # ID = hash of ("test window", "button")
IINFO("button2")
pyimgui.end()
这个示例中，两个button的Label(ID)都叫button，因为这个Label也是ID，相同ID冲突可能导致其中一个button无法响应点击事件或同时响应事件。
解决办法
Label中添加"##"，##后的内容不会显示在面板上，可以在Label后添加"##ID"内容来做ID区分，如：
if pyimgui.button("button##foo1"): # ID = hash of ("test window", "button##foo1")
IINFO("button1")
if pyimgui.button("button##foo2"): # ID = hash of ("test window", "button##foo2")
IINFO("button2")
##和###
Label中，"##ID"后的内容不会显示在面板上
您可能需要使用“###”运算符构建一个字符串，以保留带有变量标签的常量 ID）
static char name[32] = "Label1";
char buf[64];
sprintf(buf, "Button: %s###Button", name); / ### operator override ID ignoring the preceding label
ImGui::Button(buf); //显示的是Button:Label1
双击事件
但是碰到个问题，在TreeNodeEx的子节点中添加双击后，无法默认选中这个节点
is_selected = False
def test():
opened = imgui.TreeNodeEx(name, flags=flags)
if imgui.Selectable(name,is_selected,imgui.ImGuiSelectableFlags_AllowDoubleClick):
if imgui.IsMouseDoubleClicked() and getattr(entity, 'model', None): #双击显示与隐藏
entity.model.visible = not entity.model.visible
FAQ
itempick的作用还需要再看看
热门相关：美味的相遇 惹火小辣妻：老公，用力点 霸道女皇爱上我 千夫斩 傲世武皇