【imgui基础学习】Widgets/Basic实现

    在学习imgui给出的Demo中，自己手动实现了一下Widgets/Basic选项里面的组件，并且做了一些简单的修改。

 

在贴代码之前，简答说一下遇到的一点点坑：

Text系列函数显示汉字的解决方法，已经在另外一篇博客中阐述：【Imgui基础学习】组件的使用之Text

但是，有可能我们需要在代码里面使用我们输入的汉字

比如现在我们需要用户去输入一个文件名，然后使用用户输入的文件名去创建一个新的文件，但是我们之前显示汉字的方法是在字符串的前面加“u8”，这样字符串就会按照UTF-8的编码去显示，这个时候就能显示汉字。

但是当我们在代码里面使用的时候就会是乱码，这个时候创建出来的文件名字也是乱码，所以我们在使用输入的中文字符串之前，应该将其转为gbk编码。

下面是代码以及接口的一些注释：

// 这是一个utf-8转gbk文件的函数（网上找的，感觉可用，好人一生平安）
string Utf8ToGbk(const char *src_str)
{
	int len = MultiByteToWideChar(CP_UTF8, 0, src_str, -1, NULL, 0);
	wchar_t* wszGBK = new wchar_t[len + 1];
	memset(wszGBK, 0, len * 2 + 2);
	MultiByteToWideChar(CP_UTF8, 0, src_str, -1, wszGBK, len);
	len = WideCharToMultiByte(CP_ACP, 0, wszGBK, -1, NULL, 0, NULL, NULL);
	char* szGBK = new char[len + 1];
	memset(szGBK, 0, len + 1);
	WideCharToMultiByte(CP_ACP, 0, wszGBK, -1, szGBK, len, NULL, NULL);
	string strTemp(szGBK);
	if (wszGBK) delete[] wszGBK;
	if (szGBK) delete[] szGBK;
	return strTemp;
}

