Qt之圖形（漸變填充）

簡述

QGradient可以和QBrush組合使用，來指定漸變填充。

Qt目前支持三種類型的漸變填充：

• QLinearGradient：顯示從起點到終點的漸變。

• QRadialGradient：以圓心為中心顯示漸變。

• QConicalGradient：圍繞一個中心點顯示漸變。

一個漸變類型可以使用type()函數來檢索，類型中的每一個都是QGradient的子類。

• 簡述
• 漸變類型
• QLinearGradient
  • 效果
  • 源碼
• QRadialGradient
  • 效果
  • 源碼
• QConicalGradient
  • 效果
  • 源碼

漸變類型

QLinearGradient	QRadialGradient	QConicalGradient

使用QGradientStop類來描述漸變中過渡點的位置和顏色。例如：一個位置和一個顏色。使用setColorAt()函數來定義一個過渡點。或者，使用setStops()函數來一次定義多個過渡點。需要注意的是，后者的功能將替換當前設置的過渡點。

這是漸變的一套完整的過渡點（通過stops() 來訪問）描述漸變區域如何被填充。如果沒有指定任何過渡點，那么將會從0點-黑色漸變為1點-白色。

QLinearGradient

QLinearGradient顯示從起點到終點的漸變。

效果

QGradient::PadSpread	QGradient::RepeatSpread	QGradient::ReflectSpread

源碼

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));
}

QLinearGradient 類構造函數的第一個參數指定起點，第二個參數指定終點，然后顯示漸變。成員函數setColorAt()設置起點和終點之間要顯示的顏色，成員函數setSpread()可以設置起點和終點區域之外的顯示模式。

QRadialGradient

QRadialGradient類以圓心為中心顯示漸變。(cx, cy)是中點，半徑(radius)是以中點為圓心的圓的半徑，(fx, fy)是漸變的起點。

效果

QGradient::PadSpread	QGradient::RepeatSpread	QGradient::ReflectSpread

源碼

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));
}

QRadialGradient類構造函數的第一個參數和第二個參數是(cx, cy)坐標，第三個參數是半徑，第四個和第五個參數是(fx, fy)坐標。

QConicalGradient

QConicalGradient類在(cx, cy)坐標上以角度(angle)為中心顯示漸變。

效果

源碼

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));
}