如何在 QML 上使用 9 个补丁 png 图像？

Question

我正在使用 QML 制作用户界面。

我被要求为此 UI 使用 9.png 个图像文件。

这张图片的大小是 82X94 像素，我必须将这张图片用于 1280X92 的背景。

下面是我写的源码

Image {
    id: bgMode
    x: 0; y: 0
    width: 1280; height: 92
    source: "qrc:/res/img/bg_mode.9.png"
}

但是，此代码在垂直拉伸时破坏了图像。

我应该拉伸图像而不让它像黏糊糊的面团。

我以为会有一些程序可以编辑 9 个补丁图像文件。

所以我用谷歌搜索并找到 this。

但是，我无法使用 JRE 运行这个程序。

错误信息说找不到'com.alee.extended.ninepatch.NinePatchEditorFrame'。

我在这里放弃了使用这个程序。

我用谷歌搜索了 QML 是否支持 9 个补丁图像。

Image Style type 似乎相关，但我不知道如何实际使用它。

This Whosebug page推荐BorderImage类型。所以我在下面写了源代码。

BorderImage {
        id: bgMode
        x: 0
        y: 0
        width: 1280; height: 92
        verticalTileMode: BorderImage.Round
        horizontalTileMode: BorderImage.Stretch
        border.left: 1; border.right: 1
        source: "qrc:/res/img/bg_mode.9.png"
}

但是这段代码仍然破坏了图像。

如何在 QML 上使用 9 个补丁图像？

我是否遗漏了什么或做错了什么？

Answer 1

在 Qt 文档页面上，您有很好的解释。 https://doc.qt.io/qt-5/qml-qtquick-borderimage.html 您唯一需要知道的是那两条垂直线和两条水平线的位置（与图像边缘的距离）。

border { left: 30; top: 30; right: 30; bottom: 30 }

图像将被分割成 9 个区域。如果您不想水平拉伸它们但重复使用 horizontalTileMode: BorderImage.Repeat 属性。此处列出了其他模式 https://doc.qt.io/qt-5/qml-qtquick-borderimage.html#horizontalTileMode-prop

如何在 QML 上使用 9 个补丁 png 图像？

How to use 9 patch png images on QML?

qt

qml

nine-patch