Атлас изображений в QML

У меня есть такое изображение: http://www.imagemagick.org/Usage/basics/result.gif (содержит две строки отдельных данных: три квадратных изображения в верхней строке, а под ней еще один квадрат и два «пустых» квадрата)

Я хочу использовать его внутри повторителя, чтобы получить четыре кнопки изображения, каждая с одним из субизображений.

Есть ли в QML модули «текстурный атлас»?

Я нашел только http://doc.qt.io/qt-5/qml-qtquick-sprite.html, и я надеюсь, что есть что-то, что лучше подходит для моего случая использования.


image qt qml texture-atlas
person user2567875    schedule 20.02.2018    source источник
comment
Я бы сделал это, используя QQuickImageProvider   -  person folibis    schedule 20.02.2018
comment
@folibis: спасибо за идею, но есть ли другой метод, не использующий C++?   -  person user2567875    schedule 20.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Как я сказал в комментарии, я бы сделал это, используя 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"
            }
        }
    }
}

Идея состоит в том, чтобы обернуть все изображение в контейнер и соответствующим образом обрезать его. Здесь я использую индексный доступ к слайду, вы можете делать это по своему усмотрению.

person folibis    schedule 20.02.2018
comment
извините, я неправильно понял верхний комментарий, думал, что вы имели в виду саму реализацию C++. Большое спасибо за пример кода! Похоже, это то, что я искал - person user2567875; 20.02.2018
comment
Да, я имел в виду С++, т.е. пользовательская реализация QQuickImageProvider. Так вы сможете управлять изображением более практично. В приведенной выше реализации QML вы держите большое изображение, чтобы просто показать его часть. Остальная часть изображения не нужна. Следовательно, эта реализация требует больше памяти. Но это не имеет значения, если у вас нет сотен таких предметов. - person folibis; 20.02.2018
comment
альтернативой может быть использование одного Image и нескольких ShaderEffectSource со свойством sourceRect в правильной области Image. - person GrecKo; 20.02.2018