【Qt筆記】漸變

漸變是繪圖中很常見的一種功能，簡單來講就是能夠把幾種顏色混合在一塊兒，讓它們可以天然地過渡，而不是一會兒變成另外一種顏色。漸變的算法比較複雜，寫得很差的話效率會很低，好在不少繪圖系統都內置了漸變的功能，Qt 也不例外。漸變通常是用在填充裏面的，因此，設置漸變是在QBrush裏面。

 

Qt 提供了三種漸變：線性漸變（QLinearGradient）、輻射漸變（QRadialGradient）和角度漸變（QConicalGradient）。咱們能夠在 Qt API 手冊中看到這幾種漸變的區別：

線性漸變：

輻射漸變：

角度漸變：

具體細節能夠參考文檔。下面咱們經過一個示例看看如何使用漸變進行填充：

void paintEvent(QPaintEvent *)
{
    QPainter painter(this);

    painter.setRenderHint(QPainter::Antialiasing, true);
    QLinearGradient linearGradient(60, 50, 200, 200);
    linearGradient.setColorAt(0.2, Qt::white);
    linearGradient.setColorAt(0.6, Qt::green);
    linearGradient.setColorAt(1.0, Qt::black);
    painter.setBrush(QBrush(linearGradient));
    painter.drawEllipse(50, 50, 200, 150);
}

像之前同樣，咱們也只給出了paintEvent()的代碼。這段代碼看起來也至關清晰：首先咱們打開了反走樣，而後建立一個QLinearGradient對象實例。QLinearGradient也就是線性漸變，其構造函數有四個參數，分別是 x1，y1，x2，y2，即漸變的起始點和終止點。在這裏，咱們從 (60, 50) 點開始漸變，到 (200, 200) 點止。關於座標的具體細節，咱們會在後面的章節中詳細介紹。漸變的顏色是在setColorAt()函數中指定的。下面是這個函數的簽名：

void QGradient::setColorAt ( qreal position, const QColor & color )

這個函數的做用是，把 position 位置的顏色設置成 color。其中，position 是一個 [0, 1] 閉區間的數字。也就是說，position 是相對於咱們創建漸變對象時作的那個起始點和終止點區間的一個比例。以這個線性漸變爲例，在從 (60, 50) 到 (200, 200) 的線段上，在 0.2，也就五分之一處設置成白色，在 0.6 也就是五分之三處設置成綠色，在 1.0 也就是終點處設置成黑色。建立QBrush對象時，把這個漸變對象傳遞進去，而後就能夠運行了：

下面咱們開始一個更復雜，也更實用一些的例子：繪製一個色輪（color wheel）。所謂色輪，其實就是一個帶有顏色的圓盤（或許你沒據說過這個名字，可是你確定見過這個東西）。

咱們來看看它的代碼：

void ColorWheel::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    const int r = 150;
    QConicalGradient conicalGradient(0, 0, 0);

    conicalGradient.setColorAt(0.0, Qt::red);
    conicalGradient.setColorAt(60.0/360.0, Qt::yellow);
    conicalGradient.setColorAt(120.0/360.0, Qt::green);
    conicalGradient.setColorAt(180.0/360.0, Qt::cyan);
    conicalGradient.setColorAt(240.0/360.0, Qt::blue);
    conicalGradient.setColorAt(300.0/360.0, Qt::magenta);
    conicalGradient.setColorAt(1.0, Qt::red);

    painter.translate(r, r);

    QBrush brush(conicalGradient);
    painter.setPen(Qt::NoPen);
    painter.setBrush(brush);
    painter.drawEllipse(QPoint(0, 0), r, r);
}

首先仍是新建 QPainter 對象，開啓反走樣。而後咱們將圓盤半徑定義爲 150。下面建立一個角度漸變實例，其構造函數一樣接受三個參數：

QConicalGradient::QConicalGradient ( qreal cx, qreal cy, qreal angle )

前兩個參數 cx 和 cy 組成角度漸變的中心點，第三個參數是漸變的起始角度。在咱們的例子中，咱們將漸變中心點設置爲 (0, 0)，起始角度爲 0。相似線性漸變，角度漸變的setColorAt()函數一樣接受兩個參數，第一個是角度比例，第二個是顏色。例如，

conicalGradient.setColorAt(0.0, Qt::red);

將 0 度角設置爲紅色；

conicalGradient.setColorAt(60.0/360.0, Qt::yellow);

將 60 度角設置爲黃色。因爲一個圓周是 360 度，因此 60.0/360.0 便是這個角度的比例。其他代碼以此類推。最後一句，咱們將 1.0 處設置爲紅色，也就是從新回到起始處。至於顏色的分佈，這是由顏色空間定義的，有興趣的朋友能夠查閱有關顏色模型的理論。

painter.translate(r, r);

這是咱們惟一不熟悉的函數。QPainter::translate(x, y)函數意思是，將座標系的原點設置到 (x, y) 點。本來座標系原點位於左上角，咱們使用translate(r, r)，將座標原點設置爲 (r, r)。這麼一來，左上角的點的座標就應該是 (-r, -r)。

最後，咱們使用drawEllipse()函數繪製圓盤。注意，因爲咱們已經把座標原點設置爲 (r, r)，所以，在繪製時，圓心應該是新的座標 (0, 0)，而不是原來的 (r, r)。