跳轉到主要內容

可縮放圖像

可縮放圖像(Scalable Image)是能夠繪製縮放版點陣圖的小部件。 只需更改小部件的寬度/高度即可調整圖像大小。 縮放圖像的品質取決於使用的渲染演算法。 可動態更改渲染演算法。

Note
  • 該小部件對MCU的負載有很大影響。
  • 該小部件不支援每像素1位元的色深。
  • 在模擬器中運行的可縮放圖像

    小部件組

    可縮放圖像位於 TouchGFX Designer 中的Images小部件組中。

    TouchGFX Designer 中的可縮放圖像

    屬性

    TouchGFX Designer 中可縮放圖像的屬性。

    屬性組屬性說明
    Name小部件的名稱Name是TouchGFX Designer和程式碼中使用的唯一識別碼
    LocationXY 指定小部件左上角相對于其父的位置。

    WH 指定小部件的寬度和高度。

    鎖定指定小部件是否應鎖定為其當前的X、Y、W和H。
    如果鎖定小部件,還會禁止通過螢幕與小部件進行交互。

    可見 指定小部件的可見性。 使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。
    Style樣式 指定小部件的預定義設置,用於將所選屬性設為預定義的值。
    這些樣式包含可免費使用的圖像
    Image縮放演算法指定縮放所選圖像使用的演算法。

    圖像指定小部件應使用的圖像。
    AppearanceAlpha 指定小部件的透明度。 小部件的Alpha值介於0和255之間。 0為完全透明,255為實心。
    Mixin可拖動 指定在運行時小部件是否可拖動。

    ClickListener 指定小部件被點擊時是否會呼叫callback函數。

    FadeAnimator 指定小部件是否可繪製其 Alpha 值變化的動畫。

    MoveAnimator 指定小部件是否可繪製 XY 值變化的動畫。

    交互

    TouchGFX Designer 中的可縮放圖像支援的操作和觸發。

    操作

    小部件特有的操作說明
    Resize widget調整小部件的寬度和高度。
    標準小部件操作說明
    Move widget隨時間的推移將小部件移動到新位置。
    Fade widget隨時間的推移改變小部件的Alpha值。
    Hide widget隱藏小部件(將可見性設置為false)。
    Show widget使隱藏的小部件可見(將可見性設置為true)。

    觸發條件

    可縮放圖像不會產生任何觸發條件。

    性能

    可縮放圖像主要靠 MCU 來縮放圖像。 因此,在大部分平臺上,會將可縮放圖像視為高效能需求的小部件。

    關於文字繪製性能的更多資訊,請閱讀通用UI元件性能一節。

    範例

    生成程式碼

    在生成的視圖基類的程式碼中,可以查看 Designer 是如何創建可縮放圖像的。

    Screen1ViewBase.cpp
    #include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
    #include "BitmapDatabase.hpp"

    Screen1ViewBase::Screen1ViewBase()
    {
    scalableImage.setBitmap(touchgfx::Bitmap(BITMAP_IMAGE_ID));
    scalableImage.setPosition(246, 36, 200, 200);
    scalableImage.setScalingAlgorithm(touchgfx::ScalableImage::NEAREST_NEIGHBOR);

    add(scalableImage);
    }

    void Screen1ViewBase::setupScreen()
    {

    }
    Tip
    可在使用者程式碼中使用這些函數以及 ScalableImage 類中提供的其他函數。 如果更改小部件的外觀,請必須呼叫 scalableImage.invalidate() 以強制重繪。

    TouchGFX Designer範例

    為了進一步瞭解可縮放圖像,請嘗試在 TouchGFX Designer 中使用下列 UI 範本之一創建新應用:

    TouchGFX Designer 中的縮放 UI 範本

    API參考