gdw2
gdw2

Reputation: 8016

Qt Widget with Transparent Background

(I'm using PySide, but I think the answer would be the same/similar for any language bindings).

I'm trying to take the shaped clock example, located here, and cause the face of the clock (circle) to be transparent so that all I see are the clock hands and minute ticks. As is, when the example runs, it looks like this. I'm using Windows 7.

So far, I've tried the following (in the constructor):

Upvotes: 9

Views: 28656

Answers (3)

KaZ
KaZ

Reputation: 1163

In the clock example there is:

void ShapedClock::resizeEvent(QResizeEvent * /* event */)
{
    int side = qMin(width(), height());
    QRegion maskedRegion(width() / 2 - side / 2, height() / 2 - side / 2, side,
                         side, QRegion::Ellipse);
    setMask(maskedRegion);
}

The setMask do the round shape.

But there's the same in PySide:

def resizeEvent(self, event):
    side = min(self.width(), self.height())
    maskedRegion = QtGui.QRegion(self.width()/2 - side/2, self.height()/2 - side/2, side, side, QtGui.QRegion.Ellipse)
    self.setMask(maskedRegion)

so it should work too?

Upvotes: 1

BLeAm
BLeAm

Reputation: 71

If I remember correctly, you should have set its stylesheet also:

self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
self.setStyleSheet("background:transparent;")

Hope that helps.

Upvotes: 7

gdw2
gdw2

Reputation: 8016

Got it!

This is from the original example code (constructor):

    ...
    self.setWindowFlags(self.windowFlags() | QtCore.Qt.FramelessWindowHint)
    ...

Here is the modified (and working per my question) version:

    ...
    self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
    self.setAttribute(QtCore.Qt.WA_TranslucentBackground)
    ...

Removing the self.windowFlags() was the part I was missing. (I'm not exactly sure why I needed to remove this or why it was there to begin with... still much to learn).

Upvotes: 14

Related Questions