The BorderImage element provides an image that can be used as a border. More...
Inherits Item
A BorderImage breaks an image into 9 sections, as shown below:
When the image is scaled:
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.
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.
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.
See also QDeclarativeImageProvider.
read-onlystatus : enumeration |
This property holds the status of image loading. It can be one of:
See also progress.