跳轉到主要內容

圖形引擎

TouchGFX圖形引擎的主要責任是在嵌入式設備的顯示器上繪製圖形。

本節將提供TouchGFX圖形引擎類型的概述及其工作原理的一些背景知識。

場景模型

圖形引擎主要可分為兩類。

  • 即時模式圖形引擎提供一個API,使應用能夠直接為顯示器繪製圖像。 應用負責確保在正確的時間啟動正確的繪製操作。
  • 保留模式圖形引擎使使用者能夠操縱所顯示元件的抽象模型。 引擎負責在合適的時間將此元件模型轉化為正確的圖形繪製操作。

TouchGFX遵循保留模式繪圖原則。 簡而言之,TouchGFX提供使用者可操縱的模型,然後TouchGFX負責將此模型轉化為渲染方法呼叫的優化集合。

保留模式圖形引擎

保留TouchGFX有許多優勢。 主要包括:

  • 易用性:保留圖形引擎易於使用。 使用者通過呼叫內部模型上的方法定址螢幕上的元件配置,而不考慮實際的繪製操作。
  • 性能:TouchGFX分析場景模型,並優化在螢幕上實現模型所需的繪製呼叫。 這包括特意不繪製隱藏元件,只繪製和傳輸元件有變化的部分,以及管理影像緩衝等。
  • 狀態管理: TouchGFX持續追蹤場景模型中的活躍部分。 這反過來為使用者優化場景模型內容提供了便利性。

TouchGFX保留模式圖形方案的主要不足之處在於:

  • 記憶體消耗:呈現場景模型會佔用一些存儲空間。 TouchGFX通過分析場景模型和優化相應渲染成果達到其性能水準,通常每秒渲染60幀。 為了減少TouchGFX場景模型使用的存儲空間,TouchGFX設計者做了大量努力。 在典型應用中,該模型所需的存儲空間遠低於1千位元組。

操縱模型

場景模型由元件組成。

小工具樹

模型中的每個元件都只有一個關聯的父元件。 父元件本身也是場景模型的一部分。 這樣的一個模型統稱為一棵

我們通常會將此樹中的元件稱為UI元件或小工具。

從應用的角度來看,將通過設置和操縱場景模型中的小工具來更新顯示的圖形。 下面是一個為按鈕設置位置和圖像,並將按鈕添加到場景模型的範例:

myButton.setXY(100,50);
myButton.setBitmaps(Bitmap(BITMAP_BUTTON_RELEASED_ID), Bitmap(BITMAP_BUTTON_PRESSED_ID));
add(myButton);

發出繪製指令

最終,在渲染場景模型時,TouchGFX會使用它的繪製API。 此繪製API包含繪製圖形的基本元素(如方塊、圖像、文字、線條、多邊形、有紋理的三角形等)的方法。

例如TouchGFX中的Button小工具,在渲染時,使用drawPartialBitmap方法繪製圖像。 在TouchGFX中繪製按鈕小工具的原始程式碼大致如下:

touchgfx/widgets/button.cpp
void Button::draw(const Rect& invalidatedArea) const
{
// calculate the part of the bitmap to draw
api.drawPartialBitmap(bitmap, x, y, part, alpha);
}

詳情請查看touchgfx/widgets/button.cpp中的實際原始程式碼。

TouchGFX包含繪製API的優化實現。 例如,drawPartialBitmap方法使用底層硬體(Chrom-ART,如果有)繪製點陣圖。

在用新的小工具類型擴展場景模型時,可使用這些API繪製方法。 參見關於創建自訂小工具的章節。

繪製API方法的實現是平臺特定的,並針對每種特定MCU進行了高度優化。

主迴圈

許多遊戲引擎和圖形引擎的工作方式(特別是TouchGFX)都可以看作是無線迴圈。

TouchGFX的主迴圈中有三種主要活動:

  • 採集事件: 採集觸控式螢幕事件、物理按鈕按下事件和來自後臺系統的消息等。
  • 更新場景模型:對採集的事件做出回應,更新模型的位置、動畫、色彩和圖像等
  • 渲染場景模型:重繪模型中已更新的部分,並使之顯示在顯示器上

主迴圈的圖解版本:

主迴圈

主迴圈的每次執行都表示應用的一個tick。

平臺功能

由於TouchGFX旨在運行於所有STM32嵌入式設置上,因此上述活動可以被定制。

  • 通過專用抽象層處理事件採集。 此抽象層的定制是“TouchGFX AL開發”章節的主題。
  • 模型更新完全取決於應用。 UI開發中包含關於如何執行此更新的主題。
  • 影像緩衝的圖形渲染由TouchGFX負責,通常無需進行自訂。 像素從影像緩衝到顯示器的傳輸是平臺特定的,參見“開發板啟動搭建”“TouchGFX AL開發”瞭解如何針對特定平臺進行自訂。

請繼續閱讀以獲取關於TouchGFX主迴圈的更多資訊。