How do I add a border to a rounded QPixmap?

Question

I'm trying to show a rounded avatar QPixMap with a white border around it. However, I have no clue as to how I could add the border... Is it even possible?

This is the function I have to draw the avatar image.

void AccountDropDownMenu::setAvatar(
        const QByteArray& bytes)
{
    QPixmap new_avatar;
    new_avatar.loadFromData(bytes);
    new_avatar = new_avatar.scaledToHeight(40, Qt::SmoothTransformation);


    QBitmap map(new_avatar.size());
    map.fill(Qt::color0);

    QPainter painter(&map);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(Qt::color1);
    painter.setPen(QPen(Qt::white, 10));
    painter.drawRoundedRect(
            m_avatar_label->x(),
            m_avatar_label->y(),
            new_avatar.width(),
            new_avatar.height(),
            45,
            45);

    new_avatar.setMask(map);

    avatar_label->setPixmap(new_avatar);
}

Update

Thanks to dtech I was able to get the desired output using the following updated function.... Although it's a bit pixly (the border).

void AccountDropDownMenu::setAvatar(
        const QByteArray& bytes)
{
    QPixmap new_avatar;
    new_avatar.loadFromData(bytes);
    new_avatar = new_avatar.scaledToHeight(40, Qt::SmoothTransformation);


    QBitmap map(new_avatar.size());
    map.fill(Qt::color0);

    QPainter painter(&map);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(Qt::color1);
    painter.drawRoundedRect(
                QRectF(
                    avatar_label->x(),
                    avatar_label->y(),
                    new_avatar.width(),
                    new_avatar.height()),
                40,
                40);
    new_avatar.setMask(map);

    QPainter painter2(&new_avatar);
    painter2.setRenderHint(QPainter::Antialiasing);
    painter2.setPen(QPen(Qt::white, 1));
    painter2.drawRoundedRect(
                QRectF(
                    avatar_label->x(),
                    avatar_label->y(),
                    new_avatar.width(),
                    new_avatar.height()),
                40,
                40);

    avatar_label->setPixmap(new_avatar);
}

Possible duplicate of [Add a border to a QPixmap](https://stackoverflow.com/questions/45865524/add-a-border-to-a-qpixmap) — Mohammad Kanan, Jun 04 '18 at 20:39
An answer/solution belongs as an answer, not in the question. Please edit it out and move it to an answer. — Kuba hasn't forgotten Monica, Jun 04 '18 at 22:45

dtech · Accepted Answer · 2018-06-04T21:37:58.023

2

In Qt you draw fills with a brush, but outlines are drawn with a QPen.

I haven't used QPainter in a long time, but IIRC, the default pen is zero width, which would explain why you aren't getting anything - you are not setting a pen.

Also, you don't need "another" rounded rectangle, you can apply fill and outline to the same geometry, as demonstrated in this answer.

Update:

Your updated code sets a mask, which sets an alpha channel. That cuts away from what you already have, it could not possibly add anything. You have to paint on the pixmap. Simply use new_avatar as the paint device - QPainter painter(&new_avatar); and get rid of the rest.

edited Jun 04 '18 at 21:37

answered Jun 04 '18 at 21:02

dtech

47,916
17
112
190

I've updated my question with the pen set but no outline appears. – Rick Jun 04 '18 at 21:24
@Rick you have to set the pen **before** you paint, adoy! – dtech Jun 04 '18 at 21:26
Still no outline haha. Although it did seem to shrink my icon by the size I specified in the pen.... – Rick Jun 04 '18 at 21:28
I did read it, aside from filling the image with a color (this is not what I want) I seem to do the same general things. – Rick Jun 04 '18 at 21:32
No, the background is transparent for the label itself, and behind that it's black. – Rick Jun 04 '18 at 21:36
Thanks, the mask is there so that it makes the QPixmap rounded (like cuts out the corners). But I was able to just add another painter onto the resulting pixmap and add the outline like that... Although it's a bit pixly. Updated with the new function. – Rick Jun 04 '18 at 21:46

How do I add a border to a rounded QPixmap?

1 Answers1