UIで画像を使用する

Image コンポーネントは、PNG や JPEG などのビットマップ形式、SVG などのベクターグラフィック形式など、サポートされているいくつかの形式で UI に画像を追加するために使用されます。デザインに画像ファイルを使用するには、まずAssetsに追加する必要があります：

1. Assets > を選択します。
2. 画像ファイルを選択し、Open を選択します。
3. Add Resources ダイアログで画像を保存する場所を選択します。
4. OK を選択します。

画像がAssets で利用可能になります。

画像ファイルをAssets からNavigator または2D ビューにドラッグすると、Qt Quick Designer は自動的に、画像ファイルへのパスをProperties のSource フィールドの値として設定した Image コンポーネントのインスタンスを作成します。

サポートされている URL スキームを使用して URL からイメージをロードするには、Source フィールドに URL を指定します。

ボーダー画像コンポーネントを使うと、PNGファイルなどの画像をボーダーや背景として表示できます。ボーダー画像を使ってボタンを作成する方法の詳細については、スケーラブルなボタンとボーダーを作成するを参照してください。

GIFなどのアニメーション画像を表示する必要がある場合は、Animated Imageコンポーネントを使用します。

画像サイズ

画像Size が指定されていない場合、ソース画像のサイズが自動的に使用されます。

デフォルトでは、コンポーネントの幅と高さを明示的に設定すると、画像はそのサイズに拡大縮小されます。この動作を変更するには、Fill mode フィールドの値を設定します。画像は、引き伸ばしたり、並べたり、指定サイズに一様に拡大縮小したりすることができます（切り抜きあり／なし）。Pad オプシ ョ ンは、 画像が変換 さ れない こ と を意味 し ます。

Smooth を選択すると、拡大縮小や変形時に画像を滑らかにフィルタリングします。スムースフィルタリングはより良いビジュアル品質を与えますが、ハードウェアによっては遅くなる場合があります。画像が自然な大きさで表示される場合、このプロパティは視覚的にも性能的にも影響しません。

画像の拡大縮小や変形時にミップマップフィルタリングを使用するには、Mipmap を選択します。ミップマップ・フィルタリングは、スムース・フィルタリングに比べて、縮小時の視覚的品質が向上しますが、画像の初期化時とレンダリング時の両方でパフォーマンスが犠牲になる可能性があります。

画像に EXIF オリエンテーションなどの画像変換メタデータを自動的に適用する場合はAuto transform を選びます。

ソースサイズ

Source size プロパティは、フルフレーム画像のスケーリングされた幅と高さを指定します。画像の描画を拡大縮小するSize プロパティの値とは異なり、このプロパティは、大きな画像が必要以上にメモリを使用しないように、読み込まれた画像に対して保存される最大ピクセル数を設定します。これにより、設定されたサイズに関わらず、メモリ上の画像が設定されたソースサイズより大きくなることはありません。

画像の実際のサイズがソースサイズより大きい場合、画像は縮小されます。サイズの1つの次元だけが0より大きく設定されている場合、他の次元はソース画像のアスペクト比を保持するように比例して設定されます。Fill mode はこれとは無関係です。

ソースサイズの幅と高さの両方が設定されている場合、画像は画像のアスペクト比を維持したまま、指定されたサイズ内に収まるように縮小されます。し か し 、PreserveAspectCrop かPreserveAspectFit が用い ら れてい る と き は、 画像は、 切 り 抜 き やはめ込みに最適なサ イ ズに合 う よ う 縮小 さ れます。

ソースが本質的にスケーラブルな画像（SVGなど）の場合、ソースサイズは本質的なサイズに関係なく、読み込まれる画像のサイズを決定します。SVG のレンダリングは他の画像形式のレンダリングに比べて遅いので、source size プロパティを動的に変更することは避けてください。

ソースが拡大縮小不可能な画像（JPEG など）の場合、読み込まれる画像はソースサイズが指定するサイズより大きくはならない。フォーマットによっては、画像全体が実際にメモリに読み込まれることはありません。

画像の整列

Alignment H とAlignment V フィールドで、画像を水平方向と垂直方向に整列させることができます。デフォルトでは、画像は中央に配置されます。

Mirror を選択すると、画像が水平方向に反転し、効果的にミラー画像が表示されます。

パフォーマンス

デフォルトでは、ローカルで利用可能な画像は即座にロードされ、ロードが完了するまでUIはブロックされます。大きな画像を読み込む場合は、Asynchronous を選択して、優先順位の低いスレッドで画像を読み込む方が望ましい場合があります。画像がローカルリソースではなくネットワークから取得された場合、自動的に非同期で読み込まれます。

画像は内部でキャッシュされ共有されるため、複数の画像が同じSource を持っている場合、画像のコピーは1つだけ読み込まれます。

ボーダー画像

Border Image コンポーネントはImage コンポーネントの機能を拡張したものです。各画像の一部を拡大縮小したり、タイリングしたりすることで、画像からボーダーを作成するために使用されます。ソース画像は9つの領域に分割され、それぞれスケーリングまたはタイリングされます。隅の領域はまったく拡大縮小されませんが、 水平・垂直領域はTile mode H とTile mode V フィールドの値、 あるいはその両方に従って拡大縮小されます。

Stretch オプシ ョ ンは、 利用可能な領域に収ま る よ う 画像を拡縮 し ます。Repeat オプシ ョ ンは、 空間がな く な る ま で画像を タ イ ル化 し ます。最後の画像が切 り 落 と さ れない よ う にす る には、 必要に応 じ て画像を縮小す る オプシ ョ ン （Round ） を選びます。

Border left,Border right,Border top,Border bottom の各フィールドで、画像の領域を指定する。領域は、ボーダーとして使用するソース画像の各辺からの距離を記述します。

ボーダー画像の使用例については、BorderImage コンポーネントのドキュメントを参照してください。

アニメーション画像

Animated Image コンポーネントはImageコンポーネントの機能を拡張し、GIFファイルに保存されているような、一連のフレームを含むイメージとして保存されているアニメーションを再生する方法を提供します。

Speed フィールドでアニメーションの速度を設定します。速度は、元のアニメーション画像の速度に対するパーセンテージで測定されます。デフォルトの速度は1.0で、元の速度を意味します。

アニメーションを再生するには、Playing を選択します。

アニメーションを一時停止するには、 (Paused) を選択します。

Cache を選択すると、アニメーションの各フレームがキャッシュされます。長いアニメーションや大きなアニメーションを再生し、メモリーを節約したい場合は、チェックボックスをオフにしてください。

画像データがシーケンシャルデバイス（ソケットなど）から来る場合、アニメーション画像はキャッシュが有効な場合のみループできます。

詳しくは、次のビデオをご覧ください：

画像コンポーネントの概要

次の表は、画像の追加に使用できるコンポーネントの一覧です。Location列には、Components でコンポーネントを見つけることができるタブ名が含まれています。MCUサポート列は、どのコンポーネントがMCUでサポートされているかを示しています。

アイコン	名称	場所	MCU サポート	目的
	Animated Image	デフォルト・コンポーネント - 基本	なし	GIFファイルに保存されているような、一連のフレームを含むアニメーションを保存する画像。
	Border Image	デフォルト・コンポーネント - 基本	あり	枠線または背景として使用される画像。
	Image	デフォルトのコンポーネント - 基本	はい	PNGやJPEGなどのビットマップ形式やSVGなどのベクターグラフィックス形式など、サポートされているいずれかの形式の画像。