QML, как обрезать изображение и извлечь изображения из одного изображения

Question

У меня есть изображение, которое содержит числа в следующем порядке: -
0 1 2 3 4 5 6 7 8 9 ... я должен показать показания счетчика .. так что теперь, как создать субизображение отдельного человекачисла из этого изображения, чтобы я мог отображать каждое число отдельно .. означает, что я хочу извлечь изображения числа из этого изображения, чтобы я мог отображать их отдельно при чтении метра .. пожалуйста, предложите.

Полный размер изображения составляет 108x16.

Я попытался использовать столбец, затем с помощью повторителя я реплицировал изображение, но как изменить x, y изображения внутри повторителя, чтобы изображение внутри повторителя было обрезано ... чтобы я извлекал числа из изображения. .?

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

Window {
    visible: true
    width: 400
    height: 300
    color: "grey"

    Item {
        id: container
        anchors.centerIn: parent
        width: 12
        height: 16
        clip: true
        property int position: 0
        Column {
            id: image
            y: -container.position * 16
            Repeater {
                model: 10
                delegate: Rectangle {
                    width: 12
                    height: 16
                    Image {
                        anchors.fill: parent
                        source: "files/REE Demo images/odo_font_orange.png"
                    }
                }
            }
        }
    }

    Timer {
        interval: 1000
        repeat: true
        running: true
        onTriggered: {
            if(container.position == 9)
                container.position = 0;
            else
                container.position ++
        }
    }

Пожалуйста, найдите прикрепленное изображение здесь: -

Answer 1

Возможно, вы захотите использовать Sprite и SpriteSequence . Очевидно, что вам нужно установить значение true для запуска, чтобы вы могли вручную установить желаемый кадр (число) с помощью метода jumpTo .

Поскольку ваше изображение не имеет ширины 120 пикселей, это означает, чтоваши спрайты не одного размера. Но я рекомендую вам выбрать рамки шириной 12 пикселей в исходном изображении. SpriteSequence изменит размер вашего спрайта до его собственного размера, если он имеет другой размер. Это означает, что вы должны вручную установить frameX каждого объекта Sprite, чтобы получить хороший визуальный вид.

 SpriteSequence {
        id: digit
        width: 12
        height: 16
        interpolate: false
        goalSprite: ""
        running: true
        property var sourceImage: 'files/REE Demo images/odo_font_orange.png'
        Sprite{
            name: "1"
            source: digit.sourceImage
            frameCount: 1
            frameWidth: 12
            frameHeight: 16
            frameX: 0
            frameY: 0
        }
        Sprite{
            name: "2"
            source: digit.sourceImage
            frameCount: 1
            frameWidth: 12
            frameHeight: 16
            frameX: 12
            frameY: 0
        }
        //other digits with their topleft and width/height 
        //in original image should be repeated with their own name

       function setNumber(n){
          digit.jumpTo(n);
       }

}

Answer 2

Вы должны поместить свое изображение в контейнер с clip:true и поиграть с х / у элемента содержимого, например:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 300

    Item {
        id: container
        anchors.centerIn: parent
        width: 30
        height: 30
        clip: true
        property int position: 0
        Column {
            id: image
            y: -container.position * 30
            Repeater {
                model: 10
                delegate: Rectangle {
                    width: 30
                    height: 30
                    Text {
                        anchors.fill: parent
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        text: index
                        font.pixelSize: 20
                        color: "orange"
                    }
                }
            }
        }
    }

    Timer {
        interval: 1000
        repeat: true
        running: true
        onTriggered: {
            if(container.position == 9)
                container.position = 0;
            else
                container.position ++
        }
    }
}

здесь я заменяю Image на Column элемент дляпросто проиллюстрировать идею. Возможно, вы захотите добавить анимацию движения и т. Д.

Обновлено: с учетом вашего изображения:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 300

    Item {
        id: container
        anchors.centerIn: parent
        width: 12
        height: 16
        clip: true
        property int position: 1
        Image {
            id: image
            x: -container.position * 12
            source: "http://i.stack.imgur.com/jnbEZ.png"
        }
    }
    Timer {
        interval: 1000
        repeat: true
        running: true
        onTriggered: {
            if(container.position == 9)
                container.position = 0;
            else
                container.position ++
        }
    }

}

, но поскольку ваши изображения не выровнены правильно, результат немного грубоват. Вам нужно 10 клеток одинакового размера каждая.