View繪製系列(13)-Canvas漸變屬性繪製

Canvas漸變屬性繪製

五光十色，七彩繽紛。有時候咱們的UI設計稿也極盡色彩之能，好比下圖這樣：

這種漸變效果咱們能畫嗎？不得不說，Android系統的基礎構架仍是很強大的，咱們可使用LinearGradient進行繪製，與其相關的還有SweepGradient，RadialGradient.

LinearGradient,SweepGradient及RadialGradient均爲Shader子類，因此與前文相似，咱們只須要調用paint.setShader方法將對象設置進去，而後進行繪製便可。

LinearGradient

使用代碼以下：

int[] mColors = {Color.RED,Color.YELLOW,Color.GREEN,Color.BLUE};
//從(0,0)到(400,400)繪製線性漸變，也就是對角線區域爲漸變水平線
LinearGradient linearGradient =
        new LinearGradient(0, 0, 400, 400, mColors, null, Shader.TileMode.MIRROR);
paint.setShader(linearGradient);
canvas.drawRect(0,0,800,800,paint);

paint.setTextSize(400);
//使用漸變着色器繪製文本注意
canvas.drawText("注意：",200,1600,paint);

上述代碼中咱們使用的LinearGradient的構造原型是：LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],@Nullable float positions[], @NonNull TileMode tile)，其中：

• x0,y0,x1,y1:分別表示x軸及y軸起終點

• colors:是一個顏色數組，表示漸變的顏色序列，咱們這裏依次是紅黃綠藍

• positions:表示各個顏色在總長度上所佔的比例，每一個元素的取值範圍在0到1之間，整體的和應該等於1，若是每一個顏色的長度都相同，則能夠取null

• tile:繪製模式，前文已介紹

固然咱們也能夠經過修改x0,y0,x1,y1的值使其變成水平或豎直方向的漸變效果，當x0=x1時，繪製出來的效果爲垂直方向的顏色漸變,當y0=y1時，繪製出來效果是水平方向的顏色漸變。

LinearGradient還有一個構造原型：

LinearGradient(float x0, float y0, float x1, float y1,
        @ColorInt int color0, @ColorInt int color1,
        @NonNull TileMode tile)

和上一個的區別是，這個構造原型裏指定的顏色比較單一，只用指定起始顏色color0和結束顏色color1便可。

SweepGradient

SweepGradient-掃描渲染，也被稱爲梯度渲染，常常被用來實現雷達掃描效果。它的構造函數也有兩個，第一個SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[])，這個構造函數中：

• cx,cy:繪製的中心點座標

• colors:用於繪製漸變效果的顏色數組，至少有兩個元素，一個開始顏色，一個結束顏色

• positions:同LinearGradient中的positions，用於指定各個顏色所佔的長度比例，每一個元素的取值範圍在0到1之間,整體的和應該等於1，若是比例同樣，則能夠取null

第二個SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1)，這個構造函數中只須要指定中心座標和開始結束顏色就好。

使用代碼以下：

float[] sweepPositions = {0.1f,0.1f,0.8f};
SweepGradient sweepGradient = new SweepGradient(550,850, sweepColors, sweepPositions);

paint.setShader(sweepGradient);
canvas.drawRect(100,700,1000,1000,paint);

運行效果：

RadialGradient

RadialGradient-環形渲染，用它能夠實現水波紋動畫，一樣有兩個構造函數，第一個是RadialGradient(float centerX, float centerY, float radius,@NonNull @ColorInt int colors[], @Nullable float stops[],@NonNull TileMode tileMode)其中：

• centerX,centerY:圓環所在圓的圓心座標

• radius:繪製半徑

• colors:繪製的漸變顏色數組

• stops:各顏色所佔的百分比，相同則取null

• tileMode:繪製模式，前文已介紹

另外一個構造函數是RadialGradient(float centerX, float centerY, float radius,@ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode)，直接聲明圓心位置顏色和邊界顏色，其餘參數與第一個構造函數參數含義一致。

代碼以下：

int[] radialColors = {Color.RED,Color.YELLOW,Color.GREEN};
RadialGradient radialGradient = new RadialGradient(700,1700,200,radialColors,null,TileMode.REPEAT);
paint.setShader(radialGradient);
canvas.drawCircle(700,1700,700,paint);

運行效果：

因爲代碼中設置的繪製模式是TileMode.REPEAT,因此紅黃綠交替重複繪製。

 

本文分享自微信公衆號 - 小海編碼日記（gh_1f87b8c00ede）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。