本文導(dǎo)讀

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

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

顯示差異

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

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

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

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

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

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

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

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

控件的使用

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

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

效果展示

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

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

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

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