戴錦程

（西北民族大學(xué)數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院 甘肅 蘭州 730030）

0 引言

隨著數(shù)字化轉(zhuǎn)型的快速發(fā)展，軟件行業(yè)成為了當(dāng)今經(jīng)濟(jì)中最具活力和潛力的領(lǐng)域之一。 在這個(gè)充滿機(jī)遇和挑戰(zhàn)的領(lǐng)域，優(yōu)秀的用戶體驗(yàn)是一個(gè)至關(guān)重要的環(huán)節(jié)，因?yàn)樗梢灾苯佑绊戃浖a(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力和商業(yè)價(jià)值。 而實(shí)現(xiàn)優(yōu)秀用戶體驗(yàn)的過(guò)程中，用戶界面設(shè)計(jì)則是其中最關(guān)鍵的方面之一。 一個(gè)簡(jiǎn)潔、易用、美觀的用戶界面能夠讓用戶更輕松地理解和使用軟件，提高效率和便捷性。 然而，在實(shí)際開(kāi)發(fā)過(guò)程中，設(shè)計(jì)出符合用戶需求和預(yù)期的用戶界面卻不是一件容易的事情。

為了解決這些問(wèn)題，本文提出了一種基于即時(shí)模式圖形用戶界面（immediate mode graphical user interface，ImGui）的跨平臺(tái)可視化用戶界面設(shè)計(jì)方法。 ImGui 是一種高效、輕量級(jí)的用戶界面設(shè)計(jì)庫(kù)，適用于多種編程語(yǔ)言和操作系統(tǒng)平臺(tái)。 它采用即時(shí)模式繪圖技術(shù)，使用戶界面渲染速度更快且更容易實(shí)現(xiàn)。 該方法可以幫助開(kāi)發(fā)者更輕松、高效地設(shè)計(jì)出優(yōu)秀的用戶界面。 通過(guò)使用圖形化界面設(shè)計(jì)工具，開(kāi)發(fā)人員可以快速創(chuàng)建和編輯用戶界面，并在不同的操作系統(tǒng)和平臺(tái)上運(yùn)行。 這種方法還允許開(kāi)發(fā)者通用一套代碼庫(kù)，在跨多個(gè)平臺(tái)時(shí)實(shí)現(xiàn)一致性，從而提高代碼的可維護(hù)性和可擴(kuò)展性。

1 ImGui 框架的介紹

ImGui 又稱Dear ImGui，相比于傳統(tǒng)的應(yīng)用程序開(kāi)發(fā)框架（QtToolkit， Qt） 等圖形用戶界面（graphical user interface， GUI）設(shè)計(jì)工具，它是一種輕量級(jí)的開(kāi)發(fā)框架，是不依賴于外部庫(kù)的即時(shí)模式GUI 圖形開(kāi)發(fā)工具。

1.1 ImGui 框架的優(yōu)點(diǎn)

（1）易于使用：ImGui 使用C++編寫，且核心代碼量較少，設(shè)計(jì)簡(jiǎn)單，易于學(xué)習(xí)和使用。 用戶不需要專業(yè)的圖形設(shè)計(jì)知識(shí)，只需基本的圖形學(xué)知識(shí)即可輕松上手。

（2）跨平臺(tái)：ImGui 被設(shè)計(jì)為與任何圖形應(yīng)用程序編程接口（application programming interface， API）集成，使它能夠在各種不同的平臺(tái)之間進(jìn)行移植，包括Windows、Linux、MacOS X、iOS、Android 等操作系統(tǒng)。

（3）輕量級(jí)高效：ImGui 專注于提供高效簡(jiǎn)潔的用戶界面（user interface， UI）設(shè)計(jì)，不需要一些其他的龐大的GUI 庫(kù)。

（4）低開(kāi)銷：ImGui 是一種“即時(shí)模式”GUI 框架，它并不創(chuàng)建和保存應(yīng)用程序中的GUI 對(duì)象。 它只是在每一幀中生成必要的內(nèi)容，使它具有非常低的開(kāi)銷。

（5）可定制性強(qiáng)：ImGui 框架提供了大量的自定義選項(xiàng)和插件式的擴(kuò)展功能，使用戶可以完全控制GUI 的外觀和功能，從而創(chuàng)造出獨(dú)特的用戶體驗(yàn)。

（6）易于調(diào)試：ImGui 為用戶提供了完整的調(diào)試工具，使用戶可以更輕松地調(diào)試UI 的實(shí)現(xiàn)，并最終得到非常高效的可執(zhí)行文件。

1.2 ImGui 框架的缺點(diǎn)

使用者必須編寫大量代碼來(lái)管理GUI 對(duì)象的創(chuàng)建和銷毀［1］，例如開(kāi)發(fā)一個(gè)項(xiàng)目，經(jīng)常需要?jiǎng)?chuàng)建許多個(gè)GUI 小部件，如果數(shù)據(jù)非常大，GUI 對(duì)象的創(chuàng)建和銷毀速度慢會(huì)導(dǎo)致UI 響應(yīng)緩慢；除此之外，與其他UI 庫(kù)相比，ImGui 的功能相對(duì)簡(jiǎn)單，只提供了一些基本控件和圖形繪制功能，不能滿足所有的UI 需求，需要在應(yīng)用中進(jìn)行二次開(kāi)發(fā)，由于ImGui 的設(shè)計(jì)思路適用于需要快速創(chuàng)建原型或小型項(xiàng)目，因此不適合用于大型、復(fù)雜的工程項(xiàng)目。

