QML UI on top of OpenGL rendering in Qt5.3

2019-05-25 19:10发布

I am trying to do render a QML UI on top of my openGL rendering on Qt5.3, and so far the QML widget had a black background while I would like to have a transparent one.

I unfolded my code in a single file so it is easier to read and compile:

#include <QtWidgets/QApplication>
#include <QGLWidget>
#include "QDeclarativeView"


class MyGLWidget : public QGLWidget
{
public:
    void initializeGL();
    void paintGL();
    void resizeGL(int width, int height);
};

void MyGLWidget::initializeGL()
{
    qglClearColor(QColor::fromRgb(128, 0, 0));

    glEnable(GL_DEPTH_TEST);
    glEnable(GL_CULL_FACE);
    glShadeModel(GL_SMOOTH);
    glEnable(GL_MULTISAMPLE);
}

void MyGLWidget::paintGL()
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);   
    glLoadIdentity();
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget* l_window = new QWidget;

    MyGLWidget* l_3dviewport = new MyGLWidget;  
    l_3dviewport->initializeGL();

    QDeclarativeView* l_qmlView = new QDeclarativeView(l_3dviewport);

    l_qmlView->setStyleSheet(QString("background: transparent"));
    l_qmlView->viewport()->setAutoFillBackground(false);
    l_qmlView->setSource(QUrl::fromLocalFile("C:/Rudy/dev/projects/Z3DApplication/Z3DApplication/UI/helloWorld/helloWorld.qml"));
    l_qmlView->show();

    QVBoxLayout *l_layout = new QVBoxLayout(l_3dviewport);
    l_layout->addWidget(l_qmlView);

    QHBoxLayout* l_mainLayout = new QHBoxLayout;
    l_mainLayout->addWidget(l_3dviewport);
    l_window->setLayout(l_mainLayout);

    l_window->resize(QSize(800, 600));
    l_window->show();

    return app.exec();
}

and here is my qml file

import QtQuick 1.1
Rectangle
{

    Rectangle
    {
        id: page
        width: 500; height: 200
        color: "blue"

        Text 
        {
            id: helloText
            text: "Hello world!"
            y: 30
            anchors.fill: parent
            font.pointSize: 24; font.bold: true
        }
    }
}

I expect to see a dark red screen (the openGL view), and the blue QML square in the middle with "Hello World" written. But here is what I get: https://owncloud.fersing.eu/public.php?service=files&t=367514faebdc2adbea8092f50cc81d01 We have the openGL content in dark red and the QML, but the QML layout is black Does anybody know how I can make the background of my QML Layout be transparent? What am I missing?

标签: opengl qml
0条回答
登录 后发表回答