qml+opencv（一）

前言

突然想起opencv，一直想做人脸识别，可是理论基础太水，只能慢慢来，去年学习了一会，然后公司让我去搞app和网络，就一直搁着，现在学习qml，突然想能不能在qml里面使用opencv，所以就有了这篇文章。

QQuickItem和QObject

在QML中，可视化的基础组件是Item，不可视化的就是QtObject，它们对应C++中的QQuickItem和QObject类，扩展QML组件一个继续基于QML中的Item扩张，还有就是继承QQuickItem，我们想把opencv加到QML中，那么只有继承QQuickItem了。
怎么使用，那还要看QML新的渲染机制，Qt5的QML渲染基于OpenGL，其场景的渲染在单独的线程进行，我们需要需要QQuickItem返回能够描述场景的对象，就是QSGNode。实现QQuick的updatePaintNode函数就OK了，我们在updatePaintNode，描述怎么渲染。

类的关系

OpenCVcapture继承QOjbect，其是图像捕获的基类，OpenCVcamera是OpenCVcapture子类，完成从摄像头捕获数据。OpenCVaction类封装了opencv图像算法操作。OpenCVshowFrame继承QQuickItem，实现可视化。

1#include <QApplication>
2#include <QQmlApplicationEngine>
3#include <QtQml/qqml.h>
4#include "opencvcamera.h"
5#include "opencvshowframe.h"
6
7int main(int argc, char *argv[])
8{
9    QApplication app(argc, argv);
10
11    qmlRegisterType<OpenCVcamera>("OpenCV", 1, 0, "OpenCVcamera");
12    qmlRegisterType<OpenCVshowFrame>("OpenCV", 1, 0, "OpenCVshowFrame");
13
14    QQmlApplicationEngine engine;
15    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
16
17    return app.exec();
18}
19
20
21import QtQuick 2.4
22import QtQuick.Controls 1.3
23import QtQuick.Window 2.2
24import QtQuick.Dialogs 1.2
25import OpenCV 1.0
26
27ApplicationWindow {
28    title: qsTr("Hello World")
29    width: 640
30    height: 480
31    visible: true
32
33    menuBar: MenuBar {
34        Menu {
35            title: qsTr("&File")
36            MenuItem {
37                text: qsTr("&Open")
38                onTriggered: {
39
40                    //messageDialog.show(qsTr("Open OpenCV triggered"));
41                    opencvCamera.m_run = true
42                }
43
44            }
45            MenuItem {
46                text: qsTr("&Close")
47                onTriggered: {
48
49                    //messageDialog.show(qsTr("Open OpenCV triggered"));
50                    opencvCamera.m_run = false
51                }
52
53            }
54            MenuItem {
55                text: qsTr("E&xit")
56                onTriggered: Qt.quit();
57            }
58        }
59    }
60
61    OpenCVcamera {
62        id:opencvCamera
63        m_cameraId: 1
64        m_run: false
65
66        //width: 320
67        //height: 240
68    }
69
70    OpenCVshowFrame {
71        anchors.centerIn: parent
72        id:opencvShowFrame
73        m_capture: opencvCamera
74        m_frameRate: 33
75        m_run: true
76        width: 480
77        height: 320
78    }
79
80
81    MessageDialog {
82        id: messageDialog
83        title: qsTr("May I have your attention, please?")
84
85        function show(caption) {
86            messageDialog.text = caption;
87            messageDialog.open();
88        }
89    }
90}

效果

我封装了轮廓扫描的算法操作。

updatePaintNode

1QSGNode* OpenCVshowFrame::updatePaintNode(QSGNode *old, UpdatePaintNodeData *)
2{
3    QSGSimpleTextureNode *texture = static_cast<QSGSimpleTextureNode*>(old);
4    if (texture == NULL) {
5        texture = new QSGSimpleTextureNode();
6    }
7    QImage img;
8    IplImage *iplImage = NULL;
9    IplImage *out = NULL;
10    if (m_capture) {
11        iplImage = static_cast<OpenCVcapture*>(m_capture)->getFrame();
12    }
13    if (iplImage != NULL) {
14        out = doActions(iplImage);
15        uchar *imgData = (uchar *)out->imageData;
16        //qDebug() << out->depth << out->nChannels;
17        img = QImage(imgData, out->width, out->height, QImage::Format_RGB888);
18    } else {
19        img = QImage(boundingRect().size().toSize(), QImage::Format_RGB888);
20    }
21    QSGTexture *t = window()->createTextureFromImage(img.scaled(boundingRect().size().toSize()));
22    if (t) {
23        QSGTexture *tt = texture->texture();
24        if (tt) {
25            tt->deleteLater();
26        }
27        texture->setRect(boundingRect());
28        texture->setTexture(t);
29    }
30    if (out) {
31        cvReleaseImage(&out);
32    }
33    return texture;
34}

使用了QSGSimpleTextureNode，然后我们将opencv的图像，作为一个QSGTexture，然后返回给渲染的线程进行场景的渲染。

这里还要说下，Qt的QImage，不支持单通道的灰度图，我们需要转换成RGB才能正确的显示。