2 ImGui 在不同場(chǎng)景下的應(yīng)用

ImGui 在游戲開(kāi)發(fā)中有著廣泛的應(yīng)用，可以作為游戲引擎的默認(rèn)UI 框架，例如Unity3D、Unreal Engine 等都支持集成ImGui，極低的渲染消耗使ImGui 只需要一次性渲染整個(gè)UI，這種方式比傳統(tǒng)GUI 所需的大量事件處理和重復(fù)渲染要少得多，從而減少了開(kāi)放式圖形庫(kù)（open graphics library， OpenGL）和DirectX API 的調(diào)用次數(shù)。 同時(shí)ImGui 提供了極大的繪圖控制，包括對(duì)布局、對(duì)鼠標(biāo)、鍵盤事件的全控制、Texture Pack、樣式、語(yǔ)言等。 這些都使得ImGui 可以根據(jù)游戲引擎的特定需求提高性能和渲染效率；ImGui 可以輕松實(shí)現(xiàn)動(dòng)態(tài)布局，能夠根據(jù)分辨率、顯示比例和其他變化因素自動(dòng)適應(yīng)UI 布局，從而更好地適應(yīng)各種屏幕大小。 此外，與傳統(tǒng)的圖形界面庫(kù)不同，ImGui很容易定制。 用戶可以輕松地編寫定制功能，使其滿足程序的特定需求。

由于其超低的UI 開(kāi)銷和省時(shí)省力的特點(diǎn)，ImGui 在快速開(kāi)發(fā)用戶界面方面非常有優(yōu)勢(shì)。 另外，ImGui 的易于定制和跨平臺(tái)支持也使其成為開(kāi)發(fā)人員的不二之選，能夠快速創(chuàng)建自定義UI 元素，以適應(yīng)各種特定的應(yīng)用程序需求。 此外，ImGui 的安全性和社區(qū)支持度高，也使得開(kāi)發(fā)人員更加信任它。 總之，ImGui 是一個(gè)十分優(yōu)秀的用戶界面框架，也是開(kāi)發(fā)人員完成各種領(lǐng)域的應(yīng)用程序所欣賞的工具。

2.1 Web 項(xiàng)目中實(shí)現(xiàn)ImGui 界面

