Results 1 to 13 of 13

Thread: Display image in Qt with rounder corners

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #8
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    120
    Thanked 42 Times in 41 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Display image in Qt with rounder corners

    Hello,

    just looking at the relatively small pictures one could think that only straight lines are cut off. Increasing the size of the picture and the radius we see that the corners are rounded. If you do not like the way roundedRect() works, you could use a user defined polygon instead. With this approach you can create nearly every form you want. As an example, the code below rounds the upper right corner of the image:
    Qt Code:
    1. QPainter painter( &map );
    2. painter.setBrush(Qt::color1);
    3. #if 0
    4. painter.drawRoundedRect( 0, 0, s,s,radius, radius);
    5. #else
    6. QPolygonF points;
    7. points.append(QPointF(0,0));
    8. points.append(QPointF(s-radius,0));
    9. for(int i=0; i<radius; ++i)
    10. {
    11. double x = s-radius+i;
    12. double y = radius-std::sqrt(radius*radius-i*i);
    13. points.append(QPointF(x,y));
    14. }
    15. points.append(QPointF(s, radius));
    16. points.append(QPointF(s,s));
    17. points.append(QPointF(0,s));
    18.  
    19. painter.drawPolygon(points);
    20. #endif
    21.  
    22. scaled.setMask(map);
    23.  
    24. QPainter scaledPainter(&scaled);
    25. scaledPainter.drawLine(QPointF(s-radius,radius), QPointF(s,radius));
    26. scaledPainter.drawLine(QPointF(s-radius,0), QPointF(s-radius,radius));
    27. ui->rounded->setPixmap(scaled);
    To copy to clipboard, switch view to plain text mode 

    It also draws vertical and horizontal lines for the corner radius (just for visualization). In the code above, s is the image size and radius the radius of the rounded corner.

    Here is an example with s = 128 and radius=20:
    Rounded.png

    Best regards
    ars

  2. The following user says thank you to ars for this useful post:

    Cupidvogel (21st November 2015)

Similar Threads

  1. Replies: 1
    Last Post: 18th October 2015, 12:06
  2. how to remove previous image to display new image in QImage
    By iswaryasenthilkumar in forum Newbie
    Replies: 6
    Last Post: 5th January 2015, 10:53
  3. Modify image to have round corners
    By migel in forum Newbie
    Replies: 1
    Last Post: 4th September 2012, 11:38
  4. Replies: 1
    Last Post: 18th January 2012, 10:00

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
  •  
Qt is a trademark of The Qt Company.