本文導讀

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

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

顯示差異

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

導入并安裝控件

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

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

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

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

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

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

控件的使用

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

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

效果展示

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

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

HMI-ZDP1440D串口屏開發套件資料持續更新中。

HMI-ZDP1440D開發套件已在微商城上架。