Results 1 to 6 of 6

Thread: Rouding corners of a QPixmap

  1. #1
    Join Date
    Jul 2011
    Posts
    42
    Thanks
    4
    Thanked 1 Time in 1 Post
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Question Rouding corners of a QPixmap

    Hey there!

    Im building a QGridLayout that will display images (loaded from id3Tags) in each cell. Right now im using QLabels or QWidgets to wrap the image in a QPixmap.
    The problem that i have is that the images are rectangles and i want them to be displayed with nice and smooth rounded corners.
    How could i accomplish that?

    I've tried creating a custom widget that would paint a rounded rectangle and then paint a pixmap, but the pixmap doesnt get rounded.
    Then i found that i can set a mask on the pixmap, so i think i could set a mask with rounded corners, but dont know how to do that rounded qbitmap.

    what i tried:
    Qt Code:
    1. void RoundedCover::paintEvent(QPaintEvent *)
    2. {
    3. QRectF rect(0,0,150,150);
    4.  
    5. QPainter painter(this);
    6. painter.drawPixmap(0,0, _pixmap);
    7. painter.setRenderHint(QPainter::TextAntialiasing);
    8. painter.setWorldMatrixEnabled(false);
    9. painter.setPen(QPen( QBrush(QColor("darkgrey"), Qt::SolidPattern), 2.0));
    10. painter.drawRoundedRect(rect, 20.0, 15.0);
    11. }
    To copy to clipboard, switch view to plain text mode 

    I thought about something like...
    Qt Code:
    1. void RoundedCover::paintEvent(QPaintEvent *)
    2. {
    3. QRectF rect(0,0,150,150);
    4.  
    5. QPainter painter(this);
    6. _pixmap.setMask(....);//Something here to make it rounded
    7. painter.drawPixmap(0,0, _pixmap);
    8. painter.setRenderHint(QPainter::TextAntialiasing);
    9. painter.setWorldMatrixEnabled(false);
    10. painter.setPen(QPen( QBrush(QColor("darkgrey"), Qt::SolidPattern), 2.0));
    11. painter.drawRoundedRect(rect, 20.0, 15.0);
    12. }
    To copy to clipboard, switch view to plain text mode 

    any ideas?
    thanks!

  2. #2
    Join Date
    Oct 2007
    Location
    Lake Forest, CA, USA
    Posts
    132
    Thanks
    10
    Thanked 27 Times in 22 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android

    Default Re: Rouding corners of a QPixmap

    What about style sheets?
    Qt Code:
    1. QLabel#albumCover
    2. {
    3. border-radius: 10px;
    4. }
    To copy to clipboard, switch view to plain text mode 
    Oleg Shparber

  3. #3
    Join Date
    Jul 2011
    Posts
    42
    Thanks
    4
    Thanked 1 Time in 1 Post
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Rouding corners of a QPixmap

    in order to use an image as the content of the QLabel im doing:
    Qt Code:
    1. QLabel *cover2 = new QLabel();
    2. QPixmap pix2("cover2.jpg");
    3. pix2 = pix2.scaled(150, 150, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
    4. cover2->setPixmap(pix2);
    5. cover2->setStyleSheet("border:2px solid grey; border-radius: 10px;background-color: transparent;");
    To copy to clipboard, switch view to plain text mode 

    And when i do that, the label gets rounded but the image doesnt, so the corner are overlaped.

  4. #4
    Join Date
    Oct 2007
    Location
    Lake Forest, CA, USA
    Posts
    132
    Thanks
    10
    Thanked 27 Times in 22 Posts
    Qt products
    Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android

    Default Re: Rouding corners of a QPixmap

    Qt Code:
    1. void CoverWidget::paintEvent(QPaintEvent *e)
    2. {
    3. Q_UNUSED(e)
    4.  
    5. QImage image("image.jpg");
    6. QBrush brush(image);
    7.  
    8. QPainter painter(this);
    9. painter.setRenderHint(QPainter::Antialiasing);
    10. painter.setBrush(brush);
    11. painter.drawRoundedRect(0, 0, width(), height(), 5, 5);
    12. }
    To copy to clipboard, switch view to plain text mode 
    Oleg Shparber

  5. The following 4 users say thank you to Oleg for this useful post:

    d_stranz (18th November 2011), grizzancs (4th September 2013), JandunCN (6th June 2014), superpacko (21st November 2011)

  6. #5
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Rouding corners of a QPixmap

    Nice, Oleg.

    I think that if the image is smaller than the rect, the brush will tile the image to fill it. So to make sure this doesn't happen, the paintEvent should probably check the size of the image. If it is smaller, then two rects should be drawn: the outer, rounded rect with a plain brush, then the smaller square-cornered rect centered inside with the cover image brush. (Or you could scale the image larger to fit).

    Likewise, if the image is larger than the button, it could be scaled and then used to set the brush texture.

  7. #6
    Join Date
    Jul 2011
    Posts
    42
    Thanks
    4
    Thanked 1 Time in 1 Post
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Rouding corners of a QPixmap

    Thanks Oleg! it worked great, i didnt know i could use an image as a brush. Nice solution!

Similar Threads

  1. Rounded corners for a QWidget
    By Ying in forum Qt Programming
    Replies: 5
    Last Post: 2nd September 2011, 08:46
  2. QMenu round corners
    By medved6 in forum Qt Programming
    Replies: 9
    Last Post: 17th September 2010, 23:33
  3. QDialog with rounded corners
    By rossm in forum Qt Programming
    Replies: 2
    Last Post: 28th April 2009, 00:31
  4. Mem'ries (like the corners of my mind)
    By baray98 in forum Qt Programming
    Replies: 1
    Last Post: 12th October 2007, 17:43
  5. widget with rounded corners
    By sreedhar in forum Qt Programming
    Replies: 4
    Last Post: 7th June 2006, 13:18

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.