このページでは

C

Image QML Type

画像を表示します。もっと見る...

Import Statement: import QtQuick
Since: Qt Quick Ultralite 1.0
Inherits:

Item

Inherited By:

ColorizedImage

列挙

プロパティ

詳細説明

Imageタイプは画像を表示する。

イメージのソースは、source プロパティを使用してリソース URI として指定されます。ImageリソースはqulrccツールのResource Compilerで利用可能です。デフォルトでは、画像はバイナリに埋め込まれる前に解凍されるため、PNG や JPEG のようなビットマップ形式や SVG のようなベクターグラフィック形式など、Qt がサポートする標準的な画像形式がサポートされます。次の表は、サポートされているすべてのフォーマットの一覧です:

フォーマット説明
BMPWindows ビットマップ
DDSダイレクトドローサーフェス
GIFグラフィック交換フォーマット(オプション)
ICNSアップルアイコン画像
JP2ジョイント・フォトグラフィック・エキスパート・グループ2000
JPGジョイント・フォトグラフィック・エキスパート・グループ
JPEGジョイント・フォトグラフィック・エキスパート・グループ
MNG複数画像ネットワークグラフィックス
PNGポータブルネットワークグラフィックス
PBMポータブル・ビットマップ
PGMポータブルグレイマップ
PPMポータブルピクスマップ
SVGスケーラブル・ベクター・グラフィックス
TGATruevision グラフィックス・アダプタ
TIFFタグ付き画像ファイルフォーマット
WBMPワイヤレスビットマップ
WEBPウェブピー
XBMX11ビットマップ
XPMX11 ピクスマップ

注意: アニメーション画像には対応していません。

widthheight プロパティが指定されていない場合、イメージは自動的に読み込まれたイメージのサイズを使用します。デフォルトでは、アイテムの幅と高さを指定すると、画像はそのサイズに拡大縮小されます。この動作は、fillMode プロパティを設定することで変更することができ、代わりに画像を引き伸ばして並べることができます。

画像リソースの扱いも参照してください。

Text itemはHTMLの<img>タグをサポートし、テキストレイアウトの一部として画像を表示します。詳細はQtQuick::Text::textFormat を参照してください。

使用例

次の例はImage型の最も簡単な使い方です。

import QtQuick 2.15

Image {
    source: "qrc:/pics/qtlogo.png"
}


BorderImage,ColorizedImage,qulrcc tool,ImageFiles.MCU.resourceCompression,ImageFiles.MCU.resourceCachePolicy,ImageFiles.MCU.resourceOptimizeForRotation,ImageFiles.MCU.resourceOptimizeForScale,画像リソースの取り扱い,画像の最適化,リソースの管理,画像キャッシュも参照してください

列挙ドキュメント

FillMode

選択できる塗りつぶしモードのリストを提供します。

定数説明
Image.Stretch画像に合わせて拡大縮小します。
Image.PreserveAspectFit切り抜きなしで画像を一様に拡大縮小します。
Image.PreserveAspectCrop必要に応じてトリミングし、画像を均一に拡大縮小して塗りつぶします。
Image.Tile画像を水平方向と垂直方向に複製します。
Image.TileVertically画像を垂直方向に複製し、水平方向に伸張します。
Image.TileHorizontally画像を水平方向に複製し、垂直方向に伸張します。
Image.Pad画像を変換しない。

HorizontalAlignment

画像を水平に配置する選択肢のリストを提供します。

定数説明
Image.AlignLeft画像を左に揃えます。
Image.AlignRight画像を右寄せにします。
Image.AlignHCenter画像を中央に配置します。

VerticalAlignment

画像を垂直に配置する選択肢のリストを提供します。

定数説明
Image.AlignTop画像を上に揃えます。
Image.AlignBottom画像を下に揃えます。
Image.AlignVCenter画像を中央に配置します。

プロパティの説明

horizontalAlignment : HorizontalAlignment

verticalAlignment : VerticalAlignment

画像の水平方向と垂直方向の配置を設定します。デフォルトでは、画像は中央に配置されます。


fillMode : FillMode

このプロパティを設定することで、ソース画像のサイズがアイテムと異なる場合の動作を定義できます。

ストレッチ(デフォルト)
Image {
    width: 130; height: 100
    source: "qrc:/qtlogo.png"
}

PreserveAspectFit
Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectFit
    source: "qrc:/qtlogo.png"
}

PreserveAspectCrop
Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectCrop
    source: "qrc:/qtlogo.png"
    clip: true
}

