QML实时加载图片的方式

QML实时加载图片的方式

1、QQuickImageProvider

这种方式需要和qml的Image配置使用,它是通过改变Image的source达到实时改变图片的效果

// ImageProvider.h
#ifndef IMAGEPROVIDER_H
#define IMAGEPROVIDER_H

#include <QObject>
#include <QQuickImageProvider>
#include <QVector>

class ImageProvider : public QQuickImageProvider
{
public:
    ImageProvider();

    QImage requestImage(const QString &id, QSize *size, const QSize& requestedSize) override;

private:
    QImage              m_gifImage;
    QImage              m_svgImage;
    QVector<QString>    m_svgVector;
    QVector<QString>    m_gifVector;
};

#endif // IMAGEPROVIDER_H
// ImageProvider.cpp
#include "ImageProvider.h"
#include <QDirIterator>
#include <QDebug>
#include <QTime>
#include <QRandomGenerator>

ImageProvider::ImageProvider() :
    QQuickImageProvider(QQuickImageProvider::Image)
{
	// 从资源文件中获取所有gif和svg的路径
    QDirIterator it(":", QDirIterator::Subdirectories);
    while (it.hasNext()) {
        // qDebug() << "------------------------------";
        // qDebug() << it.fileName();
        // qDebug() << it.filePath();

        decltype(m_gifVector) *ptr = nullptr;
        if (it.fileName().contains(".gif")) {
            ptr = &m_gifVector;
        }
        if (it.fileName().contains(".svg")) {
            ptr = &m_svgVector;
        }
        if (ptr != nullptr) {
            ptr->push_back(it.filePath());
        }

        it.next();
    }
}

QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
    Q_UNUSED(id); // 这个可以用来区分来自不同地方的图像
    Q_UNUSED(size);
    Q_UNUSED(requestedSize);

    QRandomGenerator gen(QTime::currentTime().msecsSinceStartOfDay());
    if (id == "svg") {
        auto index = gen.generate() % m_svgVector.size();
        m_svgImage.load(m_svgVector[index]);
        return m_svgImage;
    } else if (id == "gif") {
        auto index = gen.generate() % m_gifVector.size();
        m_gifImage.load(m_gifVector[index]);
        return m_gifImage;
    }

    return QImage();
}

// main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlEngine>
#include <QQmlComponent>
#include <QQmlContext>
#include <QQuickWindow>
#include <QDebug>
#include "ImageProvider.h"

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    QGuiApplication app(argc, argv);
    ImageProvider *imageProvider = new ImageProvider();

    QQmlEngine engine;
    engine.addImageProvider("Test_Image", imageProvider); // 清除时会自动delete

    const QUrl url(QStringLiteral("qrc:/main.qml"));

    QQmlComponent* component = new QQmlComponent(&engine, url);
    QObject* pMainObj = component->create();
    qDebug() << component->errorString();

    QQuickWindow* pQuickWindow = dynamic_cast<QQuickWindow *>(pMainObj);
    pQuickWindow->show();
    return app.exec();
}
// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property int clickCount: 0

    function refreshImage(imageName) {
        image.source = ""
        image.source = "image://Test_Image/" + imageName
    }

    Image {
        id: image
        anchors.centerIn: parent
        source: ""
        cache: false
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onClicked: {
            clickCount++
            if (clickCount % 2 === 0) {
                refreshImage("svg");
            } else {
                refreshImage("gif");
            }
        }
    }
}

效果就是点击一次切换一次图片,图片随机显示
在这里插入图片描述

2、QQuickPaintedItem

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值