1、线性渐变
线性渐变需要指定开始点和结束点,然后将开始点和结束点之间的区域进行等分,开始点的位置为0.0
,结束点的位置为1.0
,而它们之间的位置按照距离比例进行设定,然后使用在指定的位置插入指定的颜色。
QLinearGradient linearGradient(rect.topLeft(),rect.bottomRight());
linearGradient.setColorAt(0.0,Qt::red);
linearGradient.setColorAt(1.0,Qt::blue);
painter.setBrush(linearGradient);
painter.drawRect(rect);
左上角到右下角使用线性渐变。
QLinearGradient linearGradient(rect.topLeft(),rect.topRight());
水平方向使用线性渐变。
QLinearGradient linearGradient(rect.topLeft(),rect.bottomLeft());
垂直方向使用线性渐变。
拓展方式(在设置渐变范围之外的拓展方式):
QRect rect = QRect(100,100,100,100);
QLinearGradient linearGradient(rect.topLeft(),rect.bottomRight());
linearGradient.setColorAt(0.0,Qt::red);
linearGradient.setColorAt(1.0,Qt::blue);
linearGradient.setSpread(QRadialGradient::RepeatSpread);
linearGradient.setSpread(QRadialGradient::ReflectSpread);
2、辐射渐变
辐射渐变需要指定圆心和半径,这样就确定了一个圆,然后再指定一个焦点。焦点的位置为0,圆环的位置为1,然后在焦点和圆环间插入颜色。焦点位置必须在圆的范围之内。
QRadialGradient radialGradient;
radialGradient.setCenter(100,100);
radialGradient.setRadius(100);
radialGradient.setFocalPoint(100,100);
radialGradient.setColorAt(0.0,Qt::red);
radialGradient.setColorAt(1.0,Qt::blue);
painter.setBrush(radialGradient);
painter.drawEllipse(100,100,150,150);
painter.drawRect(this->rect());
焦点在圆心(100,100):
焦点在点(50,50):
渐变扩散方式:
radialGradient.setSpread(QRadialGradient::RepeatSpread);
radialGradient.setSpread(QRadialGradient::ReflectSpread);
3、锥形渐变
锥形渐变需要指定中心点和一个角度,然后沿逆时针从给定的角度开始环绕中心点插入颜色。这里给定的角度沿逆时针方向开始的位置为0,旋转一圈后为1。
setSpread()
函数对于锥形渐变没有效果。
QConicalGradient conicalGradient;
conicalGradient.setCenter(100,100);
conicalGradient.setAngle(60);
conicalGradient.setColorAt(0.2, Qt::cyan);
conicalGradient.setColorAt(0.9, Qt::black);
painter.setBrush(conicalGradient);
painter.drawRect(this->rect());
推荐两个渐变配色网站:
https://gradient.shapefactory.co/
Fresh Background Gradients | WebGradients.com 💎
Qt中QGradient::Preset枚举值预设了一些渐变样式,就是根据上面第二个网站中的渐变样式设置的,如:
painter.fillRect(0, 0, width(), height(), QGradient::NewYork);
网站中的“New York”样式: