![912129b0199b9684602e231cb8036926.png](https://i-blog.csdnimg.cn/blog_migrate/12ad553eba8ead9f4b2cb8e5ee8de773.jpeg)
总第40篇
本文主要详细梳理了Qt项目开发过程中,对图形的三种渐变填充方式,以便后面参考。
在Qt中,目前支持三种渐变填充方式,这三种方式都是QGradient
的子类,它可以与画刷 QBrush
组合使用,来指定特定对象图形的填充方式。这三种填充方式是:
QLinearGradient:
显示从起点到终点的直线渐变;QRadialGradient:
显示以圆心为中心的圆形渐变;QConicalGradient:
显示围绕一个中心点的锥形渐变;
三种渐变填充方式的效果如下图所示:
![7816821266eb8dd378b22be6f1bb8c97.png](https://i-blog.csdnimg.cn/blog_migrate/672550cdb4489252ce6080df078af621.png)
图形的渐变填充方式可以通过type()
函数来获得,渐变区域外部的延伸填充方式也有三种,可以通过spread()
函数获得。 可以使用QGradientStop
类来描述渐变中过渡点的位置和颜色 ,例如可以使用setColorAt()
函数来定义一个过渡点,或者使用setStops()
函数来一次定义多个过渡点, 要注意的是,后者的功能将替换当前设置的过渡点。如果没有指定过渡点,将默认从0
点(黑色)渐变为1
点(白色)。
1.直线渐变-GLinearGradient
QLinearGradient
类构造函数的第一个参数指定渐变的起点,第二个参数指定渐变的终点, 然后显示渐变。成员函数setColorAt()
设置起点和终点之间要显示的颜色。成员函数setSpread()
可以设置起点和终点区域之外的显示模式,其显示效果如下所示:
![748f134cd1c49bd7e9365ed22e07ea6b.png](https://i-blog.csdnimg.cn/blog_migrate/7b218bedd80c47c7a6cad7e0687a79de.png)
直线渐变在项目中的使用方法,下面给出了示例代码:
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
// 设置渐变色
QLinearGradient linear(QPointF(80, 80), QPointF(150, 150));
linear.setColorAt(0, Qt::black);
linear.setColorAt(1, Qt::white);
// 设置显示模式
linear.setSpread(QGradient::PadSpread);
// 设置画笔颜色、宽度
painter.setPen(QPen(QColor(0, 160, 230), 2));
// 设置画刷填充
painter.setBrush(linear);
// 绘制椭圆
painter.drawRect(QRect(40, 40, 180, 180));
}
2.圆形渐变-QRadialGradient
QRadialGradient
类是以圆心显示渐变,其构造函数的前两个参数指定圆心坐标,第三个参数是半径,后面两个参数指定渐变的起始点。其渐变区域之外的显示模式效果如下图所示:
![0d88cc7eebcf45ff987467c780084d7d.png](https://i-blog.csdnimg.cn/blog_migrate/157236e5505707151ae26cca8eee5406.jpeg)
圆形渐变在项目中使用的示例代码如下所示:
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 反走样
painter.setRenderHint(QPainter::Antialiasing, true);
// 设置渐变色
QRadialGradient radial(110, 110, 50, 130, 130);
radial.setColorAt(0, Qt::black);
radial.setColorAt(1, Qt::white);
// 设置显示模式
radial.setSpread(QGradient::ReflectSpread );
// 设置画笔颜色、宽度
painter.setPen(QPen(QColor(0, 160, 230), 2));
// 设置画刷填充
painter.setBrush(radial);
// 绘制椭圆
painter.drawRect(QRect(40, 40, 180, 180));
}
3.锥形渐变-QConicalGradient
QConicalGradient
类的构造函数前两个参数指定渐变的中心坐标,第三个参数指定渐变的角度,它是逆时针方向显示渐变的。其渐变效果如下图所示:
![48aa2aab24b84bdb18a2923207176b80.png](https://i-blog.csdnimg.cn/blog_migrate/e07e89dd9471f19489096410c207a640.png)
在项目中,其使用方式代码示例如下:
void MainWindow::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
// 反走样
painter.setRenderHint(QPainter::Antialiasing, true);
// 设置渐变色
QConicalGradient conical(110, 110, 45);
conical.setColorAt(0, Qt::black);
conical.setColorAt(1, Qt::white);
// 设置画笔颜色、宽度
painter.setPen(QPen(QColor(0, 160, 230), 2));
// 设置画刷填充
painter.setBrush(conical);
// 绘制椭圆
painter.drawRect(QRect(40, 40, 180, 180));
}
最后,有一个值得注意的地方,就是在paintEvent()
中,一般我们在绘图时会开启反走样以防锯齿
,但是在单纯画直线时,要关闭反走样,否则画出来的直线会非常模糊并且会变粗。这是我在项目过程中遇到的一个问题。关闭反走样可用下面这句:
painter.setRenderHint(QPainter::Antialiasing,false);
本文到此结束!
如果对你有帮助,请随手 点赞 或 点喜欢!
=======================================================
欢迎【关注、私信 @武三郎】。我们一起交流一起进步。