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

Image（画像）

TouchGFXのImageは、関連付けられた画像ファイルにあるピクセル･データを描画します。 使用の前に画像ファイルをプロジェクトにインポートする必要があります。

Imageのサイズは関連付けられた画像ファイルによって定義され、実行時に変更することはできません。 表示される画像を異なるサイズにする必要がある場合は、インポートした関連付けられた画像のサイズを変更する必要があります。 これはパフォーマンス上の理由によるものです。

実行時に画像のサイズを変更する必要がある場合は、ScalableImageを使用します。 スケーリング画像の描画パフォーマンスは、非スケーリング画像よりもかなり低いことに注意してください。

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

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

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

TouchGFX DesignerのImage

プロパティ​

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

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

WおよびHは、ウィジェットの幅と高さを指定します。 ウィジェットのサイズは、関連付けられた画像のサイズによって決まります。

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

Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
StyleStyleは、ウィジェットの事前定義のセットアップを指定します。選択プロパティが事前定義された値に設定されます。
これらのスタイルには、自由に使用できる画像が含まれています。
ImageImageは、関連付けられる画像を指定します。 Projectタブでインポートした画像から選択するか、Skinsタブで無料のTouchGFXの画像のセットから選択します。
AppearanceAlphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は、0～255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

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

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

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

インタラクション​

TouchGFX DesignerでImageによってサポートされるアクションとトリガは以下のとおりです。

アクション​

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

トリガ​

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

パフォーマンス​

Imageは画像描画に依存するため、ほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。

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

例​

生成済みコード​

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

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

Screen1ViewBase::Screen1ViewBase()
{
    imageName.setXY(0, 0);
    imageName.setBitmap(Bitmap(BITMAP_STM32_LOGO_ID));

    add(imageName);
}
Tip
- ユーザ･コードでは、これらの関数や、Imageクラスで使用可能なその他の関数を使用できます。 ウィジェットの外観を変更する場合には、 imageName.invalidate() を呼び出して、再描画を行う必要があることを忘れないでください。

TouchGFX Designerの例​

Imageをさらに探索するには、次のUIテンプレートのいずれかを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

TouchGFX DesignerのKnightHitsZombie Game UIテンプレート

API参照​

Further reading
  • ImageクラスのAPI参照