Image QML Type

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

• 継承されたメンバーを含む全メンバーのリスト

列挙

• FillMode
• HorizontalAlignment
• VerticalAlignment

プロパティ

• fillMode : FillMode
• horizontalAlignment : HorizontalAlignment
• rotation : real (since Qt Quick Ultralite 1.3)
• scale : real (since Qt Quick Ultralite 1.3)
• source : image
• transform : list<Transform>
• transformOrigin : QtQuick::Item::TransformOrigin (since Qt Quick Ultralite 1.3)
• verticalAlignment : VerticalAlignment

詳細説明

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

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

width とheight プロパティが指定されていない場合、イメージは自動的に読み込まれたイメージのサイズを使用します。デフォルトでは、アイテムの幅と高さを指定すると、画像はそのサイズに拡大縮小されます。この動作は、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

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

HorizontalAlignment

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

VerticalAlignment

画像を垂直に整列させる選択肢のリストを提供します。

プロパティの説明

fillMode : FillMode

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

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

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

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"
}

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

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

リソースのビルド時の最適化を有効にするには、スケーリングされる画像に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
    }
}

このプロパティは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
    }
}

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

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

source : image

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

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

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

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

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

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

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

transform : list<Transform>

このプロパティは、適用するトランスフォームのリストを保持する。

詳細はTransform を参照。

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

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

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

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

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

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

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

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