Transparent QQuickView inside a QWidget
-
-I have been trying to show a translucent QQuickView inside a QWidget, i have tried the following two methods
- Use QWidget::createWindowWidget()
@
QQuickView* quickView = new QQuickView;
quickView->setResizeMode(QQuickView::SizeRootObjectToView);
quickView->setSurfaceType(QSurface::OpenGLSurface);
QSurfaceFormat surfaceFormat(QSurfaceFormat::StereoBuffers);
surfaceFormat.setRenderableType(QSurfaceFormat::OpenGL);
surfaceFormat.setStereo(true);
surfaceFormat.setStencilBufferSize(8);
surfaceFormat.setSwapBehavior(QSurfaceFormat::DoubleBuffer);
surfaceFormat.setDepthBufferSize(24);
quickView->setFormat(surfaceFormat);quickView->setClearBeforeRendering(true);
quickView->setColor(QColor(Qt::transparent));quickView->setSource(QString::fromStdString("example.qml"));
QWidget* quickViewWidget = QWidget::createWindowContainer(quickView, this);
quickViewWidget->setAttribute(Qt::WA_TranslucentBackground);
quickViewWidget->show();
quickViewWidget->setGeometry(0, 0, 500, 500);
@However using this method I get a black background in place of transparent background.
example.qml
@
import QtQuick 2.0Item {
width: 400
height: 400// we need the transform to flip the framebuffer contents
transform: Scale { origin.x: width / 2; origin.y: height / 2; yScale: -1 }Canvas {
id: canvasanchors.fill: parent SequentialAnimation on rotation { loops: Animation.Infinite PropertyAnimation { to: 360; duration: 1000 } } onPaint: { var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 0, height); gradient.addColorStop(.0, "rgba(255, 0, 0, .5)"); gradient.addColorStop(1.0, "rgba(255, 255, 255, .2)"); ctx.fillStyle = gradient; ctx.translate(width / 2, height / 2); var a = 0.866025403784 * width / 2; ctx.beginPath(); ctx.moveTo(width / 2, 0); ctx.lineTo(-width / 4, -a); ctx.lineTo(-width / 4, a); ctx.lineTo(width / 2, 0); ctx.fill(); }
}
}@- Second method I used is discussed here in this post: https://stackoverflow.com/a/14070477
This post uses a sample that can draw a transparent QQuickView as a QWidget.
https://code.google.com/p/quickwidget/
However, in this case, if i try to set this QuickWidget as a child of another QWidget, QuickWidget is not invisible.
Can anyone suggest how this can be done. (Showing a translucent QQuickView inside a QWidget).
Thanks,
Nitish Puri - Use QWidget::createWindowWidget()
-
@Nitish-Puri I has same problem, did you solve the problem?
-
@Ryan-Lee said in Transparent QQuickView inside a QWidget:
@Nitish-Puri I has same problem, did you solve the problem?
Try using
QQuickWidget
(https://doc.qt.io/qt-5/qquickwidget.html ) instead of QQuickView + QWidget::createWindowContainer(). Does that work? -
@JKSH now I use QQuickWidget, but it't still black background. the following is my code.
declarativeView = new QQuickWidget; QSurfaceFormat fmt; fmt.setAlphaBufferSize(8); declarativeView->setFormat(fmt); QHBoxLayout* lyt = new QHBoxLayout(this); lyt->setMargin(0); lyt->addWidget(declarativeView); quick_view->setLayout(lyt); setWindowFlags(this->windowFlags() |Qt::FramelessWindowHint); declarativeView->setResizeMode(QQuickWidget::SizeRootObjectToView); declarativeView->setAttribute(Qt::WA_TranslucentBackground); declarativeView->setAttribute(Qt::WA_NoBackground); declarativeView->setAttribute(Qt::WA_NoSystemBackground); declarativeView->setStyleSheet("background:transparent;"); declarativeView->rootContext()->setContextProperty("importPicDlg",this); declarativeView->setClearColor(Qt::transparent); declarativeView->setSource(QUrl("qrc:/snapshot/CameraSnapView.qml")); quick_view->setStyleSheet("background:red;border:4px solid green;"); //testing
-
@JKSH Thank you very much, I solved the problem.
declarativeView = new QQuickWidget(this); declarativeView->setAttribute(Qt::WA_AlwaysStackOnTop); // the key function declarativeView->setClearColor(Qt::transparent); QHBoxLayout* lyt = new QHBoxLayout(this); lyt->setMargin(0); lyt->addWidget(declarativeView);