linear gradient(Qt 渐变 QLinearGradient、 QConicalGradient、QRadialGradient)

渐变有三种：QLinearGradient、QConicalGradient 、 QRadialGradient

它们都有一个QGradient父类

QGradient父类的常用公共函数有：

 1 void QGradient::setSpread ( Spread method ); 2 //设置填充梯度区域外的区域,参数有: 3 // QGradient::PadSpread  ：填充区域内最接近的停止颜色。这是默认的。 4 // QGradient::RepeatSpread : 在区域外继续重复填充 5 // QGradient::ReflectSpread : 在区域外反射填充 6  7 QGradient::setCoordinateMode ( CoordinateMode mode ); 8 //设置渐变的坐标模式,比如QGradient::LogicalMode设置坐标为逻辑坐标(默认为该值) 9 10 void setColorAt ( qreal position, const QColor & color );11                      //设置梯度颜色, position处于0~1之间

QLinearGradient线性渐变

构造函数函数如下:

1 QLinearGradient ( qreal x1, qreal y1, qreal x2, qreal y2 )2 //其中x1,y1表示渐变起始坐标, x2,y2表示渐变终点坐标3 //如果只有x相等,则表示垂直线性渐变,如果只有y相等,则表示平行线性渐变,否则就是斜角线性渐变

示例1-垂直渐变:

 1 void Widget::paintEvent(QPaintEvent *) 2 { 3     QPainter painter(this); 4     painter.setRenderHint(QPainter::Antialiasing,true); 5     QLinearGradient Linear(100,100,100,200);        //垂直渐变 6  7     Linear.setColorAt(0,Qt::red); 8     Linear.setColorAt(1,Qt::blue); 9 10     painter.setBrush(Linear);11     painter.setPen(Qt::transparent);12     painter.drawRect(100,100,100,100);          //100,100 到200,20013 }

nerror="javascript:errorimg.call(this);">

【领QT开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击→领取ntent="mp" data-source="outerlink" href="http://docs.qq.com/doc/DQlVKZG14U1hCQXJu" rel="noopener noreferrer noopener noreferrer" target="_blank">「链接」

示例2-水平渐变

 1 void Widget::paintEvent(QPaintEvent *) 2 { 3     QPainter painter(this); 4     painter.setRenderHint(QPainter::Antialiasing,true); 5     QLinearGradient Linear(100,100,200,100);        //水平渐变 6  7     Linear.setColorAt(0,Qt::red); 8     Linear.setColorAt(1,Qt::blue); 9     painter.setBrush(Linear);10     painter.setPen(Qt::transparent);11     painter.drawRect(100,100,100,100);          //100,100 到200,20012 }

nerror="javascript:errorimg.call(this);">

QradialGradient半径渐变

更据圆的半径来设定不同的颜色

构造函数函数如下:

1 QRadialGradient ( qreal cx, qreal cy, qreal radius, qreal fx, qreal fy );2 // cx cy : 设置圆的中心原点(center)3 // radius:设置圆半径4 //fx fy : 设置焦点focus,也就是颜色的起始位置

示例1:

 1 void Widget::paintEvent(QPaintEvent *) 2 { 3     QPainter painter(this); 4     painter.setRenderHint(QPainter::Antialiasing,true); 5     painter.translate(width()/2,height()/2); 6     QRadialGradient Radial(0,0,120,0,0);    //设置圆的原点和焦点在中心,半径120 7  8     Radial.setColorAt(0,Qt::red);             9     Radial.setColorAt(0.5,Qt::blue);        //设置50%处的半径为蓝色10     Radial.setColorAt(1,Qt::green);11 12     painter.setPen(Qt::transparent);13     painter.setBrush(Radial);14     painter.drawEllipse(-120,-120,240,240);15 }

nerror="javascript:errorimg.call(this);">

示例2:

 1 void Widget::paintEvent(QPaintEvent *) 2 { 3     QPainter painter(this); 4     painter.setRenderHint(QPainter::Antialiasing,true); 5     painter.translate(width()/2,height()/2); 6     QRadialGradient Radial(0,0,120,0,60);    //设置焦点在(0,60),半径120 7  8     Radial.setColorAt(0,Qt::red); 9     Radial.setColorAt(0.5,Qt::blue);10     Radial.setColorAt(1,Qt::green);11 12     painter.setPen(Qt::transparent);13     painter.setBrush(Radial);14     painter.drawEllipse(-120,-120,240,240);15 }

nerror="javascript:errorimg.call(this);">

QConicalGradient圆锥渐变

构造函数如下所示:

1 QConicalGradient ( qreal cx, qreal cy, qreal angle );2 //设置(cx,cy)位置为圆锥尖,设置angle角度为起始颜色位置(逆时针渐变)

示例:

 1 void Widget::paintEvent(QPaintEvent *) 2 { 3     QPainter painter(this); 4     painter.setRenderHint(QPainter::Antialiasing,true); 5     painter.translate(width()/2,height()/2); 6  7     QConicalGradient Conical(0,0,30);    //设置点在中心,角度为30 8     Conical.setColorAt(0,Qt::red); 9     Conical.setColorAt(0.5,Qt::blue);10     Conical.setColorAt(1,Qt::green);11 12     painter.setPen(Qt::transparent);13     painter.setBrush(Conical);14     painter.drawEllipse(-120,-120,240,240);15 }

nerror="javascript:errorimg.call(this);">