QML BorderImage Element

The BorderImage element provides an image that can be used as a border. More...

Inherits Item

List of all members, including inherited members

Properties

border.bottom : int
border.left : int
border.right : int
border.top : int
horizontalTileMode : enumeration
progress : real
smooth : bool
source : url
status : enumeration
verticalTileMode : enumeration

Detailed Description

A BorderImage breaks an image into 9 sections, as shown below:

When the image is scaled:

the corners (sections 1, 3, 7, and 9) are not scaled at all
sections 2 and 8 are scaled according to horizontalTileMode
sections 4 and 6 are scaled according to verticalTileMode
the middle (section 5) is scaled according to both horizontalTileMode and verticalTileMode

Examples:

 BorderImage {
     width: 180; height: 180
     border { left: 30; top: 30; right: 30; bottom: 30 }
     horizontalTileMode: BorderImage.Stretch
     verticalTileMode: BorderImage.Stretch
     source: "content/colors.png"
 }

 BorderImage {
     width: 180; height: 180
     border { left: 30; top: 30; right: 30; bottom: 30 }
     horizontalTileMode: BorderImage.Round
     verticalTileMode: BorderImage.Round
     source: "content/colors.png"
 }

The BorderImage example shows how a BorderImage can be used to simulate a shadow effect on a rectangular item.

Property Documentation

border.left : int

border.right : int

border.top : int

border.bottom : 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 side.

For example:

 border.bottom: 10

sets the bottom line 10 pixels up from the bottom of the image.

The border lines can also be specified using a .sci file.

horizontalTileMode : enumeration

verticalTileMode : enumeration

This property describes how to repeat or stretch the middle parts of the border image.

BorderImage.Stretch - Scale the image to fit to the available area.
BorderImage.Repeat - Tile the image until there is no more space. May crop the last image.
BorderImage.Round - Like Repeat, but scales the images down to ensure that the last image is not cropped.

read-onlyprogress : real

This property holds the progress of image loading, from 0.0 (nothing loaded) to 1.0 (finished).

See also status.

smooth : bool

Set this property if you want the image to be smoothly filtered when scaled or transformed. Smooth filtering gives better visual quality, but is slower. If the image is displayed at its natural size, this property has no visual or performance effect.

Note: Generally scaling artifacts are only visible if the image is stationary on the screen. A common pattern when animating an image is to disable smooth filtering at the beginning of the animation and reenable it at the conclusion.

source : url

BorderImage can handle any image format supported by Qt, loaded from any URL scheme supported by Qt.

It can also handle .sci files, which are a QML-specific format. A .sci file uses a simple text-based format that specifies the borders, the image file and the tile rules.

The following .sci file sets the borders to 10 on each side for the image picture.png:

 border.left: 10
 border.top: 10
 border.bottom: 10
 border.right: 10
 source: picture.png

The URL may be absolute, or relative to the URL of the component.

API Lookup

Qt Topics

Examples

Contents

QML BorderImage Element

Properties

Detailed Description

Property Documentation