Web Assembly 是一種低級(jí)的類匯編語(yǔ)言，具有緊湊的二進(jìn)制格式，可以接近原生的性能運(yùn)行，并為諸如C／C++／rust／go 等語(yǔ)言提供一個(gè)編譯目標(biāo)，以便它們可以在Web 瀏覽器上運(yùn)行［2］。 它被設(shè)計(jì)為可以與JavaScript 共存，允許兩者一起工作，而ImGui 是一個(gè)用于創(chuàng)建用戶界面的工具庫(kù)，它可以用于創(chuàng)建圖形化用戶界面和各種控件，通過(guò)將C++編寫的Dear ImGui 項(xiàng)目編譯為Web Assembly（WASM）二進(jìn)制文件，并使用Emscripten 將其部署到Web 上，可以在瀏覽器中運(yùn)行ImGui 界面，同時(shí)利用GLES 3.0 實(shí)現(xiàn)圖形渲染。 此組合的優(yōu)勢(shì)在于無(wú)需安裝任何本地軟件，在Web 上可以實(shí)現(xiàn)包括用戶交互界面、數(shù)據(jù)監(jiān)測(cè)、數(shù)據(jù)可視化等功能，且在不同平臺(tái)上都能夠獲得不錯(cuò)的性能表現(xiàn)［3］，見(jiàn)圖1。 傳統(tǒng)的基于JavaScript 的Vue.js框架，用于構(gòu)建現(xiàn)代Web 應(yīng)用程序，具有易用性、可擴(kuò)展性和可重用性等優(yōu)點(diǎn)，它可以幫助設(shè)計(jì)者快速構(gòu)建出美觀的用戶界面。 然而，Vue. js 的一個(gè)明顯劣勢(shì)是它的性能，Vue.js 需要在瀏覽器中解析和執(zhí)行大量的JavaScript 代碼，這可能會(huì)導(dǎo)致較慢的加載速度和響應(yīng)時(shí)間［4］，相比之下Dear ImGui+Web Assembly+GLES 3.0 在實(shí)現(xiàn)Web 的一些類似數(shù)據(jù)監(jiān)測(cè)系統(tǒng)用戶界面時(shí)，可以提供更快的加載速度、響應(yīng)時(shí)間和渲染性能，為其實(shí)現(xiàn)方案提出了另一種思路。

圖1 Web 界面展示

2.2 在游戲調(diào)試中使用ImGui

ImGui 庫(kù)允許在游戲運(yùn)行時(shí)直接調(diào)試和修改游戲狀態(tài)和變量，其原理是通過(guò)在游戲循環(huán)中實(shí)時(shí)創(chuàng)建、更新和渲染用戶界面，使用戶能夠在游戲運(yùn)行時(shí)查看和修改游戲狀態(tài)和變量。

ImGui 的工作原理可以歸納為以下幾個(gè)步驟：

（1）在游戲的初始化函數(shù)中創(chuàng)建ImGui 上下文。

（2）在每幀更新之前調(diào)用ImGui 函數(shù)以更新界面狀態(tài)。

（3）在游戲的渲染循環(huán)中調(diào)用ImGui 函數(shù)，以顯示調(diào)試信息。

（4）在游戲結(jié)束時(shí)清除ImGui 上下文。

在游戲運(yùn)行時(shí)，ImGui 庫(kù)通過(guò)創(chuàng)建、更新和渲染界面來(lái)實(shí)時(shí)顯示和修改游戲狀態(tài)和變量。 ImGui 的界面是通過(guò)在每幀更新時(shí)動(dòng)態(tài)生成的，因此可以隨時(shí)添加或刪除組件。 ImGui 提供了各種不同的組件，如文本框、按鈕、滑塊、下拉菜單等，可以方便用于游戲調(diào)試。 在ImGui 庫(kù)中，所有的UI 元素都是立即模式，意味著每幀都必須重新創(chuàng)建并渲染。 ImGui 庫(kù)使用GPU 加速來(lái)渲染UI 元素，因此其性能較高。

此外，由于ImGui 庫(kù)的代碼量很小，所以它可以輕松地集成到游戲引擎中，在主流的開(kāi)發(fā)引擎Unity 和Unreal Engile 中可以使用ImGui 插件或第三方插件來(lái)添加ImGui界面。 可以輕松地將ImGui 界面集成到游戲中。 見(jiàn)圖2。同時(shí)，ImGui 插件還支持與編輯器進(jìn)行交互，并在運(yùn)行時(shí)實(shí)時(shí)查看和修改游戲狀態(tài)和變量，以幫助開(kāi)發(fā)者更輕松地調(diào)試和開(kāi)發(fā)游戲，而不會(huì)影響游戲的性能和穩(wěn)定性。 總之，ImGui 庫(kù)是一種快速、靈活且易于使用的調(diào)試工具，從而加快開(kāi)發(fā)進(jìn)程和提高游戲質(zhì)量，部分示例代碼如下：

