Qt 漸變填充

漸變填充

前面說了有關(guān)反走樣的相關(guān)知識，下面來說一下漸變。漸變是繪圖中很常見的一種功能，簡單來說就是可以把幾種顏色混合在一起，讓它們能夠自然地過渡，而不是一下子變成另一種顏色。漸變的算法比較復(fù)雜，寫得不好的話效率會很低，好在很多繪圖系統(tǒng)都內(nèi)置了漸變的功能，Qt 也不例外。漸變一般是用在填充里面的，所以，漸變的設(shè)置就是在 QBrush 里面。

Qt 提供了三種漸變畫刷，分別是線性漸變(QLinearGradient)、輻射漸變(QRadialGradient)、角度漸變(QConicalGradient)。如下圖所示(圖片出自 C++ GUI Programming with Qt4, 2nd Edition)：

下面我們來看一下線性漸變 QLinearGradient 的用法。

void PaintedWidget::paintEvent(QPaintEvent *event) 
{ 
        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()函數(shù)里面的代碼。

首先我們打開了反走樣，然后創(chuàng)建一個 QLinearGradient對象實例。QLinearGradient 構(gòu)造函數(shù)有四個參數(shù)，分別是x1, y1, x2, y2，即漸變的起始點和終止點。在這里，我們從(60, 50)開始漸變，到(200, 200)止。

漸變的顏色是在 setColorAt()函數(shù)中指定的。下面是這個函數(shù)的簽名：

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

它的意思是把 position 位置的顏色設(shè)置成 color。其中，position 是一個0 - 1區(qū)間的數(shù)字。也就是說，position 是相對于我們建立漸變對象時做的那個起始點和終止點區(qū)間的。比如這個線性漸變，就是說，在從(60, 50)到(200, 200)的線段上，在0.2，也就五分之一處設(shè)置成白色，在0.6也就是五分之三處設(shè)置成綠色，在1.0也就是終點處設(shè)置成黑色。

在創(chuàng)建 QBrush 時，把這個漸變對象傳遞進去，就是我們的結(jié)果啦：

那么，我們怎么讓線段也是漸變的呢？要知道，直線是用畫筆繪制的??！這里，如果你仔細查閱了 API 文檔就會發(fā)現(xiàn)，QPen 是接受 QBrush 作為參數(shù)的。也就是說，你可以利用一個 QBrush 創(chuàng)建一個QPen，這樣，QBrush 所有的填充效果都可以用在畫筆上了！

void PaintedWidget::paintEvent(QPaintEvent *event) 
{ 
        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.setPen(QPen(QBrush(linearGradient), 5)); 
        painter.drawLine(50, 50, 200, 200); 
}

看看我們的漸變線吧！

本文出自 “豆子空間” 博客，請務(wù)必保留此出處 http://devbean.blog.51cto.com/448512/194031