BorderImage QML Type

画像に基づいて枠線を描画します。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• source : url

詳細な説明

BorderImage 型は、各画像の一部を拡大縮小またはタイル状に配置することで、画像から枠線を作成するために使用されます。

BorderImage は、source プロパティで指定されたソース画像を、以下に示すように 9 つの領域に分割します。

画像が拡大・縮小される際、ソース画像の各領域は、次のように拡大・縮小またはタイル状に配置され、表示されるボーダー画像が生成されます：

• 角の部分（領域 1、3、7、9）は、まったく拡大縮小されません。
• 領域 2 および 8 は水平方向に引き伸ばされます。
• 領域 4 および 6 は、垂直方向に引き伸ばされます。
• 中央（領域 5）は引き伸ばされます。

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

使用例

以下の例は、さまざまなモードが画像に与える影響を示しています。上記で説明した画像の各領域を示すために、画像上にガイドラインが重ねられています。

スケーリングされていない画像は、Image を使用して表示されます。border プロパティを使用して、スケーリングされていない隅の部分の内側にある画像の部分と、水平および垂直方向に引き伸ばされる部分を決定します。

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

画像の表示にはBorderImageが使用され、元の画像よりも大きなサイズが指定されています。四隅は変形されませんが、側面は利用可能な領域を埋めるように拡大縮小されます。

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

「 Image」 、「ColorizedImage 」、「画像リソースの取り扱い」、および「画像の最適化」も参照してください 。

プロパティのドキュメント

border group

4本の境界線（横2本、縦2本）によって、画像は以下に示すように9つのセクションに分割されます。

各境界線（左、右、上、下）は、元の画像のそれぞれの端からのピクセル単位のオフセットを指定します。デフォルトでは、各境界線の値は 0 です。

たとえば、次の定義では、下側の境界線を画像の下端から10ピクセル上に設定しています：

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

source : url

このプロパティには、元の画像を参照するリソース URI が格納されます。

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

特定の Qt ライセンスの下で利用可能です。
詳細はこちらをご覧ください。