Qml 图像不会在源更改和信号接收时刷新

Question

I created "fruit_swap" project in Qt Creator bt choosing-- Application -> Qt Quick Application -> Qt 5.5. In fruit_swap, 'main()' function calls forkSwapper() which forks a process that swaps fruit image (apple <--> pear) once every second.

The swapping is done inside setImageURL() method which also emits "imageURLChanged" signal for the qml. From the output(shown below at the bottom), the signal is proven to be delivered to the qml side.

I was expecting the qml Image swapping. However, it didn't. The first image shown('pear') stayed motionlessly. What could have I done wrong? Any suggestion is welcome. I uploading every single source code below.

fruit_swap.pro

/* generated by Qt Creator */

TEMPLATE = app

QT += qml quick
CONFIG += c++11

SOURCES += main.cpp \
    imageitem.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Default rules for deployment.
include(deployment.pri)

HEADERS += \
    imageitem.h

DISTFILES += \
    FruitFrame.qml

imageitem.h

/* https://quickgit.kde.org/?p=scratch%2Fsune%2Fimageitem.git */

#include <QQuickPaintedItem>
/**
 * @brief QQuickItem to show images/pixmaps/colors in a QML item
 *
 * As opposed to the Image from plain qml, this works on
 * QImages, QPixmaps and QColors
 */
class ImageItem : public QQuickPaintedItem
{
//        Q_PROPERTY(QVariant imageData READ imageData() WRITE setImageData
//                   NOTIFY imageDataChanged)
        Q_OBJECT
        Q_PROPERTY(QVariant imageURL READ imageURL() WRITE setImageURL
                   NOTIFY imageURLChanged)
    public:
        explicit ImageItem(QQuickItem *parent = 0);
        /**
         * \reimpl
         */
        Q_INVOKABLE void paint(QPainter* painter) Q_DECL_OVERRIDE;
        /**
         * @brief image data u-ed by this item
         * @return a QVariant wrapping the data
         */
        QVariant imageData() const;
        /**
         * @brief Sets the image data
         * @param newData
         */
        void setImageData(const QVariant& newData);

        QVariant imageURL() const;
        /**
         * @brief Sets the image data
         * @param newData
         */
        void setImageURL(const QVariant& fileName);
    Q_SIGNALS:
        /**
         * @brief imageChanged
         */
        void imageDataChanged();
        void imageURLChanged();

    private:
        enum Type {
            Unknown,
            Pixmap,
            Image,
            Color
        };
        Type m_type;
        QVariant m_imageData;
        QVariant m_imageURL;
        QRectF scaledRect(const QRect& sourceRect) const;
};
#endif // IMAGEITEM_H

imageitem.cpp

/* https://quickgit.kde.org/?p=scratch%2Fsune%2Fimageitem.git */

#include "imageitem.h"
#include <QPainter>
#include <qobjectdefs.h>

ImageItem::ImageItem(QQuickItem *parent) :
    QQuickPaintedItem(parent)
{
    m_imageURL = QUrl::fromLocalFile(QString("apple.jpg"));
}

void ImageItem::paint(QPainter* painter)
{
    switch(m_type) {
        case Unknown: {
            return;
        }
        case Image: {
            QImage image = m_imageData.value<QImage>();
            painter->drawImage(scaledRect(image.rect()), image);
            return;
        }
        case Pixmap: {
            QPixmap pixmap = m_imageData.value<QPixmap>();
            painter->drawPixmap(scaledRect(pixmap.rect()).toRect(), pixmap);
            return;
        }
        case Color: {
            QColor color = m_imageData.value<QColor>();
            painter->fillRect(contentsBoundingRect(),color);
            return;
        }
    }
}

QVariant ImageItem::imageData() const
{
    return m_imageData;
}

QVariant ImageItem::imageURL() const
{
    return m_imageURL;
}

void ImageItem::setImageURL(const QVariant &fileName)
{
    m_imageURL = QUrl::fromLocalFile(fileName.value<QString>());
    if (m_imageURL.canConvert<QUrl>()) {
        QUrl url = m_imageURL.value<QUrl>();
        if (!url.isEmpty() && url.isValid()
                && url.isLocalFile())
        {
            qDebug() << "URL is valid";
        } else {
            qDebug() << "URL is INvalid";
        }
    } else {
        qDebug() << "URL is INvalid";
    }
    emit imageURLChanged();
}

void ImageItem::setImageData(const QVariant& newData)
{
    switch(newData.userType()) {
        case QMetaType::QPixmap: {
            m_type = Pixmap;
            break;
        }
        case QMetaType::QImage: {
            m_type = Image;
            break;
        }
        case QMetaType::QColor: {
            m_type = Color;
            break;
        }
        default: {
            m_type = Unknown;
            break;
        }
    }
    m_imageData = newData;
    emit imageDataChanged();
}

