Display image in Qt with rounder corners

[ars]

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:

QPainter painter( &map );
    painter.setBrush(Qt::color1);
#if 0
    painter.drawRoundedRect( 0, 0, s,s,radius, radius);
#else
    QPolygonF points;
    points.append(QPointF(0,0));
    points.append(QPointF(s-radius,0));
    for(int i=0; i<radius; ++i)
    {
        double x = s-radius+i;
        double y = radius-std::sqrt(radius*radius-i*i);
        points.append(QPointF(x,y));
    }
    points.append(QPointF(s, radius));
    points.append(QPointF(s,s));
    points.append(QPointF(0,s));
 
    painter.drawPolygon(points);
#endif
 
    scaled.setMask(map);
 
    QPainter scaledPainter(&scaled);
    scaledPainter.drawLine(QPointF(s-radius,radius), QPointF(s,radius));
    scaledPainter.drawLine(QPointF(s-radius,0), QPointF(s-radius,radius));
    ui->rounded->setPixmap(scaled);

QPainter painter( &map );
    painter.setBrush(Qt::color1);
#if 0
    painter.drawRoundedRect( 0, 0, s,s,radius, radius);
#else
    QPolygonF points;
    points.append(QPointF(0,0));
    points.append(QPointF(s-radius,0));
    for(int i=0; i<radius; ++i)
    {
        double x = s-radius+i;
        double y = radius-std::sqrt(radius*radius-i*i);
        points.append(QPointF(x,y));
    }
    points.append(QPointF(s, radius));
    points.append(QPointF(s,s));
    points.append(QPointF(0,s));

    painter.drawPolygon(points);
#endif

    scaled.setMask(map);

    QPainter scaledPainter(&scaled);
    scaledPainter.drawLine(QPointF(s-radius,radius), QPointF(s,radius));
    scaledPainter.drawLine(QPointF(s-radius,0), QPointF(s-radius,radius));
    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