QML混合编程图像刷新策略

应用场景

对于日常项目使用qt/c++混合编程时，有很多场景需要在界面UI中显示一些图像数据，但如果是c++中使用OpenCV处理后的数据，如何刷新到界面UI用于显示则有多种方案。
对于传统方式使用QQuickImageProvider或直接传输QImage/QPixmap时可能面临一些性能问题。
除了上述传统方式外，此处记录另一种方案。

实现方案

1. QQuickPaintedItem

QQuickPaintedItem使QPainter API与QML场景图一起使用成为可能。它在场景图中设置一个带纹理的矩形，并使用QPainter在纹理上绘制。渲染目标可以是一个QImage，或者在使用OpenGL时，是一个QOpenGLFramebufferObject。当渲染目标是一个QImage时，QPainter首先渲染到图像中，然后将内容上载到纹理中。当使用QOpenGLFramebufferObject时，QPainter直接在纹理上绘制。调用update（）触发重绘。
若要启用QPanter进行抗锯齿渲染，请使用setAntialiasing（）。
要编写自己绘制的项，首先要创建QQuickPaintedItem的子类，然后从实现其唯一纯虚拟公共函数paint()开始，该函数实现实际绘制。绘制将位于从0,0到width()，height()的矩形内。

	QQuickPaintedItem
	QQuickPaintedItem(QQuickItem *parent = Q_NULLPTR)
virtual	~QQuickPaintedItem()
bool	antialiasing() const
QColor	fillColor() const
bool	mipmap() const
bool	opaquePainting() const
virtual void	paint(QPainter *painter) = 0
PerformanceHints	performanceHints() const
RenderTarget	renderTarget() const
void	setAntialiasing(bool enable)
void	setFillColor(const QColor &)
void	setMipmap(bool enable)
void	setOpaquePainting(bool opaque)
void	setPerformanceHint(PerformanceHint hint, bool enabled = true)
void	setPerformanceHints(PerformanceHints hints)
void	setRenderTarget(RenderTarget target)
void	setTextureSize(const QSize &size)
QSize	textureSize() const
void	update(const QRect &rect = QRect())

2. QQmlContext

‌ QQmlContext 是 Qt Quick (QML) 框架中的一个核心类，扮演着C++世界和QML世界之间数据桥梁的角色‌。它定义了QML表达式求值的上下文环境，并允许将C++对象和数据暴露给QML引擎，以便在QML代码中访问‌

	QQmlContext
	QQmlContext(QQmlEngine *engine, QObject *parent = Q_NULLPTR)
	QQmlContext(QQmlContext *parentContext, QObject *parent = Q_NULLPTR)
virtual	~QQmlContext()
QUrl	baseUrl() const
QObject *	contextObject() const
QVariant	contextProperty(const QString &name) const
QQmlEngine *	engine() const
bool	isValid() const
QString	nameForObject(QObject *object) const
QQmlContext *	parentContext() const
QUrl	resolvedUrl(const QUrl &src)
void	setBaseUrl(const QUrl &baseUrl)
void	setContextObject(QObject *object)
void	setContextProperty(const QString &name, QObject *value)
void	setContextProperty(const QString &name, const QVariant &value)
	32 public functions inherited from QObject

主要功能

1. ‌暴露C++数据‌：可以将C++变量、值或整个QObject对象设置为QML上下文中的属性，使QML可以直接通过名称访问这些数据‌
2. 定义QML作用域‌：为QML组件实例提供一个特定的数据环境，QML中的属性绑定和表达式都在这个上下文中进行求值‌
3. 层次结构‌：QQmlContext对象可以形成一个父子层次结构。如果在当前上下文中找不到某个属性，QML引擎会沿着父级链向上查找‌

常见用途

1. 将C++对象暴露给QML‌：最常见的用途是将一个C++ QObject实例设置为上下文属性，使得QML代码可以直接访问该对象的属性、调用其槽函数以及响应其信号‌。
2. 传递简单数据‌：将基本数据类型（如int、QString、bool）或QVariant封装的数据（如QStringList、QVariantMap）暴露给QML‌
3. 设置全局或共享数据‌：通过引擎的根上下文设置的属性，可以被所有由该引擎加载的QML组件访问，常用于共享模型、配置或单例对象‌

其中通过使用setContextProperty，可以在QML中直接访问和操作C++对象，而无需在QML中重新实例化这些对象。

3. qmlRegisterType

在Qt框架中，使用QML可以让你以声明式的方式来编写用户界面和逻辑。为了在QML中使用自定义C++类型，你需要将这些C++类型注册到QML环境中。qmlRegisterType是Qt中用于这一目的的函数之一。
qmlRegisterType 函数允许你将C++类注册到QML环境中，使得这些类可以在QML文件中直接使用。这对于创建自定义的UI组件或者在QML中直接使用C++对象非常有用。
函数原型：

void qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName, const QMetaObject &type);

参数说明
uri: 这是你的QML类型所在的URI，通常遵循“组织名.模块名”的格式。例如，如果你的组织名是com.mycompany，模块名是MyModule，则URI可以是"com.mycompany.MyModule"。

versionMajor: 这是你的模块的主版本号。

versionMinor: 这是你的模块的次版本号。

qmlName: 这是你在QML中将要使用的类型名称。

type: 这是你想要注册的C++类的QMetaObject。

在qml文件中导入

import com.mycompany.MyModule 1.0
 
MyCustomType {
    // 使用MyCustomType的属性和方法...
}

样例代码

使用QQuickPaintedItem显示图像：

class PaintItem: public QQuickPaintedItem
{
    Q_OBJECT
    Q_DISABLE_COPY(PaintItem)
public:
    PaintItem();
    virtual ~PaintItem() override = default;
public:
    void setImage(const QImage &image);
private:
    void paint(QPainter *painter) override;
private:
    QMutex mutex_;
    QImage buffer_;
};

cpp中创建对象用于注册到qml中

class controller: public QObject
{
    Q_OBJECT
public:
    controller();
    virtual ~controller() override = default;
public slots:
    void setImageItem(PaintItem*imageItem); 
private:
    void setNextImage();
private:
    PaintItem* m_item = nullptr;
};

...

void controller::SetImgItem(PaintItem* item)
{
	m_item = item;
}

在cpp中注册对象

qmlRegisterType<PaintItem>("PaintItemModule", 1, 0, "PaintItem");
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty( "$controller", new controller);

在qml中

import PaintItemModule 1.0
...
Window {
    PaintItem{
        id: imageItem
        anchors.fill: parent
         Component.onCompleted: {
            $controller.setImageItem(imageItem);
        }
    }
}

需要刷新图像时只需要在cpp中刷新控件的数据即可

m_item->setImage(QPixmap::fromImage(QImage(img.data, img.cols, img.rows, img.step, QImage::Format_RGB888)));

参考：
https://github.com/188080501/JQImageItem
https://blog.youkuaiyun.com/weixin_50648158/article/details/139968757