Transparent QQuickView inside a QWidget



  • -I have been trying to show a translucent QQuickView inside a QWidget, i have tried the following two methods

    1. 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.0

    Item {
    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: canvas

    anchors.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();
    }
    

    }
    }@

    1. 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.