C

BorderImage QML Type

Paints a border based on an image. More...

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

List of all members, including inherited members

Properties

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

Detailed Description

The BorderImage type is used to create borders out of images by scaling or tiling parts of each image.

A BorderImage breaks a source image, specified using the source property, into 9 regions, as shown below:

When the image is scaled, regions of the source image are scaled or tiled to create the displayed border image in the following way:

The corners (regions 1, 3, 7, and 9) are not scaled at all.
Regions 2 and 8 are stretched horizontally.
Regions 4 and 6 are stretched vertically.
The middle (region 5) is stretched.

The regions of the image are defined using the border property group, which describes the distance from each edge of the source image to use as a border.

Example Usage

The following examples show the effects of the different modes on an image. Guide lines are overlaid onto the image to show the different regions of the image as described above.

An unscaled image is displayed using an Image. The border property is used to determine the parts of the image that will lie inside the unscaled corner areas and the parts that will be stretched horizontally and vertically.

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

A BorderImage is used to display the image, and it is given a size that is larger than the original image. The corners are not transformed, while the sides are scaled to fill the available area.

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

Property Documentation

border group
border.bottom : int
border.left : int
border.right : int
border.top : int

The 4 border lines (2 horizontal and 2 vertical) break the image into 9 sections, as shown below:

Each border line (left, right, top, and bottom) specifies an offset in pixels from the respective edge of the source image. By default, each border line has a value of 0.

For example, the following definition sets the bottom line 10 pixels up from the bottom of the image:

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

source : url

This property holds the resource URI that refers to the source image.

See also Image::source.

Available under certain Qt licenses.
Find out more.