1
votes

I would like to create a shape like this in Qt:

enter image description here

Here is the piece of the code (Basically draws a rectangle and draws an arc over it):

 QPainterPath groupPath;
 QPen pen;

 pen.setCosmetic(true);

 groupPath.moveTo(60.0, 40.0);
 groupPath.arcTo(40.0, 35.0, 40.0, 10.0, 180.0, 180.0);
 groupPath.moveTo(40.0, 40.0);
 groupPath.lineTo(40.0, 80.0);
 groupPath.arcTo(40.0, 75.0, 40.0, 10.0, 0.0, 180.0);
 groupPath.arcTo(40.0, 75.0, 40.0, 10.0, 0.0, 180.0);
 groupPath.lineTo(80.0, 80.0);
 groupPath.lineTo(80.0, 40.0);
 groupPath.closeSubpath();
 //setFixedSize(135, 80);
 QPainter painter(this);
 painter.setPen(pen);
 painter.drawPath(groupPath);

The code creates top and bottom bendings, but I was unable to create left and right ones. Is there another way to do this? I saw Clipping, but not sure if it will work.

1

1 Answers

2
votes

here is an approximation

auto convexRect = [](QPainterPath& pp, QRect r) {

    const int K = 20;
    QPoint
        tl = r.topLeft(), tr = r.topRight(), bl = r.bottomLeft(), br = r.bottomRight(),
        dy(0, K), dx(K, 0);

    pp.moveTo(tl);
    pp.cubicTo(tl + dy, tr + dy, tr);
    pp.cubicTo(tr - dx, br - dx, br);
    pp.cubicTo(br - dy, bl - dy, bl);
    pp.cubicTo(bl + dx, tl + dx, tl);
};

QPainterPath pp;
QRect r(0, 0, 200, 600);
convexRect(pp, r);
convexRect(pp, r.adjusted(20, 20, -20, -20));

yields

enter image description here

Maybe you can get better result scaling a convex rect, instead of redefining it.