メイン･コンテンツまでスキップ

Tiled Image（タイル化画像）

説明​

Tiled Imageは、タイル化されたビットマップを表示することができるシンプルなウィジェットです。 つまり、与えられたビットマップよりもTiled Imageの方が大きい場合、そのビットマップが水平および垂直方向に繰り返されます。 ビットマップはバックグラウンドとアルファブレンド可能で、透明な領域を持つことができます。

シミュレータで実行されるTiled Image

ウィジェット･グループ​

Tiled Imageは、TouchGFX DesignerのImagesウィジェット･グループ内にあります。

TouchGFX DesignerのTiled Image

プロパティ​

TouchGFX DesignerのTiled Imageのプロパティは以下のとおりです。

プロパティ･グループプロパティの説明
Nameウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
LocationXおよびYは、親を基準としてウィジェットの左上隅の位置を指定します。

WおよびHは、ウィジェットの幅と高さを指定します。

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。

Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
StyleStyleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。
これらのスタイルには、自由に使用できる画像が含まれています。
ImageImageは、ウィジェット内で使用する画像を指定します。
繰り返しパターンのある画像が推奨されます。
OffsetXおよびYは、タイルの描画開始位置となる画像のオフセットを指定します。
AppearanceAlphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は、0～255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。

FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。

MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

インタラクション​

以下のセクションでは、Tiled Imageによってサポートされるアクションとトリガについて説明します。

アクション​

ウィジェット固有のアクション説明
Resize widgetウィジェットの幅と高さを変更します。
標準のウィジェット･アクション説明
Move widget時間の経過に伴ってウィジェットを新しい位置に移動します。
Fade widget時間の経過に伴ってウィジェットのアルファ値を変更します。
Hide widgetウィジェットを非表示にします（可視性をfalseに設定します）。
Show widget非表示のウィジェットを表示します（可視性をtrueに設定します）。

トリガ​

Tiled Imageはトリガを発行しません。

パフォーマンス​

Tiled Imageは画像描画に依存し、ほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。
Tiled Imageは同じ画像を何度も再描画することで、ウィジェットの領域を覆います。 このため、ソース画像が小さいと描画する回数が多くなります。

画像描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

例​

生成済みコード​

View基底クラスの生成済みコードを見ると、TouchGFX DesignerによるTiled Imageの設定方法がわかります。

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参照