BorderImageMesh QML Type

定义顶点排列类似BorderImage 的网格...更多...

Import Statement: import QtQuick

属性

详细说明

BorderImageMesh 为ShaderEffect 提供了类似于BorderImage 的功能,而无需昂贵的ShaderEffectSource

以下功能是等同的:

BorderImage {
    id: borderImage
    border {
        left: 10
        right: 10
        top: 10
        bottom: 10
    }
    source: "myImage.png"
    visible: false
}
ShaderEffectSource {
    id: effectSource
    sourceItem: borderImage
    visible: false
}
ShaderEffect {
    property var source: effectSource
    ...
}
Image {
    id: image
    source: "myImage.png"
    visible: false
}
ShaderEffect {
    property var source: image
    mesh: BorderImageMesh {
        border {
            left: 10
            right: 10
            top: 10
            bottom: 10
        }
        size: image.sourceSize
    }
    ...
}

但 BorderImageMesh 版本通常可以得到更好的优化。

属性文档

horizontalTileMode : enumeration

verticalTileMode : enumeration

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

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

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


border group

border.bottom : int

border.left : int

border.right : int

border.top : int

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

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

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

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

size : size

网格的基本尺寸。这通常与ShaderEffect 使用的图像sourceSize 相对应。


© 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.