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として指定されます。 画像リソースは、qulrcc ツール（Resource Compiler）を通じて利用可能になります。デフォルトでは、画像はバイナリに埋め込まれる前に解凍されるため、PNG や JPEG などのビットマップ形式、SVG などのベクターグラフィックス形式を含め、Qt がサポートする標準的な画像形式はすべてサポートされています。以下の表に、サポートされているすべての形式を一覧表示します:

width およびheight プロパティが指定されていない場合、Image は読み込まれた画像のサイズを自動的に使用します。デフォルトでは、項目の幅と高さを指定すると、画像はそのサイズにスケーリングされます。この動作は、fillMode プロパティを設定することで変更でき、代わりに画像を伸縮させたりタイル状に並べたりすることができます。

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

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

使用例

以下の例は、Image タイプの最も基本的な使用方法を示しています。

import QtQuick 2.15

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

BorderImage 、ColorizedImage 、qulrcc ツール、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"
}

検索に失敗した場合、sourceプロパティは空の状態にリセットされ、何もレンダリングされなくなります。

「リソースの管理」および「画像リソースの取り扱い」も参照してください 。

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
}

任意の変形原点を設定するには、`transform` を使用して、Scale またはRotation の変形タイプを指定します。

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

特定の Qt ライセンスの下で利用可能です。
詳細はこちら。