IMGUI快速入门

资源大全

官方资源

  1. 源码+例子:ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies (github.com)
  2. python绑定:pyimgui/pyimgui: Cython-based Python bindings for dear imgui (github.com)
  3. 调试IMGUI自身:调试工具 ·ocornut/imgui 维基 (github.com)
  4. 在线示例,可定位到代码:ImGui Manual (pthom.github.io)
  5. 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

有以下方法用来布局

  1. SameLine
  2. SetCursorX
  3. 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冲突)

https://github.com/ocornut/imgui/blob/master/docs/FAQ.md#q-why-is-my-widget-not-reacting-when-i-click-on-it

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的作用还需要再看看

热门相关:美味的相遇   惹火小辣妻:老公,用力点   霸道女皇爱上我   千夫斩   傲世武皇