BorderImage QML 类型

基于图像描绘边框。 更多...

导入语句: import QtQuick .
Since: Qt Quick Ultralite 1.0
继承:

Item

特性

详细描述

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.

用法范例

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"
}
						

另请参阅 图像 , ColorizedImage , Dealing with image resources ,和 Image optimizations .

特性文档编制

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.

另请参阅 Image::source .