Image QML Type
画像を表示します。もっと見る...
Import Statement: | import QtQuick |
Inherits: | |
Inherited By: |
プロパティ
- asynchronous : bool
- autoTransform : bool
- cache : bool
- currentFrame : int
- fillMode : enumeration
- frameCount : int
- horizontalAlignment : enumeration
- mipmap : bool
- mirror : bool
- mirrorVertically : bool
(since 6.2)
- paintedHeight : real
- paintedWidth : real
- progress : real
- retainWhileLoading : bool
(since 6.8)
- smooth : bool
- source : url
- sourceClipRect : rect
- sourceSize : size
- status : enumeration
- verticalAlignment : enumeration
詳細説明
Imageタイプは画像を表示します。
画像のソースは、source プロパティを使用して URL として指定します。画像は、PNG や JPEG のようなビットマップ形式、SVG のようなベクターグラフィックス形式など、Qt がサポートする標準画像形式のいずれかで提供できます。アニメーション画像を表示する必要がある場合は、AnimatedSprite またはAnimatedImage を使用してください。
width とheight プロパティが指定されていない場合、イメージは自動的に読み込まれたイメージのサイズを使用します。デフォルトでは、アイテムの幅と高さを指定すると、画像はそのサイズに拡大縮小されます。この動作は、fillMode プロパティを設定することで変更することができ、代わりに画像を引き伸ばして並べることができます。
使用例
次の例は、Imageタイプの最も簡単な使い方です。
import QtQuick Image { source: "pics/qtlogo.png" }
圧縮テクスチャファイル
基礎となるグラフィックスAPIの実装がランタイムでサポートしている場合、イメージは圧縮テクスチャファイルで提供することもできます。内容は単純なRGB(A)フォーマットの2Dテクスチャでなければなりません。サポートされる圧縮スキームは、基盤となるドライバとGPUによってのみ制限されます。以下のコンテナファイル形式がサポートされています:
PKM
(Qt 5.10 以降)KTX
(Qt 5.11 以降)ASTC
(Qt 5.13 以降)
注意: テクスチャファイル内の画像の意図された垂直方向は、一般的によく定義されていません。テクスチャ圧縮ツールによって、いつ入力画像の垂直反転を行うかのデフォルトやオプションが異なります。テクスチャファイルの画像が上下逆さまに表示される場合、アセット調整プロセスで反転を切り替える必要があるかもしれません。または、transform プロパティで適切な変換を適用するか、mirrorVertically プロパティを設定することで、Image 要素自体を反転させることもできます:
transform: [ Translate { y: -myImage.height }, Scale { yScale: -1 } ]
または
mirrorVertically: true
注意: 半透明のオリジナル画像を Qt Quick で正しく表示するには、テクスチャ圧縮の前にアルファの事前乗算が必要です。これは、次の ImageMagick コマンドラインで実行できます:
convert foo.png \( +clone -alpha Extract \) -channel RGB -compose Multiply -composite foo_pm.png
KTX
などのコンテナ形式と、コンテナファイルに格納されている実際のテクスチャデータの形式を混同しないでください。たとえば、KTX
ファイルの読み込みは、実行時に使用される GPU ドライバに関係なく、すべてのプラットフォームでサポートされています。しかし、これはファイル内のデータで使用される圧縮テクスチャフォーマットがランタイムでサポートされることを保証するものではありません。例えば、KTX ファイルがETC2 RGBA8
というフォーマットで圧縮されたデータを含み、実行時に使用される 3D グラフィックス API 実装がETC2
圧縮テクスチャをサポートしていない場合、Image 項目は何も表示しません。
注意: 圧縮テクスチャフォーマットのサポートは Qt の管理下にはなく、圧縮テクスチャデータがターゲッ ト環境に適したフォーマットで提供されるかどうかは、アプリケーションやデバイスの開発者次第 です。
圧縮フォーマットのサポートがプラットフォームに特有であると思わないでください。また、特定のプラットフォームで使用されているドライバや3D API実装に固有である可能性もあります。実際には、同じプラットフォーム(たとえば、Windows)上の異なる3DグラフィックスAPI(たとえば、VulkanとOpenGL)の実装は、同じハードウェアのための同じベンダーから、圧縮されたテクスチャフォーマットの異なるセットを提供するかもしれません。
デスクトップ環境(Windows、macOS、Linux)だけをターゲットにする場合、一般的な推奨は、DXTn
/BCn
フォーマットの使用を検討することです。これらのプラットフォーム上のDirect 3D、Vulkan、OpenGL、およびMetalの実装の中で、これらのフォーマットが最も広くサポートされている傾向があるからです。対照的に、モバイルデバイスや組み込みデバイスをターゲットとする場合、ETC2
またはASTC
フォーマットがより良い選択となる可能性が高いです。なぜなら、これらのフォーマットは通常、これらのハードウェア上の OpenGL ES 実装によってサポートされているからです。
デスクトップ、モバイル、および組み込みハードウェアを横断して実行する予定のアプリケーションは、圧縮されたテクスチャの使用を慎重に計画し、設計する必要があります。従って、アプリケーションはプラットフォームに基づいて分岐し、そこで適切なフォーマットで圧縮テクスチャを使用するか、場合によっては圧縮テクスチャの使用をスキップする必要があるでしょう。
ファイル拡張子の自動検出
source URL が存在しないローカルファイルやリソースを示している場合、Image 要素はファイル拡張子の自動検出を試みます。サポートされている画像ファイル拡張子のいずれかをsource URL に追加して既存のファイルを見つけることができれば、そのファイルが読み込まれます。
ファイル検索では、まず圧縮されたテクスチャコンテナファイルの拡張子の検索を試みます。検索に失敗すると、conventional image file types のファイル拡張子で検索を試みます:
// Assuming the "pics" directory contains the following files: // dog.jpg // cat.png // cat.pkm Image { source: "pics/cat.png" // loads cat.png } Image { source: "pics/dog" // loads dog.jpg } Image { source: "pics/cat" // normally loads cat.pkm, but if no OpenGL, loads cat.png instead. }
この機能により、異なるターゲットプラットフォーム上で、異なるタイプのイ メージアセットファイルのデプロイが容易になります。これは、アプリケーションのパフォーマンスを調整したり、異なるグラフィックハードウェアに適応させたりするのに便利です。
この機能は Qt 5.11 で導入されました。
パフォーマンス
デフォルトでは、ローカルで利用可能なイメージは即座にロードされ、ロードが完了するまでユーザーインターフェースはブロックされます。大きな画像を読み込む場合は、asynchronous プロパティを有効にして、優先順位の低いスレッドで画像を読み込む方が望ましい場合があります。
画像がローカル・リソースではなくネットワークから取得された場合は、自動的に非同期でロードされ、progress とstatus プロパティが適宜更新されます。
イメージは内部でキャッシュされ共有されるため、複数のイメージアイテムが同じsource を持つ場合、イメージのコピーは1つだけ読み込まれます。
注意: QMLのユーザーインターフェースにおいて、画像はしばしば最大のメモリ使用量となります。ユーザインタフェースの一部を構成しない画像は、sourceSize プロパティによってそのサイズを制限することが推奨されます。これは、外部ソースから読み込んだり、ユーザが提供したりするコンテンツでは特に重要です。
Qt Quick Examples - Image Elements,QQuickImageProvider,QImageReader::setAutoDetectImageFormat()も参照してください 。
プロパティの説明
これらのプロパティは、実際に描画される画像のサイズを保持します。ほとんどの場合、width
やheight
と同じですが、Image.PreserveAspectFit やImage.PreserveAspectCrop を使用する場合、paintedWidth
やpaintedHeight
は、Image アイテムのwidth
やheight
よりも小さくなったり大きくなったりします。
horizontalAlignment : enumeration |
verticalAlignment : enumeration |
画像の水平方向と垂直方向の配置を設定します。デフォルトでは、画像は中央揃えになります。
horizontalAlignment
の有効な値はImage.AlignLeft
、Image.AlignRight
、Image.AlignHCenter
です。verticalAlignment
の有効な値はImage.AlignTop
、Image.AlignBottom
、Image.AlignVCenter
です。
currentFrame は現在表示 さ れてい る フ レーム。デフォルトは 。画像に複数のフレームが含まれている場合は、 と の間の数値を設定することで、別のフレームを表示することができます。0
0
frameCount - 1
frameCount は画像のフレーム数です。たいていの画像にはフレームが1つしかありません。
asynchronous : bool |
ローカルファイルシステム上の画像を別スレッドで非同期に読み込むかどうかを指定します。デフォルト値はfalseで、画像の読み込み中にユーザーインターフェイスのスレッドがブロックされます。asynchronous を true に設定すると、画像がすぐに表示されることよりも、レスポンシブなユーザインタフェースを維持する方が望ましい場合に便利です。
このプロパティは、ローカルファイルシステムから読み込まれた画像に対してのみ有効であることに注意してください。ネットワークリソース(HTTPなど)を介して読み込まれた画像は、常に非同期で読み込まれます。
autoTransform : bool |
このプロパティは、EXIFオリエンテーションなどの画像変換メタデータを画像に自動的に適用するかどうかを保持します。
デフォルトでは、このプロパティは false に設定されています。
cache : bool |
画像をキャッシュするかどうかを指定します。デフォルト値はtrueです。cache を false に設定すると、大きな画像を扱うときに便利です。小さな 'ui 要素' 画像を犠牲にしてキャッシュされないようにするためです。
fillMode : enumeration |
このプロパティを設定することで、ソース画像のサイズがアイテムと異なる場合の動作を定義できます。
定数 | 説明 |
---|---|
Image.Stretch | 画像がフィットするように拡大縮小される |
Image.PreserveAspectFit | 画像は切り抜きなしでフィットするように一様に拡大縮小されます。 |
Image.PreserveAspectCrop | 画像は、必要に応じてトリミングされながら、均等に拡大縮小されます。 |
Image.Tile | 画像を水平方向と垂直方向に複製します。 |
Image.TileVertically | 画像が水平方向に引き伸ばされ、垂直方向にタイル状に並べられる |
Image.TileHorizontally | 画像が垂直方向に引き伸ばされ、水平方向にタイル状に配置される。 |
Image.Pad | 画像は変換されない |
ストレッチ(デフォルト)Image { width: 130; height: 100 source: "qtlogo.png" } | |
PreserveAspectFitImage { width: 130; height: 100 fillMode: Image.PreserveAspectFit source: "qtlogo.png" } | |
プリザーブアスペクトクロップImage { width: 130; height: 100 fillMode: Image.PreserveAspectCrop source: "qtlogo.png" clip: true } | |
タイルImage { width: 120; height: 120 fillMode: Image.Tile horizontalAlignment: Image.AlignLeft verticalAlignment: Image.AlignTop source: "qtlogo.png" } | |
タイル垂直Image { width: 120; height: 120 fillMode: Image.TileVertically verticalAlignment: Image.AlignTop source: "qtlogo.png" } | |
水平タイルImage { width: 120; height: 120 fillMode: Image.TileHorizontally verticalAlignment: Image.AlignLeft source: "qtlogo.png" } |
デフォルトでは、clip
はfalse
であることに注意してください。これは、fillMode がPreserveAspectCrop
に設定されていても、アイテムがその境界矩形の外側に描画される可能性があることを意味します。
Qt Quick Examples - Image Elementsも参照してください 。
mipmap : bool |
このプロパティは、拡大縮小や変形時に画像がミップマップフィルタリングを使用するかどうかを保持します。
ミップマップフィルタリングは、平滑化よりも縮小時の視覚的品質が向上しますが、(画像の初期化時とレンダリング時の両方で)パフォーマンスが犠牲になる可能性があります。
デフォルトでは、このプロパティは false に設定されています。
smoothも参照してください 。
mirror : bool |
このプロパティは、画像を水平方向に反転させる(事実上ミラー画像を表示する)かどうかを保持します。
デフォルト値は false です。
mirrorVertically : bool |
このプロパティは、画像を垂直方向に反転させる(実質的にミラー画像を表示する)かどうかを保持します。
デフォルト値は false です。
このプロパティは Qt 6.2 で導入されました。
progress : real |
このプロパティは、0.0 (何もロードされていない) から 1.0 (完了) までの、画像のロードの進行状況を保持します。
statusも参照してください 。
retainWhileLoading : bool |
このプロパティは、source プロパティが変更され、読み込みが非同期で行われる場合の動作を定義します。これは、asynchronous プロパティがtrue
に設定されている場合、または画像がローカル・ファイル・システム上にない場合です。
retainWhileLoading
がfalse
(デフォルト)の場合、古い画像は即座に破棄され、新しい画像のロード中にコンポーネントはクリアされます。true
に設定すると、古い画像は保持され、新しい画像の準備ができるまで表示されたままになります。
このプロパティを有効にすると、新しい画像の読み込みに時間がかかる場合にちらつきを避けることができます。その代償として、新しい画像がロードされている間、二重のバッファリングのためにメモリが余分に使用されます。
このプロパティは Qt 6.8 で導入されました。
smooth : bool |
このプロパティは、拡大縮小や変形時に画像をスムースフィルタリングするかどうかを保持します。スムースフィルタリングはより良いビジュアル品質を提供しますが、ハードウェアによっては遅くなる場合があります。画像が自然なサイズで表示される場合、このプロパティは視覚的にもパフォーマンス的にも影響を与えません。
デフォルトでは、このプロパティはtrueに設定されています。
mipmapも参照してください 。
source : url |
Image は、Qt がサポートする URL スキームから読み込まれる、Qt がサポートするあらゆる画像フォーマットを扱うことができます。
URL は、絶対 URL でも、コンポーネントの URL からの相対 URL でもかまいません。
QQuickImageProvider 、Compressed Texture Files 、Automatic Detection of File Extensionも参照して ください。
sourceClipRect : rect |
このプロパティが設定されている場合、ロードされるソース画像の矩形領域が保持されます。
sourceClipRect
はsourceSize プロパティと連動し、画像の一部だけを読み込む必要がある場合にシステムリソースを節約します。
Rectangle { width: ... height: ... Image { anchors.fill: parent source: "reallyBigImage.svg" sourceSize.width: 1024 sourceSize.height: 1024 sourceClipRect: Qt.rect(100, 100, 512, 512) } }
上の例では、まず概念的に SVG グラフィックを 1024x1024 に拡大縮小し、次に上端と左端から 100 ピクセルの位置から 512x512 ピクセルの関心領域を切り出している。このようにsourceSize
がスケールを決定するが、実際の出力画像は 512x512 ピクセルである。
画像フォーマットによっては、指定した領域だけをレンダリングすることでCPU時間を節約できるものもあります。また、画像全体を最初に読み込んでから、指定した領域に切り抜く必要があるものもある。
このプロパティをクリアして画像全体を再読み込みするには、sourceClipRect
をundefined
に設定します。
注意 :このプロパティを動的に変更すると、画像ソースがディスクキャッシュにない場合、ネットワークからも再読み込みされる可能性があります。
注意: サブピクセルクリッピングはサポートされていません:与えられた矩形はQImageReader::setScaledClipRect() に渡されます。
sourceSize : size |
このプロパティは、フルフレーム画像のスケーリングされた幅と高さを保持します。
画像の描画をスケーリングするwidth とheight プロパティとは異なり、このプロパティは、大きな画像が必要以上にメモリを使用しないように、読み込まれた画像に対して保存されるピクセルの最大数を設定します。例えば、イメージのwidth やheight の値に関係なく、メモリ上のイメージが 1024x1024 ピクセルより大きくならないようにします:
Rectangle { width: ... height: ... Image { anchors.fill: parent source: "reallyBigImage.jpg" sourceSize.width: 1024 sourceSize.height: 1024 } }
画像の実寸が sourceSize よ り 大 き い と き は、 画像は縮小 さ れます。サイズの1つの次元だけが0より大きく設定されている場合、もう1つの次元は、ソース画像のアスペクト比を維持するように比例して設定されます。(fillMode はこれとは無関係です)。
sourceSize.widthとsourceSize.heightの両方が設定されている場合、画像は指定されたサイズ内に収まるように縮小され(PreserveAspectCropまたはPreserveAspectFitが使用されていない限り、切り抜き/フィットに最適なサイズに合わせて縮小されます)、画像の縦横比が維持されます。拡大縮小後の画像の実際のサイズは、Item::implicitWidth とItem::implicitHeight で知ることができます。
ソースが本質的にスケーラブルな画像(SVGなど)の場合、このプロパティは本質的なサイズに関係なく、読み込まれる画像のサイズを決定します。SVGのレンダリングは画像に比べて遅いので、このプロパティを動的に変更することは避けてください。
ソースが非拡張画像(例えば JPEG)の場合、読み込まれる画像はこのプロパティが指定するサイズより大きくはならない。いくつかのフォーマット(現在のところ JPEG のみ)では、画像全体が実際にメモリに読み込まれることはない。
sourceClipRect プロパティも設定されている場合、sourceSize
がスケールを決定しますが、クリップ矩形のサイズにクリップされます。
sourceSize をundefined
に設定することで、画像の自然なサイズにクリアできます。
注意: このプロパティを動的に変更すると、画像ソースがディスクキャッシュにない場合、ネットワークから再読み込みされる可能性があります。
Qt Quick Examples - Pointer Handlersも参照してください 。
status : enumeration |
このプロパティは、画像のロード状態を保持します。以下のいずれかになります:
定数 | 説明 |
---|---|
Image.Null | 画像が設定されていない |
Image.Ready | 画像が読み込まれた |
Image.Loading | 画像は現在ロード中です。 |
Image.Error | 画像の読み込み中にエラーが発生した |
このステータスを使用して、最新情報を提供するか、ステータスの変更に何らかの形で応答してください。例えば、次のようなことができます:
- 状態変化を引き起こす:
State { name: 'loaded'; when: image.status == Image.Ready }
onStatusChanged
シグナルハンドラを実装する:Image { id: image onStatusChanged: if (image.status == Image.Ready) console.log('Loaded') }
- ステータス値にバインドする:
Text { text: image.status == Image.Ready ? 'Loaded' : 'Not loaded' }
progressも参照して ください。
本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。