image - QML 中的图像图集

Question

我有一个像这样的图像： http ://www.imagemagick.org/Usage/basics/result.gif （它包含两行单独的数据：上排三个方形图像，另一个正方形下方和两个“空” ' 方格）

我想在中继器中使用它，以便获得四个图像按钮，每个按钮都有一个子图像。

QML 中是否有“纹理图集”模块？

我只找到了http://doc.qt.io/qt-5/qml-qtquick-sprite.html，我希望有一些对我的用例更好的东西。

Answer 1

正如我在评论中所说，我会这样做，QQuickImageProvider因为这是最快且内存最少的方式。但是 QML 非常灵活，您可以随心所欲地使用它。至于您的问题，您可以执行以下操作：

Tile.qml

import QtQuick 2.9

Item {
    id: container
    property alias source: img.source
    property int cellWidth: 1
    property int cellHeight: 1
    property int slideIndex: 0
    clip: true
    Image {
        id: img
        property int cols: img.paintedWidth / container.cellWidth
        property int rows: img.paintedHeight / container.cellHeight
        x: -container.cellWidth * Math.floor(container.slideIndex % cols)
        y: -container.cellHeight * Math.floor(container.slideIndex / cols)
    }
}

和用法：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: window
    title: "Test"
    visible: true
    width: 600
    height: 400

    Row {
        spacing: 10
        anchors.centerIn: parent
        Repeater {
            model: 4
            Tile {
                width: 32
                height: 32
                cellWidth: 32
                cellHeight: 32
                slideIndex: index
                source: "http://www.imagemagick.org/Usage/basics/result.gif"
            }
        }
    }
}

这个想法是将整个图像包装到一个容器中并适当地对其进行剪辑。在这里，我使用基于索引的幻灯片访问，您可以根据需要进行操作。