内容

• 特性
• 详细描述
• 用法范例

BorderImage QML 类型

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

• 所有成员列表，包括继承成员

特性

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

详细描述

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 .

特性文档编制

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