Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

QT4: Transparent Window with rounded corners

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.

like image 881
smerlin Avatar asked Dec 15 '09 17:12

smerlin


3 Answers

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.

like image 134
ctd Avatar answered Oct 21 '22 10:10

ctd


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!

like image 26
Andy M Avatar answered Oct 21 '22 09:10

Andy M


 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));
}
like image 43
Voland Avatar answered Oct 21 '22 11:10

Voland