Qt 2D繪圖(3)：漸變原理(QGradient類及其子類)

Qt 2D繪圖(3)：漸變原理(QGradient類及其子類)

若對C++語法不熟悉，建議參閱《C++語法詳解》一書，電子工業出版社出版，該書語法示例短小精悍，對查閱C++知識點相當方便，並對語法原理進行了透徹、深入詳細的講解，可確保讀者徹底弄懂C++的原理，徹底解惑C++，使其知其然更知其所以然。此書是一本全面瞭解C++不可多得的案頭必備圖書。

本文需要知道怎樣使用QBrush，該類比較簡單，可參閱Qt幫助文檔

QGradient類與QBrush類一起用於指定漸變填充。
1、Qt目前支持3種類型的漸變填充
線性漸變：使用QLinearGradient類描述，在起點(xs, ys)和終點(xe, ye)之間插入顏色，在起點和終點之間的區域爲線性漸變區域。原理見圖12-40。
輻射(徑向)漸變：由QRadialGradient類描述。由中心點(xc, yc)和半徑r定義一個圓(該圓即爲輻射漸變區域)，然後顏色從焦點(xf, yf)向外擴散，原理見圖12-40。
圓錐漸變：由QConicalGradient類描述。由一箇中心點(xc, yc)和一個角度a定義，然後顏色在中心點周圍像鐘錶那樣擴散。原理見圖12-40

2、漸變顏色的設置
漸變顏色不能使用QBrush::setColor()函數設置，漸變顏色需要使用停止點和顏色兩個屬性來指定，可使用QGradient::setColorAt()函數來設置單個的停止點和顏色，還可使用QGradient::setStops()來一次定義多個<停止點，顏色>對，setStops()函數需要使用QGradientStop類型的參數。注：停止點使用的是0~1之間的數值來表示的，0表示起點，1表示終點。
<位置，顏色>對是使用QGradientStop類型來描述的，QGradientStop類型原型如下

typedef QPair<qreal, QColor> QGradientStop
其中QPair是一個模板類，用於存儲對項，比如QPair <T1, T2> pr，表示pr存儲一個T1類型的值和一個T2類型的值。

示例12.11：漸變的實際應用(效果見圖12-41)

QPainter pr(this);
//創建線性漸變，起點爲(33,50),終點爲(111,50);，在這兩點之間使用漸變顏色
    	QLinearGradient g(QPointF(33,50),QPointF(100,50));   	
//漸變顏色設置需位於QBrush bs(g)之前。
    	g.setColorAt(0,QColor(111,1,1));		//設置起始點顏色爲紅色
    	g.setColorAt(0.5,QColor(1,111,1)); 	//在起點和終點之間(此處爲中點)設置顏色爲綠色
    	g.setColorAt(1,QColor(222,222,1));  	//設置終點顏色爲黃色。
	//使用以上設置後，顏色將從起點的紅色，逐漸變爲中點的綠色，再由綠色逐漸變爲黃色
    	QBrush bs(g);
    	pr.setBrush(bs);
    	pr.drawRect(33,50,111,111);

3、漸變色的傳播方式(spread)
漸變色的傳播是指在漸變區域以外的區域漸變色是怎樣進行擴散的。可使用QGradient::setSpread()函數進行設置，其傳播方式使用枚舉QGradient::Spread進行描述，取值見表12-13，外觀及原理見圖12-42)。
注意：傳播方式僅對線性漸變和輻射漸變有作用，因爲這兩種類型的漸變是有邊界的，而錐形漸變其漸變範圍是0~360度的圓，因此沒有漸變邊界，所以傳播方式不適用於錐形漸變。

4、座標模式
座標模式是指的怎樣指定漸變色的座標，共有3種方法，使用枚舉QGradient::CoordinateMode進行描述(見表12-14及圖12-43)，可使用QGradient::setCoordinateMode()函數進行設置。

示例12.12：漸變座標模式
void paintEvent(QPaintEvent *e){
    	QPainter pr(this);
    	QLinearGradient g(QPointF(0.1,0.50),QPointF(0.50,0.50));	//起始/終點座標以小數點指定
    	g.setCoordinateMode(QGradient::ObjectBoundingMode);  		//設置漸變座標模式爲對象邊界模式
    	g.setColorAt(0,QColor(255,255,255));  					//漸變起始顏色(白色)
    	g.setColorAt(0.5,QColor(111,1,1));						//漸變中點顏色(紅色)
    	g.setColorAt(1,QColor(255,255,1));						//漸變最終停止點顏色(黃色)
    	g.setSpread(QGradient::RepeatSpread);  					//設置漸變色傳播模式(重複傳播)
    	QBrush bs(g);											//創建畫刷
    	pr.setBrush(bs);
    	pr.drawRect(55,55,111,111);  							//漸變填充區域1
    	pr.drawRect(222,55,111,111);  							//漸變填充區域2
    	pr.drawLine(66.1,0,66.1,444);    	pr.drawLine(110.5,0,110.5,444);  //用於測量的直線
    	pr.drawLine(233.1,0,233.1,444);    	pr.drawLine(277.5,0,277.5,444);} //用於測量的直線

運行結果及說明見圖12-44

5、QGradient類中的函數
QGradient類沒有公有構造函數，該類函數的原理在前文已講解過

1)、CoordinateMode coordinateMode() const;			//漸變的座標模式，枚舉見表12-14
void setCoordinateMode(CoordinateMode mode);
2)、Spread spread() const;							//漸變傳播方式，枚舉見表12-13
void setSpread(Spread method);
3)、QGradientStops stops() const;
void setStops(const QGradientStops &stopPoints); 		//設置漸變<位置，顏色>對
4)、void setColorAt(qreal position, const QColor &color);   	//把停止位置position處的顏色設置爲color
5)、typedef QPair<qreal, QColor> QGradientStop;      
typedef QVector<QGradientStop> QGradientStops ;    	//這是新定義的類型。用於setStops()的參數
6)、Type type() const;    							//漸變的類型，枚舉見表12-15

