BorderImage QML Type

根据图像绘制边框。更多

Import Statement: import QtQuick
Inherits:

Item

属性

详细说明

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

如下图所示,BorderImage 将使用source 属性指定的源图像分割成 9 个区域:

当缩放图像时,源图像的区域将按以下方式缩放或平铺,以创建显示的边框图像:

图像的区域是通过border 属性组定义的,该属性组描述了作为边框使用的源图像各边缘的距离。

使用示例

以下示例展示了不同模式在图像上的效果。如上所述,在图像上叠加了引导线以显示图像的不同区域。

为便于比较,使用简单的图像项显示未缩放的图像。在这里,我们通过叠加线条来显示如何使用 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 Examples - Image Elements中的 Border Image 示例展示了如何使用 BorderImage 在矩形项目上模拟阴影效果。

图像加载

源图像可能无法即时加载,这取决于其原始位置。可使用progress 属性监控加载进度。

另请参阅 ImageAnimatedImage

属性文档

horizontalTileMode : enumeration

verticalTileMode : enumeration

该属性描述了如何重复或拉伸边框图像的中间部分。

常数说明
BorderImage.Stretch缩放图像以适应可用区域。
BorderImage.Repeat平铺图像,直到没有更多空间。可能会裁剪最后一张图片。
BorderImage.Round与 "重复 "类似,但会缩小图像比例,以确保最后一张图像不会被裁剪。

每个属性的默认平铺模式都是BorderImage.Stretch。


currentFrame : int

frameCount : int [read-only]

currentFrame 是当前可见的框架。默认值为 。如果图像包含多个帧,可以将其设置为 和 之间的一个数字,以显示不同的帧。0 0 frameCount - 1

frameCount 是图像的帧数。大多数图像只有一帧。


asynchronous : bool

指定本地文件系统上的图像应在单独的线程中异步加载。默认值为 false,这会导致加载图像时用户界面线程阻塞。将asynchronous 设置为 true 比立即显示图像更需要保持用户界面的响应速度。

请注意,此属性只对从本地文件系统读取的图像有效。通过网络资源(如 HTTP)加载的图像总是异步加载的。


border group

border.bottom : int

border.left : int

border.right : int

border.top : int

如下图所示,4 条边框线(2 条水平线和 2 条垂直线)将图像分成 9 个部分:

每条边框线(左、右、上、下)都指定了与源图像相应边缘的像素偏移量。默认情况下,每条边框线的值为 0。

例如,下面的定义将底线从图像底部向上设置为 10 个像素:

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

也可以使用.sci file 指定边界线。


cache : bool

指定是否缓存图像。默认值为 true。将cache 设置为 false 在处理大型图片时非常有用,可确保在缓存大型图片时不会影响小型 "ui 元素 "图片。


mirror : bool

该属性用于确定图像是否应水平反转(实际上是显示镜像图像)。

默认值为 false。


progress : real [read-only]

该属性显示图片加载的进度,从 0.0(未加载)到 1.0(已完成)。

另请参阅 status


retainWhileLoading : bool [since 6.8]

该属性定义了更改source 属性且异步加载时的行为。当asynchronous 属性设置为true 时,或图像不在本地文件系统上时,就会出现这种情况。

如果retainWhileLoadingfalse (默认值),则会立即丢弃旧图像,并在加载新图像时清空组件。如果设置为true ,旧图像将保留并保持可见,直到新图像就绪。

如果加载新图像需要很长时间,启用此属性可以避免闪烁。但代价是,在加载新图片时,会因双重缓冲而占用一些额外内存。

此属性在 Qt 6.8 中引入。


smooth : bool

在缩放或变换图像时,该属性决定是否对图像进行平滑过滤。平滑滤波可提供更好的视觉质量,但在某些硬件上可能会更慢。如果图像以自然尺寸显示,该属性不会对视觉或性能产生影响。

默认情况下,此属性设置为 true。


source : url

该属性包含指向源图像的 URL。

BorderImage 可处理 Qt 支持的任何图像格式,从 Qt 支持的任何 URL 方案加载。

该属性还可用于引用 .sci 文件,这些文件是以 QML 特定的、基于文本的格式编写的,其中指定了边框、图像文件和给定边框图像的平铺规则。

下面的 .sci 文件将图片picture.png 的边框设置为每边 10 个:

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

URL 可以是绝对 URL,也可以是相对于组件 URL 的 URL。

另请参阅 QQuickImageProvider


sourceSize : size [read-only]

此属性保存加载图像的实际宽度和高度。

BorderImage 中,此属性为只读。

另请参阅 Image::sourceSize


status : enumeration [read-only]

该属性描述图片加载的状态。它可以是

常量说明
BorderImage.Null未设置图像
BorderImage.Ready已加载图像
BorderImage.Loading正在加载图像
BorderImage.Error加载图像时发生错误

另请参阅 progress


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.