11

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

0

5 Answers 5

21

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
0
4

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/

3

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

Showcase:

enter image description here

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);
2

You can separately draw polygon and pies to create rectangle with 2 rounded corners enter image description here

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:

enter image description here

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

enter image description here

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

enter image description here

0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.