在Qt中,目前支持三种渐变填充方式,这三种方式都是QGradient的子类,它可以与画刷 QBrush组合使用,来指定特定对象图形的填充方式。这三种填充方式是:
QLinearGradient:显示从起点到终点的直线渐变;
QRadialGradient:显示以圆心为中心的圆形渐变;
QConicalGradient:显示围绕一个中心点的锥形渐变;
三种渐变填充方式的效果如下图所示:
图形的渐变填充方式可以通过type()函数来获得,渐变区域外部的延伸填充方式也有三种,可以通过spread()函数获得。 可以使用QGradientStop类来描述渐变中过渡点的位置和颜色 ,例如可以使用setColorAt()函数来定义一个过渡点,或者使用setStops()函数来一次定义多个过渡点, 要注意的是,后者的功能将替换当前设置的过渡点。如果没有指定过渡点,将默认从0点(黑色)渐变为1点(白色)。
1.直线渐变-GLinearGradient
QLinearGradient类构造函数的第一个参数指定渐变的起点,第二个参数指定渐变的终点, 然后显示渐变。成员函数setColorAt()设置起点和终点之间要显示的颜色。成员函数setSpread()可以设置起点和终点区域之外的显示模式,其显示效果如下所示:
直线渐变在项目中的使用方法,下面给出了示例代码:
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类是以圆心显示渐变,其构造函数的前两个参数指定圆心坐标,第三个参数是半径,后面两个参数指定渐变的起始点。其渐变区域之外的显示模式效果如下图所示:
圆形渐变在项目中使用的示例代码如下所示:
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类的构造函数前两个参数指定渐变的中心坐标,第三个参数指定渐变的角度,它是逆时针方向显示渐变的。其渐变效果如下图所示:
在项目中,其使用方式代码示例如下:
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);