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 を指定します。

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

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

画像サイズ

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

デフォルトでは、コンポーネントの幅と高さを明示的に設定すると、画像はそのサイズにスケーリングされます。この動作を変更するには、Fill mode フィールドの値を設定してください。画像は、トリミングの有無にかかわらず、指定されたサイズに均一に引き伸ばされたり、タイル状に並べられたり、スケーリングされたりすることができます。Pad オプションは、画像が変形されないことを意味します。

Smooth を選択すると、画像の拡大縮小や変形時にスムーズなフィルタリングが行われます。スムーズなフィルタリングは視覚的な品質を向上させますが、一部のハードウェアでは処理速度が低下する可能性があります。画像が元のサイズで表示される場合、このプロパティは視覚的品質やパフォーマンスに影響を与えません。

画像の拡大縮小や変形時にミップマップフィルタリングを使用するには、[Mipmap ] を選択します。ミップマップフィルタリングは、縮小時にスムースフィルタリングと比較して視覚的な品質が向上しますが、画像の初期化時およびレンダリング中にパフォーマンスの低下を招く可能性があります。

EXIFの向きなどの画像変換メタデータを自動的に適用する場合は、「Auto transform 」を選択します。

ソースサイズ

Source size プロパティは、フルフレーム画像のスケーリング後の幅と高さを指定します。 画像の描画をスケーリングする `Size ` プロパティの値とは異なり、このプロパティは、読み込まれた画像に対して保存されるピクセルの最大数を設定し、大きな画像が不要なメモリを消費しないようにします。これにより、設定されたサイズに関係なく、メモリ内の画像が設定されたソースサイズを超えないようにします。

画像の実際のサイズがソースサイズよりも大きい場合、画像は縮小されます。サイズのいずれか一方の次元のみが 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 」が選択されている場合、アニメーションのすべてのフレームがキャッシュされます。長時間のアニメーションや大容量のアニメーションを再生し、メモリを節約したい場合は、このチェックボックスのチェックを外してください。

画像データがシーケンシャルデバイス（ソケットなど）から取得される場合、「Animated Image」はキャッシュが有効になっている場合にのみループ再生が可能です。

詳細については、以下の動画をご覧ください：

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

以下の表は、画像を追加するために使用できるコンポーネントの一覧です。「Location」列には、Components 内でそのコンポーネントが見つかるタブ名が表示されています。「MCU support」列は、MCUでサポートされているコンポーネントを示しています。

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