このページでは

C

BorderImage QML Type

画像に基づいて枠線を描画します。もっと詳しく...

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

Item

プロパティ

詳細説明

BorderImage タイプは、各画像の一部を拡大縮小したり、タイリングしたりすることによって、画像から境界線を作成するために使用されます。

BorderImage は、source プロパティを使用して指定されたソース画像を、下図のように 9 つの領域に分割します:

ボーダー画像の4つのボーダーラインと9つの領域を示すスケールグリッド。

画像が拡大縮小されると、ソース画像の領域が拡大縮小またはタイル化され、次のように表示されるボーダー画像が作成されます:

  • 角(領域1、3、7、9)はまったく拡大縮小されない。
  • 領域2と8は水平方向に引き伸ばされる。
  • 領域4と6は垂直に引き伸ばされる。
  • 中央(領域5)は引き伸ばされる。

画像の領域は、border プロパティグループを使用して定義されます。このプロパティグループには、境界線として使用するソース画像の各辺からの距離が記述されています。

使用例

次の例は、画像に対するさまざまなモードの効果を示しています。上述したように、画像のさまざまな領域を示すために、ガイド線が画像に重ねられています。

拡大縮小されていない画像。

拡大縮小されていない画像が Image を使って表示されています。border プロパティは、拡大縮小されていないコーナー領域内にある画像の部分と、水平方向と垂直方向に引き伸ばされる部分を決定するために使用されます。

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

利用可能な領域を埋めるようにスケーリングされた辺を持つ BorderImage。

画像の表示には BorderImage が使われ、元の画像よりも大きなサイズが与えられます。角は変形されず、辺は利用可能な領域を埋めるように拡大縮小されます。

BorderImage {
    width: 180; height: 180
    border { left: 30; top: 30; right: 30; bottom: 30 }
    source: "qrc:/pics/borderframe.png"
}

Image,ColorizedImage,画像リソースの取り扱い,画像の最適化も参照してください

プロパティの説明

border group

border.bottom : int

border.left : int

border.right : int

border.top : int

4本のボーダーライン(水平2本、垂直2本)は、下図のように画像を9分割します:

ボーダー画像の4つのボーダーラインと9つのセクションを示すスケールグリッド。

各枠線 (左・右・上・下) は、 元画像のそれぞれの辺からのオフセットをピクセル単位で指定します。デフォルトでは、各ボーダーラインの値は 0 です。

例えば、以下の定義では、下端を画像の下端から 10 ピクセル上に設定しています:

BorderImage {
    border.bottom: 10
    // ...
}

source : url

このプロパティは、ソース画像を参照するリソース URI を保持します。

Image::sourceも参照してください


特定の Qt ライセンスの下で利用可能です。
詳細を参照してください。