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

漸變有三種：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);
}

 

未完,下章來學習: 

31.QPainter-rotate()函數分析-文字旋轉不傾斜,圖片旋轉實現等待