BorderImage QML 类型

根据图片绘制边框。 更多...

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

属性

• asynchronous : bool
• border
  • border.bottom : int
  • border.left : int
  • border.right : int
  • border.top : int
• cache : bool
• currentFrame : int
• frameCount : int
• horizontalTileMode : enumeration
• mirror : bool
• progress : real
• smooth : bool
• source : url
• sourceSize : QSize
• status : enumeration
• verticalTileMode : enumeration

详细信息

BorderImage 类型用于通过缩放或平铺每个图片的部分来创建图像式边框。

BorderImage 将源图像（使用 source 属性指定）分成 9 个区域，如下所示

当图像被缩放时，源图像的区域会被缩放或平铺以创建显示的边框图像，方式如下

• 角落（区域 1、3、7 和 9）完全不缩放。
• 区域 2 和 8 根据 horizontalTileMode 缩放。
• 区域 4 和 6 根据 verticalTileMode 缩放。
• 中间（区域 5）同时根据 horizontalTileMode 和 verticalTileMode 缩放。

图像的区域使用 border 属性组定义，该属性组描述了从源图像的每个边缘到用作边框的距离。

用法示例

以下示例显示了不同模式对图像的影响。图像上叠加了引导线以显示图像的上述不同区域。

为了比较，这里使用简单的Image组件显示了未经缩放的图像。在这里，我们叠加了线条以显示如何使用BorderImage进行分割

Image {
    source: "pics/borderframe.png"
    anchors.centerIn: parent
}

但是当使用BorderImage显示图像时，使用border属性来确定图像的哪些部分将位于未缩放的内角区域，以及哪些部分将水平垂直拉伸。然后，你可以给它一个比原始图像更大的大小。由于horizontalTileMode属性设置为BorderImage.Stretch，2号和8号区域内的图像部分在水平上被拉伸。因为verticalTileMode属性设置为BorderImage.Stretch，所以4号和6号区域内的图像部分在垂直上被拉伸。

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Stretch
    verticalTileMode: BorderImage.Stretch
    source: "pics/borderframe.png"
}

再次使用一个大的BorderImage来显示图像。将horizontalTileMode属性设置为BorderImage.Repeat后，2号和8号区域内的图像部分被平铺以填充项目的顶部和底部空间。类似地，将verticalTileMode属性设置为BorderImage.Repeat，所以4号和6号区域内的图像部分被平铺以填充项目的左右空间。

BorderImage {
    anchors { fill: parent; margins: 1 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Repeat
    verticalTileMode: BorderImage.Repeat
    source: "pics/borderframe.png"
}

在某些情况下，2号和8号区域的宽度可能不是源图像中对应区域宽度的精确倍数。类似地，4号和6号的高度可能不是对应区域高度的精确倍数。如果你使用BorderImage.Round模式，它将选择一个整数张图像并缩小以适应。

BorderImage {
    anchors { fill: parent; margins: 6 }
    border { left: 30; top: 30; right: 30; bottom: 30 }
    horizontalTileMode: BorderImage.Round
    verticalTileMode: BorderImage.Round
    source: "pics/borderframe.png"
}

在Qt Quick 示例 - 图像元素中的Border Image示例展示了如何使用BorderImage在矩形项上模拟阴影效果。

图像加载

根据原始位置，源图像可能不会立即加载。可以使用progress属性来监控加载进度。

另请参阅Image和AnimatedImage。

属性文档

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

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