跳轉到主要內容

Tiled Image

說明​

Tiled Image 是能夠顯示平鋪點陣圖的簡單小部件。 這意味著當 Tiled Image 大於提供的點陣圖時，會在水準和垂直方向重複點陣圖。 點陣圖可與背景進行 Alpha 混合，並可包含透明區域。

在模擬器中運行的 Tiled Image

小部件組​

Tiled Image 位於 TouchGFX Designer 中的Images小部件組中。

TouchGFX Designer 中的 Tiled Image

屬性​

TouchGFX Designer 中 Tiled Image 的屬性。

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

W 和 H 指定小部件的寬度和高度。

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

可見 指定小部件的可見性。 使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。
Style樣式 指定小部件的預定義設置，用於將所選屬性設為預定義的值。
這些樣式包含可免費使用的圖像。
ImageX 和Y指定平鋪繪圖起始處圖像的偏移量。
建議使用包含重複圖樣的圖像。
OffsetX 和Y指定平鋪繪圖起始處圖像的偏移量。
AppearanceAlpha 指定小部件的透明度。 小部件的Alpha值介於0和255之間。 0為完全透明，255為實心。
Mixin可拖動 指定在運行時小部件是否可拖動。

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

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

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

交互​

下面的部分介紹了Tiled Image支援的操作和觸發條件。

操作​

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

觸發條件​

Tiled Image不會產生任何觸發條件。

性能​

Tiled Image 依賴於圖像繪圖，在大部分平臺上，會將其視為執行速度較快的小部件。
Tiled Image 會多次重新繪製同一圖像，以覆蓋小部件的區域。 因此，源圖像越小，圖像繪製次數越多。

關於圖像繪製性能的更多資訊，請閱讀通用UI元件性能一節。

範例​

生成程式碼​

在為View基類生成的程式碼中，可以看到TouchGFX Designer如何設置按鈕。

mainViewBase.cpp
#include <gui_generated/main_screen/mainViewBase.hpp>
#include "BitmapDatabase.hpp"

mainViewBase::mainViewBase()
{

    tiledImage.setBitmap(touchgfx::Bitmap(BITMAP_BLUE_TEXTURES_IRONGRIP_ID));
    tiledImage.setPosition(35, 36, 50, 50);
    tiledImage.setOffset(0, 0);

    add(tiledImage);
}

void mainViewBase::setupScreen()
{

}
Tip
您可以在用戶程式碼中使用TiledImage類中的這些函數和其他可用函數。 如果更改了小部件的外觀，請必須呼叫 tiledImage.invalidate() 以強制重繪。

用戶程式碼​

以下程式碼範例介紹了如何通過持續調整handleTickEvent() 中的偏移將運動動畫繪製到 Tiled Image 中

mainView.cpp
#include <gui/main_screen/mainView.hpp>

mainView::mainView()
{

}

void mainView::setupScreen()
{
    mainViewBase::setupScreen();
}

void mainView::tearDownScreen()
{
    mainViewBase::tearDownScreen();
}

void mainView::handleTickEvent()
{
    int x = tiledImage.getXOffset();
    int y = tiledImage.getYOffset();
    tiledImage.setOffset(x + 1, y + 1);
    tiledImage.invalidate();
}

API參考​

Further reading
  • TiledImage類的API參考