时间戳

首页 > 解决方案 > 如何在 QML 上使用 9 个补丁 png 图像？

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

问题描述

我正在使用 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 个补丁图像文件。

所以我用谷歌搜索并找到了这个。

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

错误消息说它找不到“com.alee.extended.ninepatch.NinePatchEditorFrame”。

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

如果 QML 支持 9 个补丁图像，我用谷歌搜索。

图像样式类型似乎相关，但我无法弄清楚如何实际使用它。

这个 stackoverflow 页面推荐 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 个补丁图像？

我有什么遗漏或做错了吗？

标签： qtqmlnine-patch

解决方案

在 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#horizo​​ntalTileMode -prop

推荐阅读