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

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

image.png

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

image.png

3、文本按钮

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

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

image.png

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

image.png

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

image.png

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

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

image.png

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

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

image.png

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

image.png

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

12、进度条控件

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

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

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

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

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

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

image.png

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值