Round window

bunjee · #1 23rd November 2007, 13:20

Hey there,

I'm trying to display a window widget with rounded edges.
I've tryed with setMask + specifying a mask, but the result is not convincing.

Qt Code:
1
2
3
4
5
QRect maskRect(rect().x() + 1, rect().y() + 1, 
            rect().width() - 1, rect().height() - 1);
 
setMask(QRegion(ZePainterController::get()->DrawRoundRect(maskRect,
                    2000 / maskRect.width(), 2000 / maskRect.height()).toFillPolygon().toPolygon()));

Don't know If I should use a mask bitmap ?

bunjee · #2 25th November 2007, 11:20

Anybody has a code snipet for this ?

Uwe · #3 25th November 2007, 12:03

QwtDial ( http://qwt.sourceforge.net/class_qwt_dial.html ) is such a widget. Look at the code of QwtDial::updateMask.

HTH,
Uwe

marcel · #4 25th November 2007, 13:51

Quote:

Originally Posted by Uwe

QwtDial ( http://qwt.sourceforge.net/class_qwt_dial.html ) is such a widget. Look at the code of QwtDial::updateMask.

HTH,
Uwe

Unfortunately that won't work for windows. There is no antialiasing done for top-level windows. For an alternative, see this http://www.qtcentre.org/forum/f-qt-s...sses-9301.html.

bunjee · #5 25th November 2007, 20:23

I've coded rounded painting path to use with my mask :

Qt Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
QPainterPath path;
 
    path.moveTo(r.x() + 7, r.y());
    path.lineTo(r.x() + r.width() - 7, r.y());
 
    // Upper right
    path.lineTo(r.x() + r.width() - 6, r.y() + 1);
    path.lineTo(r.x() + r.width() - 5, r.y() + 1);
 
    path.lineTo(r.x() + r.width() - 1, r.y() + 5);
    path.lineTo(r.x() + r.width() - 1, r.y() + 6);
    path.lineTo(r.x() + r.width(), r.y() + 7);
 
    path.lineTo(r.x() + r.width(), r.y() + r.height() - 7);
 
    // Lower right
    path.lineTo(r.x() + r.width() - 1, r.y() + r.height() - 6);
    path.lineTo(r.x() + r.width() - 1, r.y() + r.height() - 5);
 
    path.lineTo(r.x() + r.width() - 5, r.y() + r.height() - 1);
    path.lineTo(r.x() + r.width() - 6, r.y() + r.height() - 1);
    path.lineTo(r.x() + r.width() - 7, r.y() + r.height());
    
    path.lineTo(r.x() + 7, r.y() + r.height());
 
    // Lower left
    path.lineTo(r.x() + 6, r.y() + r.height() - 1);
    path.lineTo(r.x() + 5, r.y() + r.height() - 1);
 
    path.lineTo(r.x() + 1, r.y() + r.height() - 5);
    path.lineTo(r.x() + 1, r.y() + r.height() - 6);
    path.lineTo(r.x(), r.y() + r.height() - 7);
 
    path.lineTo(r.x(), r.y() + 7);
 
    // Upper left
    path.lineTo(r.x() + 1, r.y() + 6);
    path.lineTo(r.x() + 1, r.y() + 5);
 
    path.lineTo(r.x() + 5, r.y() + 1);
    path.lineTo(r.x() + 6, r.y() + 1);
    path.lineTo(r.x() + 7, r.y());

Here is my paint event and my resize event on my main widget :

Qt Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
void ZeMessengerWindow::paintEvent(QPaintEvent * event)
{
    QPainter painter(this);
    //painter.setRenderHint(QPainter::Antialiasing, true);
 
    QPen pen;
    pen.setBrush(ZeStyle::get()->getBorderColor());
    painter.setPen(pen);
 
    painter.setBrush(QColor(0, 0, 0, 0));
 
    QRect rectBack(rect().x(), rect().y(), 
                   rect().width() - 1, rect().height() - 1);
 
    ZePainterController::get()->DrawRoundRect(painter, rectBack);
}
 
//=============================================================================
//=============================================================================
 
void ZeMessengerWindow::resizeEvent(QResizeEvent * event)
{
    setMask(QRegion(ZePainterController::get()->DrawRoundRect(rect()).toFillPolygon().toPolygon()));
}

The top corners are working fine, unfortunately I have the following bug on the lower corners :

Top :

Bottom :

It's like the mask was antialiased or something