跳轉到主要內容

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和程式碼中使用的唯一識別碼
LocationXY 指定小部件左上角相對于其父的位置。

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

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

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

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

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

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

交互

下面的部分介紹了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參考