Circle user avatar issue

[Cobra91151]

@mrjj

Ok. I have used painter.drawEllipse(0, 0, pixmap.width(), pixmap.height());

Result:

I think to override QLabel paintEvent method is better choice because I also need to click on that image.

But I should scale it properly.

[mrjj]

@Cobra91151
Hi
Yeah if you need click on label
https://wiki.qt.io/Clickable_QLabel
Then subclass is better.

Just used the scaled function from pixmap to scale it.

QPixmap scaled =pixmap.scaled(width(), height(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
painter->drawPixmap(0,0, scaled);

[Cobra91151]

@mrjj

I have override the paint event method:

void AccountImage::paintEvent(QPaintEvent *event)
{
    QPixmap pixmap(":/Icon/default_avatar.png");
    QPixmap scaled = pixmap.scaled(width(), height(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
    QBrush brush(scaled);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(brush);
    painter.drawPixmap(0, 0, scaled);
    QLabel::paintEvent(event);
}

The result is:

[mrjj]

@Cobra91151
Ok , that looks right ?

[Cobra91151]

@mrjj

No, it's just the image without circle borders.

I have found another solution. To use setMask method:

QPixmap pixmap(":/Icon/default_avatar.png");
label->setPixmap(pixmap);
label->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
label->setFixedSize(100, 100);
QRegion *region = new QRegion(0, 0, label->width(), label->height(), QRegion::Ellipse);
label->setScaledContents(true);
label->setMask(*region);

The result:

It's looks good but the image edges is sharpen. Any ideas how to smooth it?

[mrjj]

@Cobra91151
Hi
But the code you shown did NOT draw circle so i thought you were aware of that ?
The image looked rightly scaled.

As far as i know its not possible to smooth a mask.

[mrjj]

Hi
Do you need to do this dynamically since using 2 images would be much easier.
But i assume you need multiple avatar images and hence having a "circled" version is
not optimal ?

[Cobra91151]

@mrjj

What do you mean to use 2 images? The concept is to display user avatar when he signed in. So it will change dynamically.

[mrjj]

@Cobra91151
One that is normal
and one where you have drawn the highlight/circle on.
and when you select/click QLabel you switch to that image.

[mrjj]

Ah so user will bring his own avatar image ?

[Cobra91151]

@mrjj

Yes.

[mrjj]

@Cobra91151
Ok, then painting yourself seems better :)
What was wrong with the paintEvent + scaled + drawEllipse ?
since you are now looking into masks

[Cobra91151]

@mrjj

I draws the image but not rounds it.

void AccountImage::paintEvent(QPaintEvent *event)
{
    QPixmap pixmap(":/Icon/default_avatar.png");
    QPixmap scaled = pixmap.scaled(width(), height(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
    QBrush brush(scaled);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(brush);
    painter.drawPixmap(0, 0, scaled);
    QLabel::paintEvent(event);
}

[mrjj]

Why not ?
just need the
painter.drawEllipse(0, 0, scaled.width(), scaled.height());
after
painter.drawPixmap(0, 0, scaled);

[Cobra91151]

@mrjj

drawPixmap is draws the pixmap, not circle. What method I should use to get image circle?

[mrjj]

@Cobra91151
as before. drawEllipse

[Cobra91151]

@mrjj

Code:

void AccountImage::paintEvent(QPaintEvent *event)
{
    QPixmap pixmap(":/Icon/default_avatar.png");
    QPixmap scaled = pixmap.scaled(width(), height(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
    QBrush brush(scaled);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(brush);
    painter.drawPixmap(0, 0, scaled);
    painter.drawEllipse(0, 0, scaled.width(), scaled.height());
    QLabel::paintEvent(event);
}

Still image is not fully in a circle.

Update:
It looks better here:

void AccountImage::paintEvent(QPaintEvent *event)
{
    QPixmap pixmap(":/Icon/default_avatar.png");
    QBrush brush(pixmap);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(brush);
    painter.drawRoundedRect(0, 0, width(), height(), 100, 100);
    QLabel::paintEvent(event);
}

But I can't scale it properly.

[mrjj]

Hi
well can scale the image to less that the size of the
QLabel so there are room to draw a circle around the image.
Since the image is the size of the Label , you cant draw outside the image.

so either make image smaller to it can be inside circle or
make image smaller so it fits in circle.

[Cobra91151]

@mrjj

So now it looks much better:

void AccountImage::paintEvent(QPaintEvent *event)
{
    QPixmap pixmap(":/Icon/default_avatar.png");
    QPixmap scaled = pixmap.scaled(width(), height(), Qt::KeepAspectRatio, Qt::SmoothTransformation);
    QBrush brush(scaled);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(brush);
    painter.drawRoundedRect(0, 0, width(), height(), 100, 100);
    QLabel::paintEvent(event);
}

[mrjj]

@Cobra91151
Ah yes. Like brush.
So you want image to be inside the circle and let it clip anything else.
I thought you wanted to paint a circle on it. :)