6、QLinearGradient類(線性漸變)中的函數

1)、QLinearGradient();   				//在(0,0)到(1,1)之間構造一個線性漸變。
2)、QLinearGradient(const QPointF &start, const QPointF &finalStop);
QLinearGradient(qreal x1, qreal y1, qreal x2, qreal y2);
	在開始點(start或(x1,y1)與結束點finalStop或(x2,y2)之間構造一個線性漸變，參數值以像素爲單位。
3)、QPointF finalStop() const;   			//返回漸變的最終停止點(邏輯座標)
void setFinalStop(const QPointF &stop);	//在邏輯座標中設置漸變的最終停止點(就是漸變的結束點)
void setFinalStop(qreal x, qreal y)
4)、void setStart(const QPointF &start);  	//在邏輯座標中設置線性漸變的起點。
void setStart(qreal x, qreal y);
QPointF start() const;		 		//返回漸變的起點(邏輯座標)

7、QConicalGradient類(圓錐漸變)中的函數

1)、QConicalGradient();    			//以(0,0)爲中心，0爲開始角度，構造一個圓錐漸變。
2)、QConicalGradient(const QPointF &center, qreal angle);
QConicalGradient(qreal cx, qreal cy, qreal angle);
	以center或(cx, cy)爲中心，以angle(0~360)爲開始角度，構造一個圓錐漸變。
3)、qreal angle() const;   				//以邏輯座標返回圓錐漸變的起始角度。
void setAngle(qreal angle);   			//以邏輯座標設置圓錐漸變的起始角度爲angle
4)、QPointF center() const;   			//以邏輯座標返回圓錐漸變的中心。
void setCenter(const QPointF &center);  	//以邏輯座標設置圓錐漸變的中心爲center
void setCenter(qreal x, qreal y);

示例12.13：圓錐漸變(效果見圖12-45)

void paintEvent(QPaintEvent *e){
QPainter pr(this);
    QConicalGradient g(QPointF(166,166),55);
    g.setColorAt(0,QColor(255,255,255));
    g.setColorAt(0.5,QColor(111,1,1));
g.setColorAt(1,QColor(1,111,1));
//傳播方式對於圓錐漸變不起作用
    g.setSpread(QGradient::RepeatSpread);   
    QBrush bs(g);    pr.setBrush(bs);
    pr.drawRect(1,1,333,333);}

8、QRadialGradient類(輻射漸變)中的函數

(1)、構造函數
1)、QRadialGradient();   		//以(0, 0)爲中心和焦點，半徑爲1，構造一個簡單的輻射漸變。
2)、QRadialGradient(const QPointF &center, qreal radius);
QRadialGradient(qreal cx, qreal cy, qreal radius);
	以(cx, cy)或center爲中心，radius爲半徑，構造一個簡單的輻射漸變
3)、QRadialGradient(const QPointF &center, qreal radius, const QPointF &focalPoint);
QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);
	以(cx, cy)或center爲中心，radius爲半徑，(fx, fy)或focalPoint爲焦點，構造一個簡單的輻射漸變。
	注意：若焦點位於由中心和半徑定義的圓之外，則焦點將被調整爲位於中心和焦點的連線與圓的交點上(原理見圖12-46)。
4)、QRadialGradient(const QPointF &center,qreal centerRadius,const QPointF &focalPoint,qreal focalRadius);
QRadialGradient(qreal cx, qreal cy, qreal centerRadius, qreal fx, qreal fy, qreal focalRadius);
	以(cx, cy)或center爲中心，radius爲半徑，(fx, fy)或focalPoint爲焦點，focalRadius爲焦點半徑，構造一個擴展的輻射漸變(原理見示例12.9)

(2)、QRadialGradient類中的其他函數見表12-16

示例12.14：擴展的輻射漸變(結果見圖12-47)
void paintEvent(QPaintEvent *e){
QPainter pr(this);
   	QRadialGradient g(QPointF(166,166),155,QPointF(222,222),66);
    g.setColorAt(0,QColor(255,255,255));	//開始顏色(白色)
    g.setColorAt(0.5,QColor(111,1,1));  	//中間顏色(紅色)
    g.setColorAt(1,QColor(255,255,1));  	//終點顏色(黃色)
    g.setSpread(QGradient::RepeatSpread);	//傳播方式(重複)
    QBrush bs(g);    pr.setBrush(bs);
    pr.drawRect(1,1,333,333);}

示例12.15：簡單的輻射漸變與傳播方式(效果見圖12-48)
void paintEvent(QPaintEvent *e){
 	QPainter pr(this);
    QRadialGradient g(QPointF(166,166),66,QPointF(200,200));
    g.setColorAt(0,QColor(255,255,255));
    g.setColorAt(0.5,QColor(111,1,1));
    g.setColorAt(1,QColor(255,255,1));
    g.setSpread(QGradient::RepeatSpread);   	//傳播方式爲重複傳播
    QBrush bs(g);			pr.setBrush(bs);
pr.drawRect(1,1,333,333);    			
pr.setBrush(Qt::NoBrush);				//清除畫刷
pr.drawEllipse(QPointF(166,166),66,66);  	//繪製一個圓，該圓的大小與輻射漸變區域相同。
//以下代碼用於標出中心點和焦點的位置。
    pr.drawLine(166,166,176,166);       pr.drawLine(166,166,166,156);
    pr.drawLine(200,200,210,200);   pr.drawLine(200,200,200,190);}

本文作者：黃邦勇帥(原名：黃勇)