QML中的图像图集

Question

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

我想在转发器中使用它，这样我就有了四个图像按钮，每个按钮都有一个子图像。

QML 中有 "texture-atlas" 个模块吗？

我只找到了 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"
            }
        }
    }
}

想法是将整个图像包裹到一个容器中并适当地剪裁它。这里我使用index-based访问幻灯片，你可以随意使用。

QML中的图像图集

Image atlas in QML

qt

image

qml

texture-atlas