本文導(dǎo)讀

ZDP1440是一款基于開(kāi)源GUI引擎的圖像顯示專用驅(qū)動(dòng)芯片，可以通過(guò)串口或者SPI與其他芯片通信。在一些儀器儀表中會(huì)有環(huán)形進(jìn)度條或者扇形進(jìn)度條的需求，本文將介紹如何提升這部分動(dòng)畫的幀率。

在一些使用場(chǎng)景中，需要在UI上顯示一個(gè)儀表盤，儀表盤上存在環(huán)形進(jìn)度條或扇形進(jìn)度條。在沒(méi)有GPU的平臺(tái)直接使用現(xiàn)有的控件實(shí)現(xiàn)，會(huì)調(diào)用軟件vg抗鋸齒算法，優(yōu)化顯示效果，導(dǎo)致顯示效率大幅降低。為了提升這部分應(yīng)用場(chǎng)景的幀率，我們制作了一個(gè)自定義控件（progress-circle-no-vg），不使用軟件vg繪圖，提升顯示效率。
使用此控件繪制，會(huì)額外占用進(jìn)度條圖片大小的32位色的內(nèi)存空間，且進(jìn)度條邊緣處會(huì)存在鋸齒。

顯示差異

下圖左側(cè)為未經(jīng)抗鋸齒處理的顯示效果，右側(cè)為經(jīng)抗鋸齒處理的顯示效果。鋸齒的寬度或高度最少為一個(gè)像素點(diǎn)大小，如果屏幕的像素密度較高，則基本不可見(jiàn)。

導(dǎo)入并安裝控件

新建好UI后，點(diǎn)擊“插件管理”，再點(diǎn)擊“導(dǎo)入”按鈕：

隨后選擇并打開(kāi)03.UI_build_project oolsawtk-widget-progress-circle-no-vg路徑下的project.json文件：

在“推薦”欄中找到新導(dǎo)入的自定義控件，點(diǎn)擊“安裝”：

等待安裝完成，在安裝成功的彈窗中點(diǎn)擊“刷新”按鈕：

已安裝的插件中就會(huì)新增progress-circle-no-vg，點(diǎn)擊插件，右側(cè)就會(huì)彈出該控件的使用說(shuō)明：

在“控件列表”的“自定義”欄中，出現(xiàn)安裝好的progress-circle-no-vg控件

控件的使用

以UI工程中自帶的“guage_bg.png”圖片為例，制作一個(gè)順時(shí)針旋轉(zhuǎn)的0~100的環(huán)形進(jìn)度條。根據(jù)控件的使用說(shuō)明，進(jìn)度條圖片為guage_bg、最大值為100、當(dāng)前值任意填寫、起始角度是135°、總角度為270°、圓心剛好為圖片中心：

在對(duì)應(yīng)位置填好參數(shù)，進(jìn)度條即可正常顯示，可為該進(jìn)度條設(shè)置動(dòng)畫或者在代碼中實(shí)時(shí)更新控件的值。

效果展示

為了使效果更加直觀，創(chuàng)建兩個(gè)窗口。在一個(gè)窗口中創(chuàng)建四個(gè)環(huán)形進(jìn)度條控件，在另一個(gè)窗口中創(chuàng)建四個(gè)自定義控件，增加同樣的動(dòng)畫，打開(kāi)幀率，觀察其幀率表現(xiàn)。

使用環(huán)形進(jìn)度條控件的窗口的幀率在15~20左右，而使用自定義控件的窗口幀率穩(wěn)定在60fps。

HMI-ZDP1440D串口屏開(kāi)發(fā)套件資料持續(xù)更新中。

HMI-ZDP1440D開(kāi)發(fā)套件已在微商城上架。