タイル
Image {
    width: 120; height: 120
    fillMode: Image.Tile
    horizontalAlignment: Image.AlignLeft
    verticalAlignment: Image.AlignTop
    source: "qrc:/qtlogo.png"
}

TileVertically
Image {
    width: 120; height: 120
    fillMode: Image.TileVertically
    verticalAlignment: Image.AlignTop
    source: "qrc:/qtlogo.png"
}

TileHorizontally
Image {
    width: 120; height: 120
    fillMode: Image.TileHorizontally
    verticalAlignment: Image.AlignLeft
    source: "qrc:/qtlogo.png"
}

注: デフォルトでは、clipfalse です。これは、fillMode がPreserveAspectCrop に設定されていても、アイテムがその境界矩形の外側に描画される可能性があることを意味します。

リソースのビルド時の最適化を有効にするには、拡大縮小されるイメージにImageFiles.MCU.resourceOptimizeForScaleを設定します。


rotation : real [since Qt Quick Ultralite 1.3]

このプロパティは、アイテムの回転をtransformOrigin を中心に時計回りの度数で保持します。

デフォルト値は0度(つまり回転なし)です。

青い長方形の中に赤い長方形を回転させたもの。

Rectangle {
    color: "blue"
    width: 100; height: 100
    Image {
        source: "red.png"
        x: 25; y: 25; width: 50; height: 50
        rotation: 30
    }
}

注: ImageFiles.MCU.Experimental.resourceSplitImageOptimizationfalse に設定すると、(回転アニメーションを作成する場合などの)レンダリング時のアーティファクトを避けることができます。

このプロパティはQt Quick Ultralite 1.3 で導入されました。

Transform およびRotationも参照してください


scale : real [since Qt Quick Ultralite 1.3]

このプロパティは、このアイテムのスケールファクタを保持します。

スケールが 1.0 より小さいとアイテムは小さく表示され、1.0 より大きいとアイテムは大きく表示されます。負のスケールを指定すると、レンダリング時にアイテムがミラーリングされます。

デフォルト値は 1.0 です。

スケーリングはtransformOrigin から適用されます。

大きな青い長方形の中に小さな緑の長方形と赤い長方形。

import QtQuick 2.15

Rectangle {
    color: "blue"
    width: 100; height: 100

    Rectangle {
        color: "green"
        width: 25; height: 25
    }

    Image {
        source: "red.png"
        x: 25; y: 25; width: 50; height: 50
        scale: 1.4
        transformOrigin: Item.TopLeft
    }
}

注: ImageFiles.MCU.Experimental.resourceSplitImageOptimizationfalse に設定すると、非整数のスケーリング係数を適用した場合(スケーリングアニメーションを作成した場合など)にレンダリングアーチファクトが発生するのを防ぐことができます。

このプロパティはQt Quick Ultralite 1.3 で導入されました。

Transform およびScaleも参照してください


source : image

url QMLの基本型はサポートされていないため、Image オブジェクトのsource プロパティの型であるimage という別の基本型が存在します。

Imageは "qrc:/images/map.png "のような絶対的なリソースURIを受け付けます。リソースは、qulrccツールでコンパイルされていなければなりません。

コンパイル時にわからない文字列がソースとして設定される場合、Qt Quick Ultraliteは与えられた文字列のリソースハンドルを見つけるためにランタイムルックアップを実行します。

例えば、次のコードはランタイム・ルックアップを行います:

Image {
    source: "qrc:/" + "foo.png"
}

ルックアップに失敗すると、ソース・プロパティは何もレンダリングされない空の状態にリセットされます。

注: Qt Quick Ultraliteは動的リソースをサポートしていません。すべてのリソースは、Qt Quick Ultraliteリソースシステムを使用して登録する必要があります。

リソースの管理とイメージリソースの扱いも参照してください


transform : list<Transform>

このプロパティは、適用する変換のリストを保持します。

詳しくはTransform を参照してください。


transformOrigin : QtQuick::Item::TransformOrigin [since Qt Quick Ultralite 1.3]

こ のプ ロ パテ ィ は、scalerotation が変換す る 原点を保持 し ます。

下画像に示す よ う に、 9 個の変換原点が利用可能です。デフ ォル ト の変換原点はItem.Center です。

長方形に描かれた9つの変形起点。

こ の例は、 画像をその右下隅を中心に回転 さ せます。

Image {
    source: "myimage.png"
    transformOrigin: Item.BottomRight
    rotation: 45
}

任意の変換原点を設定す る には、Scale ま たはRotation の変換 タ イ プ をtransform と と も に使います。

このプロパティはQt Quick Ultralite 1.3 で導入されました。


特定の Qt ライセンスの下で利用可能です。
詳細を見る。