QML:Transparency for an rectangle is not working

kbalar picture kbalar · Oct 19, 2011 · Viewed 7.4k times · Source

How to set transparency of an rectangle/screen.

I have Following code:

// main.cpp
void main(int argc, char*[] argv)
{
    QApplication::setGraphicsSystem("raster");
    QApplication app(argc, argv);

    QDeclerativeView view;
    view.setSource(QUrl::fromLocalFile("loaderTest.qml"));

    view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
    view.showFullScreen();

    //QRegion mask(10, 10,  100, 100);
    //view.setMask();

    view.show();
    app.exec();
}

And QML file is:

//loaderTest.qml
Rectangle
{
    id: mainRectangle
    width: 1000
    height: 700
    color: "transparent"
    //color: "#00000000"

    Image
    {
        id: image1;
        width: 348;
        height: 155;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.verticalCenter: parent.verticalCenter;
        source: "test.png"
    }

    Loader
    {
        id: mainLoader
        anchors.fill: parent;
        source: "";
        focus: true;
    }
}

I have one loader and one image in this screen and background color is transparent. When i run this application it should display transparent background with image in the center (as i have not set loader source).

but what i am getting is image in center with white background filled in the screen, I don’t know who is filling in this white background color as i have mentioned transparent color as background.

I am using QT.4.7.0 and Linux.

I have two planes on my target system one is Video plane and another is graphics plane, when i run GUI with transparent background (set transparency at video place) it should display video on Video place in above example it is showing background as white, as it should have displayed video playing on Video plane.

Answer

blakharaz picture blakharaz · Oct 19, 2011

By default the QDeclarativeView paints a background. Maybe that's the problem in your case.

From http://doc.qt.nokia.com/4.7/qdeclarativeperformance.html

You can also prevent QDeclarativeView from painting its window background if you will provide the background of your application using QML, e.g.

 QDeclarativeView window;
 window.setAttribute(Qt::WA_OpaquePaintEvent);
 window.setAttribute(Qt::WA_NoSystemBackground);
 window.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
 window.viewport()->setAttribute(Qt::WA_NoSystemBackground);