漸變有三種：QLinearGradient、QConicalGradient 、 QRadialGradient

它們都有一個QGradient父類

QGradient父類的常用公共函數有：

void QGradient::setSpread ( Spread method );
//設置填充梯度區域外的區域,參數有:
// QGradient::PadSpread  ：填充區域內最接近的停止顏色。這是默認的。
// QGradient::RepeatSpread : 在區域外繼續重復填充
// QGradient::ReflectSpread : 在區域外反射填充

QGradient::setCoordinateMode ( CoordinateMode mode );
 
//設置漸變的坐標模式,比如QGradient::LogicalMode設置坐標為邏輯坐標(默認為該值)

void setColorAt ( qreal position, const QColor & color );
                     //設置梯度顏色, position處於0~1之間

QLinearGradient線性漸變

構造函數函數如下:

QLinearGradient ( qreal x1, qreal y1, qreal x2, qreal y2 )
//其中x1,y1表示漸變起始坐標, x2,y2表示漸變終點坐標
//如果只有x相等,則表示垂直線性漸變,如果只有y相等,則表示平行線性漸變,否則就是斜角線性漸變
 

示例1-垂直漸變:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QLinearGradient Linear(100,100,100,200);        //垂直漸變

    Linear.setColorAt(0,Qt::red);
    Linear.setColorAt(1,Qt::blue);

    painter.setBrush(Linear);
    painter.setPen(Qt::transparent);
    painter.drawRect(
 
100,100,100,100);          //100,100 到200,200
}

示例2-水平漸變

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QLinearGradient Linear(100,100,200,100);        //水平漸變

    Linear.setColorAt(0,Qt::red);
    Linear.setColorAt(1,Qt::blue);

    painter.setBrush(Linear);
    painter.setPen(Qt::transparent);
    painter.drawRect(100,100,100,100);          //100,100 到200,200
}

QradialGradient半徑漸變

更據圓的半徑來設定不同的顏色

構造函數函數如下:

QRadialGradient ( qreal cx, qreal cy, qreal radius, qreal fx, qreal fy );
// cx cy : 設置圓的中心原點(center)
// radius:設置圓半徑
//fx fy : 設置焦點focus,也就是顏色的起始位置

示例1:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.translate(width()/2,height()/2);
    QRadialGradient Radial(0,0,120,0,0);    //設置圓的原點和焦點在中心,半徑120

    Radial.setColorAt(0,Qt::red);            
    Radial.setColorAt(0.5,Qt::blue);        //設置50%處的半徑為藍色
    Radial.setColorAt(1,Qt::green);

    painter.setPen(Qt::transparent);
    painter.setBrush(Radial);
    painter.drawEllipse(-120,-120,240,240);
}

示例2:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.translate(width()/2,height()/2);
    QRadialGradient Radial(0,0,120,0,60);    //設置焦點在(0,60),半徑120

    Radial.setColorAt(0,Qt::red);
    Radial.setColorAt(0.5,Qt::blue);
    Radial.setColorAt(1,Qt::green);

    painter.setPen(Qt::transparent);
    painter.setBrush(Radial);
    painter.drawEllipse(-120,-120,240,240);
}

QConicalGradient圓錐半徑

構造函數如下所示:

QConicalGradient ( qreal cx, qreal cy, qreal angle );
//設置(cx,cy)位置為圓錐尖,設置angle角度為起始顏色位置(順時針漸變)

示例:

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.translate(width()/2,height()/2);

    QConicalGradient Conical(0,0,30);    //設置點在中心,角度為30
    Conical.setColorAt(0,Qt::red);
    Conical.setColorAt(0.5,Qt::blue);
    Conical.setColorAt(1,Qt::green);

    painter.setPen(Qt::transparent);
    painter.setBrush(Conical);
    painter.drawEllipse(-120,-120,240,240);
}

未完待續,下章學習畫表盤控件

30.QT-漸變之QLinearGradient、 QConicalGradient、QRadialGradient