1. 缓存刷新方法,继承QQuickImageProvider
#include <QQuickImageProvider>
#include <QImage>
class ImageProvider : public QQuickImageProvider
{
public:
ImageProvider();
QImage requestImage(const QString &id, QSize *size, const QSize& requestedSize);
QPixmap requestPixmap(const QString &id, QSize *size, const QSize& requestedSize);
void setImageRc(const QImage &image);
private:
QImage img;
};
#include "imageprovider.h"
#include <QDebug>
ImageProvider::ImageProvider() : QQuickImageProvider(QQuickImageProvider::Image)
{
}
QImage ImageProvider::requestImage(const QString &id, QSize *size, const QSize &requestedSize)
{
// qDebug()<<"ImageProvider requestImage"<<id<<size<<requestedSize;
return img;
}
QPixmap ImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
// qDebug()<<"ImageProvider requestPixmap";
return QPixmap::fromImage(img);
}
void ImageProvider::setImageRc(const QImage &image)
{
img = image;
}
然后在自己写一个类在qml中引用,并实时触发刷新信号。
show.h
#include <QObject>
#include "imageprovider.h"
class ShowImg : public QObject
{
Q_OBJECT
public:
explicit ShowImg(QObject *parent = nullptr);
ImageProvider *m_pImgProvider;
signals:
void callQmlRefreshImg();
public slots:
void setImageSlot(const QImage &image);
};
ShowImg.cpp
#include "showimg.h"
#include <QDebug>
ShowImg::ShowImg(QObject *parent) : QObject(parent)
{
m_pImgProvider = new ImageProvider();
}
void ShowImg::setImageSlot(const QImage &image)
{
m_pImgProvider->setImageRc(image);
emit callQmlRefreshImg();
}
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "showimg.h"
ShowImg *CodeImage;
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);
QQmlApplicationEngine engine;
CodeImage = new ShowImg();
engine.rootContext()->setContextProperty("CodeImage", CodeImage);
engine.addImageProvider(QLatin1String("CodeImg"), CodeImage->m_pImgProvider);
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
text.qml
import QtQuick 2.12
import QtQuick.Controls 2.5
Rectangle {
id: rectangle
anchors.fill: parent
BorderImage {
id: borderImage
transformOrigin: Item.Center
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
cache: false
source: "Image/background.png"
}
Connections{
target: CodeImage
onCallQmlRefreshImg:{
borderImage.source = ""
borderImage.source = "image://CodeImg"
}
}
}
这种方式我认为是最笨重的,代码量大,而且运行是一段时间程序容易Crash(在ios平台下),安卓和桌面端正常。
2. 继承QQuickPaintedItem
PaintItem.h
#include <QQuickPaintedItem>
#include <QImage>
#include <QPainter>
class PaintItem : public QQuickPaintedItem
{
Q_OBJECT
public:
explicit PaintItem(QQuickItem *parent = nullptr);
public slots:
void updateImage(const QImage &);
protected:
void paint(QPainter *painter);
private:
QImage m_imageThumb;
};
PaintItem.cpp
#include "paintitem.h"
PaintItem::PaintItem(QQuickItem *parent) : QQuickItem(parent)
{
//默认图片
m_imageThumb = QImage(":/Image/background.png");
}
void PaintItem::updateImage(const QImage &image)
{
m_imageThumb = image;
update();
}
void PaintItem::paint(QPainter *painter)
{
painter->drawImage(this->boundingRect(), m_imageThumb);
}
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "paintitem.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);
//注册类
qmlRegisterType<PaintItem>("PaintItemModule",1,0,"PaintItem");
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
text.qml
import QtQuick 2.12
import QtQuick.Controls 2.5
import PaintItemModule 1.0
Rectangle {
id: rectangle
anchors.fill: parent
PaintItem {
id: paintItem
transformOrigin: Item.Center
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}
这种方式代码简单,经测试在安卓和桌面端运行正常,速度比较快,同样在iOS下绘制速度上不去,大概在10帧左右,如果不是在ios平台这种方法就可以啦。
3. 继承QQuickItem重写updatePaintNode
PaintItem.h
#include <QQuickItem>
#include <QSGNode>
#include <QSGSimpleRectNode>
#include <QSGSimpleTextureNode>
#include <QQuickWindow>
#include <QImage>
class PaintItem : public QQuickItem
{
Q_OBJECT
public:
explicit PaintItem(QQuickItem *parent = nullptr);
public slots:
void updateImage(const QImage &);
protected:
QSGNode * updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;
private:
QImage m_imageThumb;
};
PaintItem.cpp
#include "paintitem.h"
PaintItem::PaintItem(QQuickItem *parent) : QQuickItem(parent)
{
//这句不加会报错
setFlag(ItemHasContents, true);
//默认图片
m_imageThumb = QImage(":/Image/background.png");
}
void PaintItem::updateImage(const QImage &image)
{
m_imageThumb = image;
update();
}
QSGNode * PaintItem::updatePaintNode(QSGNode *oldNode, QQuickItem::UpdatePaintNodeData *)
{
auto node = dynamic_cast<QSGSimpleTextureNode *>(oldNode);
if(!node){
node = new QSGSimpleTextureNode();
}
QSGTexture *m_texture = window()->createTextureFromImage(m_imageThumb, QQuickWindow::TextureIsOpaque);
node->setOwnsTexture(true);
node->setRect(boundingRect());
node->markDirty(QSGNode::DirtyForceUpdate);
node->setTexture(m_texture);
return node;
}
main.cpp和qml跟第二种一样,这里就不写了。
总结:第一种是最臃肿和最危险的,容易Crash,虽然我只在ios下复现过,我感觉在安卓和桌面端也有类似危险。第二种代码很简洁,正常来讲在安卓和桌面端都能满足60帧左右应该问题不大。追求极致就选第三种吧,2和3都是场景渲染的方法只不过2比3内部多封装了些东西渲染多了些步骤所以效率没有3高,3更灵活更高效,都是用的GPU而不是CPU,不对导致你的程序卡顿,CPU爆炸。想具体了解的话可以参考几个大佬的文章QtQuick基础教程(四)---场景渲染(Scene Graph),玩转QtQuick(1)-SceneGraph场景图简介
补充--------------------------------------------
如果是接受流数据做实时显示的话用这种方法最为流畅,亲测,QML VideoOutput 显示 YUV420P 数据流
转自:QML实时加载图片的三种方法(QQuickImageProvider,QQuickPaintedItem,QQuickItem)_qml 显示图片-CSDN博客