void MyClass::CreateTestBasic()
{
	ImGui::Begin("Basic_Windiow");

	// 勾选框
	static bool isChecked = false;
	ImGui::Checkbox("CheckBox", &isChecked);
	if (isChecked)
	{
		//可以使用isChecked来判断勾选框是否勾选，从而进行判断逻辑
	}

	// 原型勾选框
	static int num = -1;
	ImGui::RadioButton("RadioA", &num, 0); ImGui::SameLine();
	ImGui::RadioButton("RadioB", &num, 1); ImGui::SameLine();
	ImGui::RadioButton("RadioC", &num, 2);
	ImGui::NewLine();

	// 几个按钮，悬停，点击的颜色都不同（使用PushID创建）
	for (int i = 0; i < 5; i++)
	{
		ImGui::SameLine();
		ImGui::PushID(i);
		// button原本的颜色
		ImGui::PushStyleColor(ImGuiCol_Button, (ImVec4)ImColor::HSV(i / 7.0f, 0.6f, 0.6f));
		// 悬停的颜色
		ImGui::PushStyleColor(ImGuiCol_ButtonHovered, (ImVec4)ImColor::HSV(i / 7.0f, 0.7f, 0.7f));
		// 点击的颜色
		ImGui::PushStyleColor(ImGuiCol_ButtonActive, (ImVec4)ImColor::HSV(i / 7.0f, 0.8f, 0.8f));
		ImGui::Button("button");
		ImGui::PopStyleColor(3);
		ImGui::PopID();
	}


	// 可以连续响应的按钮，也就是摁住不松手一直在响应的按钮
	static int cnt = 0;
	float spacing = ImGui::GetStyle().ItemInnerSpacing.x;
	ImGui::PushButtonRepeat(true);
	// 连续响应的普通按钮
	if (ImGui::Button(u8"普通按钮")) cnt++;
	// 箭头按钮
	ImGui::AlignTextToFramePadding();
	if (ImGui::ArrowButton("left", ImGuiDir_Left))cnt--;
	ImGui::SameLine();
	ImGui::Text("%d", cnt);
	ImGui::SameLine();
	if (ImGui::ArrowButton("right", ImGuiDir_Right))cnt++;
	ImGui::PopButtonRepeat();

	// 一条实线，用来进行分割
	ImGui::Separator();

	ImGui::LabelText(u8"条目", u8"可选项");
	// 下拉菜单：
	{
		const char* itemName[] = { u8"文件1",u8"文件2",u8"文件3",u8"EnglishFile" };
		static int index = 0;
		// index就是当前选择的选项的序号：0，1，2，3......
		ImGui::Combo(u8"选择文件", &index, itemName, IM_ARRAYSIZE(itemName));
	}

	// 文字输入框（没有提示字符）
	{
		bool isCreate = false;
		static char str[128] = u8"你好";
		// 第一个参数：输入框后面显示的标识符，可为空
		// 第二个参数：一段缓存，存放输入的字符
		// 第三个参数：缓存的大小
		ImGui::InputText("", str, IM_ARRAYSIZE(str));
		ImGui::SameLine();
		if (ImGui::Button(u8"确定"))
		{
			// 点击确定，创建文件
			std::string path = "e:/ADMIN/";
			std::string fileName = path + str + ".txt";
			fileName = Utf8ToGbk(fileName.c_str());
			FILE *fp = fopen(fileName.c_str(), "wb");
		}

	}

	// 文字输入框（带提示字符）
	{
		bool isCreate = false;
		static char str_Hint[128] = u8"";
		// 第一个参数：输入框后面显示的标识符，可为空,
		// 第二个参数：默认显示的字体
		// 第三个参数：开辟的一段缓存
		// 第四个参数：开辟缓存的大小
		// 这里第一个参数作为一个新ID的输入框，以免和上面的输入框重复
		ImGui::InputTextWithHint("##Hint", u8"请在此输入文件名", str_Hint, IM_ARRAYSIZE(str_Hint));
		ImGui::SameLine();
		if (ImGui::Button(u8"确定_Hint"))
		{
			// 点击确定，创建文件
			std::string path = "e:/ADMIN/";
			std::string fileName = path + str_Hint + ".txt";
			fileName = Utf8ToGbk(fileName.c_str());
			FILE *fp = fopen(fileName.c_str(), "wb");
		}

	}

	{
		// 数字输入，自带加键按键，也可以键盘输入
		static int i0 = 123;
		ImGui::InputInt("input int", &i0);

		// float输入器，第三个参数是step，第四个暂时不清楚，第五个格式
		static float f0 = 1.0;
		ImGui::InputFloat("input float", &f0, 0.01f, 1.0f, "%.3f");

		// 输入分开的三个值，输入颜色信息的时候可能有用
		// 输入的三个值，对应的是数组前三个值，第四个值 ，暂时不知道为毛
		static float vec4a[4] = { 0.10f, 0.20f, 0.30f, 0.44f };
		ImGui::InputFloat3("input float3", vec4a);

		// 可输入，可滑动（但是不是很灵敏），将输入的数值向下取整
		static int i1 = 50, i2 = 50;
		ImGui::DragInt("drag int", &i1, 1);

		// 第三个到第五个参数依次是：step，最小值，最大值，显示格式
		ImGui::DragInt("drag int 0..100", &i2, 1, 0, 100, "%d%%");

		// slider float
		// slider int
		// ...... 原理参数什么的都差不多

		// 类似与RN的ColorPicker
		// rgb的颜色选择
		static float col1[3] = { 1.0f,1.0f,1.0f };
		// rgba的颜色选择
		static float col2[4] = { 0.4f,0.7f,0.0f,0.5f };
		ImGui::ColorEdit3("color 1", col1);
		ImGui::ColorEdit4("color 2", col2);
	}


	ImGui::End();
}

最后附上我的效果图：

Basic效果图