漸變填充Gradient

2021-05-23 14:27:40 字數 1585 閱讀 6329

漸變,是指逐漸的,有規律性的變化,是一種規律性很強的現象。qt提供了乙個與漸變相關的qgradient類,目前支援三種漸變畫刷,分別是線性漸變(qlineargradient)、輻射漸變(qradialgradient)、角度漸變(qconicalgradient),如下圖所示:

從左到右依次為:線性漸變、輻射漸變、角度漸變

下面來看一下實現的**,由於程式較簡單,所以將解釋都加在了每行**的後邊:

1.線性漸變qlineargradient12

3456

78910

11qpainter painter(this);//建立了乙個qpainter物件例項

painter.setrenderhint(qpainter::antialiasing, true);//消除鋸齒

qlineargradient lineargradient(20,20, 150, 150);

//建立了乙個qlineargradient物件例項,引數為起點和終點座標

lineargradient.setcolorat(0.2, qt::white);

lineargradient.setcolorat(0.4, qt::blue);

lineargradient.setcolorat(0.6, qt::red);

lineargradient.setcolorat(1.0,qt::yellow);

//上面的四行分別設定漸變的顏色和路徑比例

painter.setbrush(qbrush(lineargradient));//將lineargradient物件傳遞給畫刷

painter.drawellipse(10,10, 150, 150);//在相應的座標畫出來

2.輻射漸變qradialgradient12

3456

qradialgradient radialgradient(275,85,75,275,85);

//建立了乙個qradialgradient物件例項,引數分別為中心座標,半徑長度和焦點座標

radialgradient.setcolorat(0,qt::black);

radialgradient.setcolorat(1.0,qt::green);//設定漸變的顏色和路徑比例

painter.setbrush(qbrush(radialgradient));

painter.drawellipse(200,10,150,150);//在相應的座標畫出來

3.角度漸變qconicalgradient12

3456

qconicalgradient conicalgradient(465,85,10);

//建立了乙個qconicalgradient物件例項,引數分別為中心座標和初始角度

conicalgradient.setcolorat(0,qt::white);

conicalgradient.setcolorat(0.8,qt::blue);//設定漸變的顏色和路徑比例

painter.setbrush(qbrush(conicalgradient));

painter.drawellipse(390,10,150,150);//在相應的座標畫出來

css3 Gradient漸變效果

雖然css3的漸變屬性在眾瀏覽器中得到較好的支援,但在實際使用的時候也像製作軟體 photoshop cs6 firework cs6等 的漸變工具一樣,將漸變分成了幾種 線性漸變 linear gradients 徑向漸變 radial gradients 重複線性漸變和重複徑向漸變。國外乙個根據...

CSS屬性之漸變屬性(gradient)

漸變分為線性漸變和徑向漸變,所謂漸變就是幾種顏色之間的平穩過渡。實現線性漸變,你至少需要定義兩種顏色的結點,這兩種結點就是你想平穩過渡的顏色,即 其中一種顏色結點為起點,另一種顏色結點為結束點。書寫 background linear gradient color1,color2 color1為起點...

CSS漸變屬性(gradient)的用法

漸變分為線性漸變和徑向漸變,所謂漸變就是幾種顏色之間的平穩過渡。線性漸變 線性漸變 linear gradient 實現線性漸變,你至少需要定義兩種顏色的結點,這兩種結點就是你想平穩過渡的顏色,即 其中一種顏色結點為起點,另一種顏色結點為結束點。書寫 background linear gradie...