国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

基于ImGui 的跨平臺(tái)可視化用戶界面設(shè)計(jì)與研究

2023-12-29 02:54:46戴錦程
信息記錄材料 2023年11期
關(guān)鍵詞:用戶界面跨平臺(tái)代碼

戴錦程

(西北民族大學(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)新的革新和突破。

猜你喜歡
用戶界面跨平臺(tái)代碼
自然用戶界面在智能家居系統(tǒng)中的應(yīng)用路徑創(chuàng)新研究:生成式人工智能技術(shù)的調(diào)節(jié)作用
包裝工程(2023年16期)2023-08-25 11:40:58
基于CiteSpace的國(guó)外用戶界面體驗(yàn)圖譜量化分析
跨平臺(tái)APEX接口組件的設(shè)計(jì)與實(shí)現(xiàn)
創(chuàng)世代碼
創(chuàng)世代碼
創(chuàng)世代碼
創(chuàng)世代碼
UI用戶界面色彩設(shè)計(jì)研究
流行色(2017年12期)2017-10-26 03:08:44
基于QT的跨平臺(tái)輸電鐵塔監(jiān)控終端軟件設(shè)計(jì)與實(shí)現(xiàn)
基于OPC跨平臺(tái)通信的電機(jī)監(jiān)測(cè)與診斷系統(tǒng)
马公市| 贵德县| 叙永县| 都江堰市| 大渡口区| 台南市| 平昌县| 景德镇市| 会宁县| 万载县| 木里| 密山市| 浦北县| 靖边县| 乌苏市| 堆龙德庆县| 泰和县| 内黄县| 德昌县| 南溪县| 汕头市| 桃江县| 桓仁| 苗栗县| 什邡市| 南部县| 应城市| 泗阳县| 鲜城| 博湖县| 娄底市| 朔州市| 安塞县| 东山县| 九寨沟县| 大石桥市| 贵德县| 鄂尔多斯市| 江口县| 蓬溪县| 龙州县|