QT4: Transparent Window with rounded corners

21
votes

How can I create a partially transparent window with rounded borders (no standard borders)?

(I used Qt::FramelessWindowHint to disable standard borders)

I tried stylesheets, but border-radius and opacity doesn't seem to have any effect on the window, it only works on children of the enclosing widget.

My second idea was to make the window fully transparent (with setWindowOpacity), and then add an additional widget with rounded corners (since border-radius works on the children), and then group all my other widgets into that widget. But that does not work since setWindowOpacity affects all children as well (I haven't found a way to change this behaviour).

And any ways to make the outer window transparent I could think of (like stylesheets opacity) don't work properly (I only get a black box instead of a transparent window)

Any help would be highly appreciated.

3
c++user-interfaceqtqt4

3 Answers

17
votes

I had a similar problem where I wanted to paint on a toplevel widget and have only the painted part appear. setWindowOpacity changed the opacity of the painted part, which I didn't want.

this->setAttribute(Qt::WA_TranslucentBackground, true);

changed the opacity of the widget without the painted part. I just tried tossing on a button, and that also displays perfectly opaque. So you should be able to display other children however you like.

7
votes

I think you should use a widget masks, as seen in the following example from Qt :

http://doc.qt.io/qt-5/qtwidgets-widgets-shapedclock-example.html

I think you'll find what you're looking for in it !

Hope this helps a bit!

2
votes
 void MainForm::resizeEvent(QResizeEvent * /* event */)
{
    QImage image(this->size(), QImage::Format_Mono);
    image.fill(0);

    if(!this->isFullScreen() && !this->isMaximized())
    {
        image.setPixel(0, 0, 1); image.setPixel(1, 0, 1); image.setPixel(2, 0, 1); image.setPixel(3, 0, 1);
        image.setPixel(0, 1, 1); image.setPixel(1, 1, 1);
        image.setPixel(0, 2, 1);
        image.setPixel(0, 3, 1);

        image.setPixel(width() - 4, 0, 1); image.setPixel(width() - 3, 0, 1); image.setPixel(width() - 2, 0, 1); image.setPixel(width() - 1, 0, 1);
                                                                              image.setPixel(width() - 2, 1, 1); image.setPixel(width() - 1, 1, 1);
                                                                                                                 image.setPixel(width() - 1, 2, 1);
                                                                                                                 image.setPixel(width() - 1, 3, 1);

        image.setPixel(0, height() - 4, 1);
        image.setPixel(0, height() - 3, 1);
        image.setPixel(0, height() - 2, 1); image.setPixel(1, height() - 2, 1);
        image.setPixel(0, height() - 1, 1); image.setPixel(1, height() - 1, 1); image.setPixel(2, height() - 1, 1); image.setPixel(3, height() - 1, 1);

                                                                                                                                                  image.setPixel(width() - 1, height() - 4, 1);
                                                                                                                                                  image.setPixel(width() - 1, height() - 3, 1);
                                                                                                    image.setPixel(width() - 2, height() - 2, 1); image.setPixel(width() - 1, height() - 2, 1);
        image.setPixel(width() - 4, height() - 1, 1); image.setPixel(width() - 3, height() - 1, 1); image.setPixel(width() - 2, height() - 1, 1); image.setPixel(width() - 1, height() - 1, 1);
    }
    this->setMask(QPixmap::fromImage(image));
}