devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

J-0-ImGui的语法学习

作者：空白诗007 | 2024-06-22 02:23:35

赞

踩

imgui

一、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();

  • 1
  • 2

  (2)修改窗口的两种形式

   1）靠近的位置进行设置
 ImGui::Begin("1111");
 {
     //设置窗口位置
     ImVec2 pos = { 100, 100 };
     ImGui::SetWindowPos(pos); 
     ImVec2 nSize = { 300, 200 };
     ImGui::SetWindowSize(nSize);
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

  2）第二种带名字的形式进行修改
  //设置窗口位置
 ImVec2 pos = { 100, 100 };
 ImGui::SetWindowPos("1111", pos);
 ImVec2 nSize = { 300, 200 };
 ImGui::SetWindowSize("1111", nSize);

  • 1
  • 2
  • 3
  • 4
  • 5

 （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);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

2、按钮的语法

 (1)创建简单按钮
ImGui::Button（按钮题目， 按钮大小）;

  • 1

  1)只能响应左键点击的按钮
 bool IsClick = ImGui::Button("11111", ImVec2(80, 20));  
 if (IsClick)
 {
     MessageBoxA(NULL, "鼠标左键被按下了", 0, 0);
 }

  • 1
  • 2
  • 3
  • 4
  • 5

image.png

 (2)扩展版本EX版本（需要头文件"imgui_internal.h"）
ImGui::ButtonEx（按钮题目， 按钮大小,  具体的参数）;

  • 1
  1）创建响应右键的按钮
 bool IsClick2 = ImGui::ButtonEx("2222", ImVec2(160, 20), ImGuiButtonFlags_::ImGuiButtonFlags_MouseButtonRight);
  if (IsClick2)
  {
      MessageBoxA(NULL, "鼠标右键被按下了", 0, 0);
  }

  • 1
  • 2
  • 3
  • 4
  • 5

image.png

3、文本按钮

  (1)创建单行文本框
 ImGui::InputText()；

  • 1

  1）简单的文本框
  char BuffText[256] = "Init Edit";
 ImGui::InputText("111", IN OUT BuffText, sizeof(BuffText));

  • 1
  • 2

image.png

   2)InputText的高級用法（创建过滤文本框）
char BuffText2[256] = "Init Edit";
ImGui::InputText("222", IN OUT BuffText2, sizeof(BuffText2), ImGuiInputTextFlags_CallbackCharFilter, testEditCallback);

  • 1
  • 2
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;
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

 (2)创建多行文本框
ImGui::InputTextMultiline(名称, 缓冲区, 缓冲区大小, 文本框大小);

  • 1

   1）使用InputTextMultiline编写过滤多行文本框
char BuffText3[256] = "Init \n Edit";
ImGui::InputTextMultiline("Name", BuffText3, sizeof(BuffText3), ImVec2{ 200, 100 }, ImGuiInputTextFlags_CallbackCharFilter, testEditCallback);

  • 1
  • 2
 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;
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

4、复选框

 bool IsDown =  ImGui::Checkbox(描述, 状态);

  • 1

  (1)编写简单的复选框
 static bool Checkstate = FALSE;
 bool IsDown =  ImGui::Checkbox(u8"文字描述", &Checkstate);
 if (IsDown)
 {
     if (Checkstate)
     {
         //选中时代码
         MessageBoxA(NULL, "被选中", 0, 0);
     }
     else
     {
         //未选中时代码
         MessageBoxA(NULL, "未被选中", 0, 0);
     }
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

image.png

5、单选框

ImGui::RadioButton（标题， 条件）

  • 1

  (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;
  }
   

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

image.png

  (2)方式二：创建条件的复选框
 bool IsDown = ImGui::RadioButton(标题, 输入输出缓冲区, 判断值);
 条件：  IsDown为True时，判断值输入到缓冲区中， 输入输出缓冲区 == 判断值 则被选
中，      

  • 1
  • 2
  • 3
  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);
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

6、菜单按钮

  ImGui::BeginMenu(u8"菜单名字")
  ImGui::EndMenu();
  ImGui::BeginMenuBar()
  ImGui::EndMenuBar();

  • 1
  • 2
  • 3
  • 4

  (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();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

image.png

  (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();
        }
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

image.png

7、List控件

ImGui::ListBox（列表标题，&输出选项， 列表名称地址， 数量）
ImGui::BeginListBox(列表标题)；
ImGui::EndListBox();

  • 1
  • 2
  • 3

  (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();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

image.png

 (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();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

image.png

8、TreeNode控件

 ImGui::TreeNode("List boxes")
 ImGui::TreePop();

  • 1
  • 2

 (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();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

image.png、

9、页面控件

 ImGui::BeginTabBar(u8"页面组",  0)
 ImGui::EndTabBar();
ImGui::BeginTabItem(页标题)
 ImGui::EndTabItem();

  • 1
  • 2
  • 3
  • 4

  (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();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

image.png

 (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();
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

image.png

10、UI控件颜色设置

ImGui::PushStyleColor(ImGuiCol_Button, 0xFFFF0000);
ImGui::PopStyleColor();

  • 1
  • 2

 (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() 
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

image.png

 ImGui::PushStyleColor(ImGuiCol_Text, 0xFF000FFF);
 ImGui::Text(u8"hahahahahahahahahah");
 ImGui::PopStyleColor();

  • 1
  • 2
  • 3

image.png

11、滑块UI控件

 ImGui::SliderInt("名称", &返回值, 最小值,  最大值， 显示格式);

  • 1

  (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);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

image.png

  (2)创建浮点数滑块
static float OutValue3 = 30;
ImGui::SliderFloat("slider int", &OutValue3, 1, 60.0f, "~%0.1f~");

  • 1
  • 2

image.png

12、进度条控件

ImGui::ProgressBar(数值, 控件大小);

  • 1

  (1)方式一：创建精度条
 static float Value = 0.1f;
 Value = Value + 0.001f;
 ImGui::ProgressBar(Value, ImVec2(-1.0f, 0.0f));

  • 1
  • 2
  • 3

image.png

三、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");
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

image.png

 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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

image.png

四、单元格的创建

  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();

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

image.png

  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;
        }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

image.png

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/745001
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号