持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情。

在我们使用Qt绘制背景时，为了展示效果更加柔和会将矩形变成圆角矩形，让页面看起来不会那么生硬。

今天我要为大家讲述的就是如何在QPainter中绘制圆角边框背景区域，首先我们可以看一个简单的实现效果

圆角4普通.png

说起来实现圆角矩形的方式有两种，并且这两种不同的方式展示出来的效果也是不一样的。

功能

假设，现在需要实现一个圆度是4的圆角矩形，分别用两种不同的方式进行实现。

方法1

采用QPainter自带的功能drawRoundRect实现。

painter.setPen(QColor(255, 182, 193));
painter.setBrush(QColor(255, 182, 193));
painter.drawRoundRect(100, 100, 600, 300, 4, 4);

实际的运行效果图如下：

圆角4普通有锯齿.png

不难发现，圆角是展示出来了，但是仔细观察四个角会发现，圆度不是很平滑，这是，在绘制图形之前需要对图形进行抗锯齿操作

painter.setRenderHint(QPainter::Antialiasing); //抗锯齿

由此一来，图形的曲线就会流畅很多了

下面是添加了抗锯齿的圆角矩形。

圆角4普通.png

方法2

采用QPainterPath方法中addRoundedRect方式，绘制圆角矩形。

QPainterPath path;
path.addRoundedRect(QRect(100, 100, 600, 300), 4.0, 4.0);
painter.fillPath(path, QBrush(QColor(255, 182, 193)));

实际的运行效果图如下：

圆角4QPainter绘图.png

对比这两种方法展示的效果，大家会发现，第一种方式的圆度参数是int类型，第二种方法参数类型确实float类型。

其实，在使用方法2时，还有一种设置圆角矩形的方式，如下

painter.setRenderHint(QPainter::Antialiasing); //抗锯齿
painter.setPen(QColor(255, 182, 193));
painter.setBrush(QColor(255, 182, 193));
QPainterPath path;
path.addRoundedRect(QRect(100, 100, 600, 300), 4.0, 4.0);
painter.drawPath(path);

这两种方式的显示效果没啥区别。

难度提升

介绍了两种最基本的绘制方式后，接下来说一个有些难度的绘制。

在绘制图形时，有时并不是四个角全部采用圆角矩形，有可能是上面两个角是圆角的，下面两个角变成了直角，就如图下面的展示效果

上面2个圆角.png

为了让效果更明显，我将原角度4改成了10，更能直观看出效果来。

对于这种图形的绘制，该如何操作呢？

对此我偷了一个懒，将圆角矩形区域与直角矩形的区域拼接到了一起，代码如下

QPainterPath path;
path.addRoundedRect(QRect(100, 100, 600, 200), 10.0, 10.0);
path.addRect(QRect(100, 290, 600, 100));
painter.fillPath(path, QBrush(QColor(255, 182, 193)));

但是仅仅是这样还不够，实际的运行效果如下：

上面2个圆角错误.png

怎么会这样？难道是区域设置的不对吗？

后来我才发现，需要设置path.setFillRule(Qt::WindingFill);才能让图形填充整个区域，这也算是一个小坑吧！希望大家可以注意~

好了，今天对圆角矩形的介绍到这里就结束了~

我是中国好公民st，一名C++开发程序猿~

Qt|设置圆角边框区域的方法

功能

方法1

方法2

难度提升