Drawing Rectangle with only 2 corners rounded in Qt

Question

I am working on an application where I need to fill the color for the Pixmap using Painter. Pixmap is of type rectangle with (bottom edge) 2 rounded corners. Top 2 corners are flat/normal.

I tried to use the drawRoundedRect() API of Qt, but it makes all the corners of the rectangle rounded. I need to draw the rectangle with only 2 corners rounded and other two flat.

If anyone comes across the situation, please suggest me the solution.

Thanks

score 21 · Answer 1 · edited Jul 05 '16 at 07:03

You can use QPainterPath for that :

    QPainterPath path;
    path.setFillRule( Qt::WindingFill );
    path.addRoundedRect( QRect(50,50, 200, 100), 20, 20 );
    path.addRect( QRect( 200, 50, 50, 50 ) ); // Top right corner not rounded
    path.addRect( QRect( 50, 100, 50, 50 ) ); // Bottom left corner not rounded
    painter.drawPath( path.simplified() ); // Only Top left & bottom right corner rounded

score 4 · Answer 2 · answered Mar 08 '13 at 08:51

You can use stylesheets (on runtime or loading the file qss). You could manage to do it very easily:

QString str = "bottom-right-radius: 10px; top-right-radius: 0px....";
box->setStylesheet(str);

I suppose the box is a pixmap inside a QLabel ( label->setPixmap(...) )

OR

Set the object name to something (the label), and then use the

QLabel#name { bottom-right-radius: 10px... }

In a stylesheet you load.

Check this site out. It helps: http://border-radius.com/

score 2 · Answer 3 · answered Feb 14 '22 at 11:17

Also you can use arcTo() to create rounded corners.

Showcase:

Code:

// Position of shape
qreal x = 100.0;
qreal y = 100.0;
// Size of shape
qreal width = 300.0;
qreal height = 200.0;
// Radius of corners
qreal corner_radius = 30.0;

QPainterPath path;
path.moveTo(x + corner_radius, y);
path.arcTo(x, y, 2 * corner_radius, 2 * corner_radius, 90.0, 90.0);
path.lineTo(x, y + (height - 2 * corner_radius));
path.arcTo(x, y + (height - 2 * corner_radius), 2 * corner_radius, 2 * corner_radius, 180.0, 90.0);
path.lineTo(x + (width - 2 * corner_radius), y + height);
path.lineTo(x + (width - 2 * corner_radius), y);
path.lineTo(x + corner_radius, y);

painter.drawPath(path);

score 1 · Answer 4 · answered Feb 03 '22 at 20:57

You can separately draw polygon and pies to create rectangle with 2 rounded corners

Code:

// Position of shape
qreal x = 100;
qreal y = 100;
// Radius of corners
qreal border_radius = 30;
// Size of shape
qreal width = 300;
qreal height = 200;

QPolygonF myPolygon;
myPolygon << QPointF(x, y+border_radius) << QPointF(x+border_radius, y+border_radius)
          << QPointF(x+border_radius, y) << QPointF(x+width, y)
          << QPointF(x+width, y+height) << QPointF(x+border_radius, y+height)
          << QPointF(x+border_radius, y+height-border_radius)
          << QPointF(x, y+height-border_radius) << QPointF(x, y+border_radius);

QPainterPath myPath;
myPath.addPolygon(myPolygon);

QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing);
painter.setPen(Qt::NoPen);
QBrush myBrush(QColor(0, 0, 0), Qt::SolidPattern);
painter.setBrush(myBrush);

// Draw base polygon
painter.drawPath(myPath);
// Add rounded corners
painter.drawPie(x, y, 2*border_radius, 2*border_radius, 90*16, 90*16);
painter.drawPie(x, y+height-2*border_radius, 2*border_radius, 2*border_radius, 180*16, 90*16);

How does it look like:

Main polygon:

QPolygonF myPolygon;
myPolygon << QPointF(x, y+border_radius) << QPointF(x+border_radius, y+border_radius)
          << QPointF(x+border_radius, y) << QPointF(x+width, y)
          << QPointF(x+width, y+height) << QPointF(x+border_radius, y+height)
          << QPointF(x+border_radius, y+height-border_radius)
          << QPointF(x, y+height-border_radius) << QPointF(x, y+border_radius);

QPainterPath myPath;
myPath.addPolygon(myPolygon);

// Draw base polygon
painter.drawPath(myPath);

Corners:

// Add rounded corners
painter.drawPie(x, y, 2*border_radius, 2*border_radius, 90*16, 90*16);
painter.drawPie(x, y+height-2*border_radius, 2*border_radius, 2*border_radius, 180*16, 90*16);

score 0 · Answer 5 · answered Mar 15 '16 at 15:41

To extend the answer of Romha Korev. Here an example of a box with only rounded top corners (top left, top right). The rectangles in the corners are calculated based on the main rectangle!

qreal left = 5;
qreal top = 10;
qreal width = 100;
qreal height = 20;
QRectF rect(left, top, width, height);

QPainterPath path;
path.setFillRule( Qt::WindingFill );
path.addRoundedRect(rect, 5, 5 );
qreal squareSize = height/2;
path.addRect( QRect( left, top+height-squareSize, squareSize, squareSize) ); // Bottom left
path.addRect( QRect( (left+width)-squareSize, top+height-squareSize, squareSize, squareSize) ); // Bottom right
painter->drawPath( path.simplified() ); // Draw box (only rounded at top)

Drawing Rectangle with only 2 corners rounded in Qt

5 Answers5

Linked