Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Circle user avatar issue
Forum Updated to NodeBB v4.3 + New Features

Circle user avatar issue

Scheduled Pinned Locked Moved Solved General and Desktop
28 Posts 3 Posters 8.1k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • mrjjM mrjj

    @Cobra91151
    Ok , that looks right ?

    Cobra91151C Offline
    Cobra91151C Offline
    Cobra91151
    wrote on last edited by Cobra91151
    #12

    @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:

    0_1517059803364_2018-01-27_152656.png

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

    mrjjM 1 Reply Last reply
    0
    • Cobra91151C 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:

      0_1517059803364_2018-01-27_152656.png

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

      mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #13

      @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.

      1 Reply Last reply
      0
      • mrjjM Offline
        mrjjM Offline
        mrjj
        Lifetime Qt Champion
        wrote on last edited by
        #14

        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 ?

        Cobra91151C 1 Reply Last reply
        0
        • mrjjM 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 ?

          Cobra91151C Offline
          Cobra91151C Offline
          Cobra91151
          wrote on last edited by Cobra91151
          #15

          @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.

          mrjjM 1 Reply Last reply
          0
          • Cobra91151C 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.

            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by
            #16

            @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.

            1 Reply Last reply
            0
            • mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #17

              Ah so user will bring his own avatar image ?

              Cobra91151C 1 Reply Last reply
              0
              • mrjjM mrjj

                Ah so user will bring his own avatar image ?

                Cobra91151C Offline
                Cobra91151C Offline
                Cobra91151
                wrote on last edited by
                #18

                @mrjj

                Yes.

                mrjjM 1 Reply Last reply
                0
                • Cobra91151C Cobra91151

                  @mrjj

                  Yes.

                  mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by
                  #19

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

                  Cobra91151C 1 Reply Last reply
                  0
                  • mrjjM mrjj

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

                    Cobra91151C Offline
                    Cobra91151C Offline
                    Cobra91151
                    wrote on last edited by
                    #20

                    @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);
                    }
                    

                    alt text

                    1 Reply Last reply
                    0
                    • mrjjM Offline
                      mrjjM Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on last edited by mrjj
                      #21

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

                      Cobra91151C 1 Reply Last reply
                      0
                      • mrjjM mrjj

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

                        Cobra91151C Offline
                        Cobra91151C Offline
                        Cobra91151
                        wrote on last edited by Cobra91151
                        #22

                        @mrjj

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

                        mrjjM 1 Reply Last reply
                        0
                        • Cobra91151C Cobra91151

                          @mrjj

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

                          mrjjM Offline
                          mrjjM Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on last edited by
                          #23

                          @Cobra91151
                          as before. drawEllipse

                          Cobra91151C 1 Reply Last reply
                          0
                          • mrjjM mrjj

                            @Cobra91151
                            as before. drawEllipse

                            Cobra91151C Offline
                            Cobra91151C Offline
                            Cobra91151
                            wrote on last edited by Cobra91151
                            #24

                            @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);
                            }
                            

                            0_1517062687531_2018-01-27_161733.png

                            Still image is not fully in a circle.

                            Update:
                            It looks better here:

                            0_1517062937546_2018-01-27_162205.png

                            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.

                            1 Reply Last reply
                            0
                            • mrjjM Offline
                              mrjjM Offline
                              mrjj
                              Lifetime Qt Champion
                              wrote on last edited by
                              #25

                              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.

                              Cobra91151C 1 Reply Last reply
                              1
                              • mrjjM 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.

                                Cobra91151C Offline
                                Cobra91151C Offline
                                Cobra91151
                                wrote on last edited by Cobra91151
                                #26

                                @mrjj

                                So now it looks much better:

                                0_1517064100797_2018-01-27_164133.png

                                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);
                                }
                                
                                mrjjM 1 Reply Last reply
                                0
                                • Cobra91151C Cobra91151

                                  @mrjj

                                  So now it looks much better:

                                  0_1517064100797_2018-01-27_164133.png

                                  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);
                                  }
                                  
                                  mrjjM Offline
                                  mrjjM Offline
                                  mrjj
                                  Lifetime Qt Champion
                                  wrote on last edited by
                                  #27

                                  @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. :)

                                  Cobra91151C 1 Reply Last reply
                                  0
                                  • mrjjM 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. :)

                                    Cobra91151C Offline
                                    Cobra91151C Offline
                                    Cobra91151
                                    wrote on last edited by Cobra91151
                                    #28

                                    @mrjj

                                    So finally I have set it properly and it works great!

                                    void AccountImage::paintEvent(QPaintEvent *event)
                                    {
                                        QPixmap pixmap(":/Icon/my_avatar.png");
                                        QPixmap scaled = pixmap.scaled(width(), height(), Qt::KeepAspectRatioByExpanding, 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);
                                    }
                                    

                                    Result:

                                    0_1517065826536_2018-01-27_171006.png

                                    Thank you for the help.

                                    1 Reply Last reply
                                    1

                                    • Login

                                    • Login or register to search.
                                    • First post
                                      Last post
                                    0
                                    • Categories
                                    • Recent
                                    • Tags
                                    • Popular
                                    • Users
                                    • Groups
                                    • Search
                                    • Get Qt Extensions
                                    • Unsolved