圖2 調(diào)用ImGui 調(diào)試游戲

2.3 使用ImGui 開(kāi)發(fā)登錄器

在應(yīng)用程序開(kāi)發(fā)中，登錄器是一個(gè)必不可少的組件。傳統(tǒng)的登錄器通常使用傳統(tǒng)的GUI 庫(kù)（如Windows Forms、WPF、Qt 等）來(lái)實(shí)現(xiàn)。 這種方式需要編寫大量的代碼，同時(shí)還需要花費(fèi)很長(zhǎng)的時(shí)間來(lái)創(chuàng)建和調(diào)試GUI 界面，增加了開(kāi)發(fā)時(shí)間和開(kāi)發(fā)成本［5-6］。 相比之下，使用ImGui 開(kāi)發(fā)登錄器具有以下優(yōu)點(diǎn)：

（1）易于實(shí)現(xiàn)和快速迭代：使用ImGui 可以快速構(gòu)建簡(jiǎn)單而美觀的GUI 界面。 ImGui 的API 簡(jiǎn)單易用，使用者只需幾行代碼就可以創(chuàng)建和修改GUI 元素。 此外，ImGui提供了實(shí)時(shí)預(yù)覽功能，可以讓開(kāi)發(fā)者快速看到所做的更改，加快了迭代速度。

（2）跨平臺(tái)支持：傳統(tǒng)的GUI 庫(kù)通常是為特定平臺(tái)設(shè)計(jì)的，這意味著在不同平臺(tái)上使用時(shí)需要進(jìn)行適配和調(diào)試。 相比之下，ImGui 是一個(gè)跨平臺(tái)的GUI 庫(kù)，可以在各種平臺(tái)上使用，包括Windows、MacOS、Linux 等。

（3）更少的開(kāi)發(fā)成本：傳統(tǒng)的GUI 庫(kù)需要編寫大量的代碼來(lái)創(chuàng)建和修改GUI 界面。 相比之下，ImGui 的API 簡(jiǎn)單易用，減少了編寫代碼的時(shí)間和工作量。 此外，ImGui還提供了各種自定義主題和控件，可以快速創(chuàng)建獨(dú)特的GUI 界面，從而減少了開(kāi)發(fā)成本。

（4）更好的性能表現(xiàn)：傳統(tǒng)的GUI 庫(kù)通常需要在渲染時(shí)重新計(jì)算并繪制所有GUI 元素，這可能會(huì)影響性能。相比之下，ImGui 使用了高效的渲染機(jī)制和基于GPU 的即時(shí)渲染技術(shù)，可以提高渲染性能和繪制效率，從而提高了應(yīng)用程序的運(yùn)行速度和用戶體驗(yàn)［7］。

總之，相比傳統(tǒng)的GUI 庫(kù)，使用ImGui 開(kāi)發(fā)應(yīng)用程序登錄器具有更低的開(kāi)發(fā)成本、更好的性能表現(xiàn)、更快的迭代速度和跨平臺(tái)支持等優(yōu)點(diǎn)。 圖3 為使用ImGui 制作的登錄器。

圖3 使用ImGui 制作的登錄器

3 結(jié)語(yǔ)

綜上所述，基于ImGui 的跨平臺(tái)可視化用戶界面設(shè)計(jì)具有高度的靈活性和可定制性，能夠大大提高開(kāi)發(fā)效率和用戶體驗(yàn)，通過(guò)不斷的實(shí)踐和探索，可以深入理解其內(nèi)部原理和實(shí)現(xiàn)方式。 在未來(lái)，ImGui 框架將會(huì)在更多的領(lǐng)域中得到廣泛應(yīng)用，并且持續(xù)為用戶界面設(shè)計(jì)和開(kāi)發(fā)領(lǐng)域帶來(lái)新的革新和突破。