QRectF ImageItem::scaledRect(const QRect& sourceRect) const
{
    QRectF targetRect = contentsBoundingRect();

    QSizeF scaledSize;

    double widthScale = targetRect.width() / sourceRect.width();
    double heightScale = targetRect.height() / sourceRect.height();
    if(widthScale < heightScale) {
        scaledSize.setHeight(sourceRect.height() * widthScale);
        scaledSize.setWidth(sourceRect.width() *widthScale);
    } else {
        scaledSize.setHeight(sourceRect.height() * heightScale);
        scaledSize.setWidth(sourceRect.width() *heightScale);
    }

    QRectF result = QRectF(targetRect.left() + targetRect.width() /2 - scaledSize.width() /2,
                targetRect.top() + targetRect.height()/2 - scaledSize.height()/2,
                scaledSize.width(),scaledSize.height());
//    QRectF result(QPointF(0,0),scaledSize);
    qDebug() << result << targetRect << sourceRect << widthScale << heightScale ;
    return result;
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QImage>
#include <unistd.h>

#include "imageitem.h"

void forkSwapper(ImageItem * fImage);

int main(int argc, char *argv[])
{
    qmlRegisterType<ImageItem>("ImageItem",1,0,"ImageItem");

    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    ImageItem *fImage = new ImageItem();

    fImage->setImageURL("fruit.jpg");

    engine.rootContext()->setContextProperty("cpp_imageURL", fImage);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    forkSwapper(fImage);

    return app.exec();
}

void forkSwapper(ImageItem * fImage) {

    int pid = fork();

    if (pid == 0) {
        int i = 0;
        while (true) {
            if (i++ % 2 == 0)
                fImage->setImageURL("apple.jpg");
                //std::system("cp apple.jpg fruit.jpg");
            else
                fImage->setImageURL("pear.jpg");
                //std::system("cp pear.jpg fruit.jpg");

            qDebug() << "fruit image changed";
            sleep(1);
        }
        _exit (EXIT_FAILURE);
    } else {
        qDebug() << "swapper forked, PID:" << pid;
    }
}

FruitFrame.qml

import QtQuick 2.5
import ImageItem 1.0

Rectangle {
    property alias mouseArea: mouseArea

    width: 360
    height: 360

    MouseArea {
        id: mouseArea
        anchors.fill: parent

        Connections {
            target: cpp_imageURL
            onImageURLChanged: {
                fruit_image.update();
                // fruit_image.source = cpp_imageURL.imageURL;
                console.log("image UURL-" + cpp_imageURL.imageURL);
            }
        }

        Image {
            id: fruit_image
            x: 39
            y: 94
            width: 274
            height: 204
            source: cpp_imageURL.imageURL
            cache: false
        }
    }

    Text {
        anchors.centerIn: parent
        text: "Hello World"
        anchors.verticalCenterOffset: -137
        anchors.horizontalCenterOffset: -104
    }
}

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import ImageItem 1.0

Window {
    visible: true

    width: 360
    height: 460

    FruitFrame {
        anchors.fill: parent
        mouseArea.onClicked: {
            Qt.quit();
        }
    }
}

Application Output

Starting /home/jbpark03/wem/fruit_swap/build/fruit_swap...
QML debugging is enabled. Only use this in a safe environment.
URL is valid
URL is valid
qml: image UURL-file:apple.jpg
fruit image changed
swapper forked, PID: 3078
URL is valid
qml: image UURL-file:pear.jpg
fruit image changed
URL is valid
qml: image UURL-file:apple.jpg
fruit image changed
URL is valid
qml: image UURL-file:pear.jpg
fruit image changed
URL is valid
qml: image UURL-file:apple.jpg

END.

Answer 1

The code works perfectly well. I think the problem is you're blocking the Qt application because you're using sleep .

In fact, you see the image pear.jpg because is the first image shown after fruit.jpg and before any sleep .

If, for example, you use a QTimer or a QThread , you will check the image is properly updated.

Example:

mytimer.h

#ifndef MYTIMER_H
#define MYTIMER_H

#include <QObject>
#include <QTimer>
#include "imageitem.h"

class MyTimer : public QObject
{
    Q_OBJECT
public:
    explicit MyTimer(ImageItem * fImage, QObject *parent = 0);

private:
    QTimer *timer;
    ImageItem *myImage;

signals:

public slots:
    void update();
};

#endif // MYTIMER_H

mytimer.cpp

#include <QDebug>
#include <QTest>
#include "mytimer.h"

MyTimer::MyTimer(ImageItem * fImage, QObject *parent) : QObject(parent)
{
    myImage = fImage;
    timer = new QTimer(this);
        connect(timer, SIGNAL(timeout()), this, SLOT(update()));
        timer->start(1000);
}

void MyTimer::update()
{
    myImage->setImageURL(":pear.jpg");

    QTest::qWait(250);

    myImage->setImageURL(":apple.jpg");
}

With this timer, we're going to change the image every 1 second. Now, in our main.cpp :

#include "mytimer.h"

int main(int argc, char *argv[])
{
    qmlRegisterType<ImageItem>("ImageItem",1,0,"ImageItem");

    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    ImageItem *fImage = new ImageItem();
    MyTimer *timer = new MyTimer(fImage);

    fImage->setImageURL(":fruit.jpg");

    engine.rootContext()->setContextProperty("cpp_imageURL", fImage);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}