Android中Canvas繪圖之Shader使用圖文詳解

Android中Canvas繪圖之Shader使用圖文詳解
概述

我們在用Android中的Canvas繪製各種圖形時，可以通過Paint.setShader(shader)方法為畫筆Paint設定shader，這樣就可以繪製出多彩的圖形。那麼Shader是什麼呢？做過GPU繪圖的同學應該都知道這個詞彙，Shader就是著色器的意思。我們可以這樣理解，Canvas中的各種drawXXX方法定義了圖形的形狀，畫筆中的Shader則定義了圖形的著色、外觀，二者結合到一起就決定了最終Canvas繪製的被色彩填充的圖形的樣子。

類android.graphics.Shader有五個子類，分別是：BitmapShader、LinearGradient、RadialGradient、SweepGradient和ComposeShader，下面依次對這幾個類的使用分別說明。

BitmapShader

BitmapShader，顧名思義，就是用Bitmap對繪製的圖形進行渲染著色，其實就是用圖片對圖形進行貼圖。

BitmapShader建構函式如下所示：

BitmapShader(Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

第一個參數是Bitmap對象，該Bitmap決定了用什麼圖片對繪製的圖形進行貼圖。

第二個參數和第三個參數都是Shader.TileMode類型的枚舉值，有以下三個取值：CLAMP 、REPEAT 和 MIRROR。

CLAMP
CLAMP表示，當所畫圖形的尺寸大於Bitmap的尺寸的時候，會用Bitmap四邊的顏色填充剩餘空間。

我們有一個Bitmap，如下所示：
vce147SmtcTP8cvYtrzKx824w/e1xKGjPGJyIC8+DQrO0sPHyrnTw7jDQml0bWFwo6zR3cq+VGlsZU1vZGXOqkNMQU1QtcTQp7n7o6y0+sLryOfPwsv5yr6jujwvcD4NCjxwcmUgY2xhc3M9"brush:java;">BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);paint.setShader(bitmapShader);canvas.drawRect(0, 0, bitmap.getWidth() * 2, bitmap.getHeight() * 2, paint);

效果如下所示：

我們可以看到，由於我們所繪製的矩形矩形地區比Bitmap大，Bitmap就用右側邊和下側邊的最外層的顏色填充了矩形地區。由於原Bitmap右下角的像素是透明的，所以繪製的矩形的右下角就用透明填充了。

如果我們繪製的圖形尺寸小於Bitmap尺寸，那麼效果看起來就像是對原Bitmap裁剪了一下而已，代碼如下所示：

我們可以看到，當我們所繪製的圓形尺寸小於Bitmap尺寸的時候，看起來的效果就是我們用所繪製的圓形對Bitmap進行了裁剪。

REPEAT
REPEAT表示，當我們繪製的圖形尺寸大於Bitmap尺寸時，會用Bitmap重複平鋪整個繪製的地區。
範例程式碼如下所示：

BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);paint.setShader(bitmapShader);canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), paint);

效果如下所示：

MIRROR
與REPEAT類似，當繪製的圖形尺寸大於Bitmap尺寸時，MIRROR也會用Bitmap重複平鋪整個繪圖區域，與REPEAT不同的是，兩個相鄰的Bitmap互為鏡像。
代碼如下所示：

BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);paint.setShader(bitmapShader);canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), paint);

效果如下所示：

最後需要說的是，在構造BitmapShader時，tileX和tileY可以取不同的值，二者不用非得一致。

LinearGradient

我們可以用LinearGradient建立線性漸層效果，其有兩個建構函式：

LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)

我們重點說一下第一個建構函式，在此基礎上理解第二個建構函式就很簡單了。

LinearGradient是用來建立線性漸層效果的，它是沿著某條直線的方向漸層的，座標(x0,y0)就是這條漸層直線的起點，座標(x1,y1)就是這條漸層直線的終點。需要說明的是，座標(x0,y0)和座標(x1,y1)都是Canvas繪圖座標系中的座標。color0和color1分別表示了漸層的起始顏色和終止顏色。與BitmapShader類似，LinearGradient也支援TileMode，有以下三個取值：CLAMP 、REPEAT 和 MIRROR。

使用代碼如下所示：

LinearGradient linearGradient = new LinearGradient(100, 100, 500, 500, Color.GREEN, Color.BLUE, Shader.TileMode.CLAMP);paint.setShader(linearGradient);canvas.drawRect(100, 100, 500, 500, paint);

效果如下所示：

上面我們使用了CLAMP，但是由於我們繪製的矩形與漸層位置的大小一樣大，所以CLAMP效果不明顯。

我們把繪製的地區變大，還是用CLAMP，這次繪製整個Canvas大小的矩形。

canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), paint);

效果如下所示：

當我們把CLAMP改為REPEAT時，還是繪製整個Canvas大小的矩形，效果如下所示：

當我們用MIRROR繪製整個Canvas大小的矩形的時候，效果如下所示：

在LinearGradient的第二個建構函式中可以通過參數colors傳入多個顏色值進去，這樣就會用colors數組中指定的顏色值一起進行顏色線性插值。還可以指定positions數組，該數組中每一個position對應colors數組中每個顏色線上段中的相對位置，position取值範圍為[0,1]，0表示起始位置，1表示終止位置。如果positions數組為null，那麼Android會自動為colors設定等間距的位置。

RadialGradient

我們可以用RadialGradient建立從中心向四周發散的輻射漸層效果，其有兩個建構函式：

RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)

這兩個建構函式和LinearGradient的兩個建構函式很類似，我們此處還是重點講解第一個建構函式，在此基礎上理解第二個建構函式就很簡單了。

RadialGradient是用來建立從中心向四周發散的輻射漸層效果的，所以我們需要在其建構函式中傳入一些圓的參數，座標(centerX,centerY)是圓心，即起始的中心顏色的位置，radius確定了圓的半徑，在圓的半徑處的顏色是edgeColor，這樣就確定了當位置從圓心移向圓的輪廓時，顏色逐漸從centerColor漸層到edgeColor。RadialGradient也支援TileMode參數，有以下三個取值：CLAMP 、REPEAT 和 MIRROR。

我們首先將CLAMP作為TileMode，代碼如下所示：

int canvasWidth = canvas.getWidth();int canvasHeight = canvas.getHeight();float centerX = canvasWidth / 2f;float centerY = canvasHeight / 2f;float radius = canvasWidth / 4f;RadialGradient radialGradient = new RadialGradient(centerX, centerY, radius, Color.GREEN, Color.BLUE, Shader.TileMode.MIRROR);paint.setShader(radialGradient);canvas.drawRect(0, 0, canvasWidth, canvasHeight, paint);

效果如下所示：

在中，我們繪製的矩形和Canvas大小一樣大，其尺寸大於我們定義的RadialGradient的圓的尺寸。我們可以看到，當使用CLAMP作為TileMode時，顏色從圓心的綠色向圓周的藍色漸層，在圓以外的空間都用edgeColor藍色填充。

當我們把CLAMP改為REPEAT時，還是畫同樣的矩形，效果如下所示：

我們看到，顏色以綠色到藍色作為一個漸層周期從圓心向外擴散。

當我們使用MIRROR作為TileMode時，還是畫同樣的矩形，效果如下所示：

我們看到，顏色以綠色->藍色->綠色->藍色…周期性地交替變換從圓心向外擴散。

在RadialGradient的第二個建構函式中可以通過參數colors傳入多個顏色值進去，這樣就會用colors數組中指定的顏色值一起進行顏色線性插值。還可以指定stops數組，該數組中每一個stop對應colors數組中每個顏色在半徑中的相對位置，stop取值範圍為[0,1]，0表示圓心位置，1表示圓周位置。如果stops數組為null，那麼Android會自動為colors設定等間距的位置。

SweepGradient

SweepGradient可以用來建立360度顏色旋轉漸層效果，具體來說顏色是圍繞中心點360度順時針旋轉的，起點就是3點鐘位置。

SweepGradient有兩個建構函式：

SweepGradient(float cx, float cy, int color0, int color1)SweepGradient(float cx, float cy, int[] colors, float[] positions)

SweepGradient不支援TileMode參數，我們先講解第一個建構函式。

座標(cx,cy)決定了中心點的位置，會繞著該中心點進行360度旋轉。color0表示的是起點的顏色位置，color1表示的是終點的顏色位置。

代碼如下所示：

int canvasWidth = canvas.getWidth();int canvasHeight = canvas.getHeight();float centerX = canvasWidth / 2f;float centerY = canvasHeight / 2f;float radius = canvasWidth / 4f;SweepGradient sweepGradient = new SweepGradient(centerX, centerY, Color.GREEN, Color.BLUE);paint.setShader(sweepGradient);canvas.drawCircle(centerX, centerY, radius, paint);

效果如下所示：

如所示，我們用canvas.drawCircle()方法繪製了一個圓形，將SweepGradient的中心點設定在該圓形的中心，我們可以看到顏色從3點鐘位置處的綠色沿著順時針360度旋轉漸層到藍色。

在SweepGradient的第二個建構函式中，我們可以傳入一個colors顏色數組，這樣Android就會根據傳入的顏色數組一起進行顏色插值。還可以指定positions數組，該數組中每一個position對應colors數組中每個顏色在360度中的相對位置，position取值範圍為[0,1]，0和1都表示3點鐘位置，0.25表示6點鐘位置，0.5表示9點鐘位置，0.75表示12點鐘位置，諸如此類。如果positions數組為null，那麼Android會自動為colors設定等間距的位置。

代碼如下所示：

int canvasWidth = canvas.getWidth();int canvasHeight = canvas.getHeight();float centerX = canvasWidth / 2f;float centerY = canvasHeight / 2f;float radius = canvasWidth / 4f;int[] colors = {Color.RED, Color.GREEN, Color.BLUE};float[] positions = {0f, 0.5f, 0f};SweepGradient sweepGradient = new SweepGradient(centerX, centerY, colors, positions);paint.setShader(sweepGradient);canvas.drawCircle(centerX, centerY, radius, paint);

效果如下所示：

在上面代碼中，我們將紅綠藍三種顏色傳入colors數組中，並通過positions數組指定其相對位置分別是0、0.5、1，所以紅色是起點顏色，位於3點鐘位置；綠色是中間顏色，位於9點鐘位置；藍色是終點顏色，也位於3點鐘位置。

當然，起點顏色的位置不一定是0，終點顏色的位置也不一定是1，我們將positions數組改為如下所示：

float[] positions = {0.25f, 0.5f, 0.75f};

效果如下：

我們看到顏色的色彩比例發生變化。起始顏色紅色的位置是0.25不是0，但是從3點鐘位置起顏色就是紅色。與其不同的是終止顏色藍色，藍色的位置是0.75不是1，其對應12點鐘位置，從12點鐘到3點鐘這90度的空間都是透明的，沒有被顏色填充，在使用時大家注意。

如果我們在此基礎上繪製整個Canvas大小的矩形，效果如下所示：

ComposeShader

ComposeShader，顧名思義，就是混合Shader的意思，它可以將兩個Shader按照一定的Xfermode組合起來。

ComposeShader有兩個建構函式，如下所示：

ComposeShader(Shader shaderA, Shader shaderB, Xfermode mode)ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode)

此處對Xfermode做一下簡單介紹，Xfermode可以用於實現新繪製的像素與Canvas上對應位置已有的像素按照混合規則進行顏色混合。Xfermode有三個子類：AvoidXfermode, PixelXorXfermode和PorterDuffXfermode，其中前兩個類現在被Android廢棄了，現在主要用的是PorterDuffXfermode。PorterDuffXfermode的建構函式需要指定PorterDuff.Mode的類型。所以，上面的第二個建構函式可以看做是第一個建構函式的特例。我們主要講解第二個，二者大同小異。

我們知道，在使用Xfermode的時候，存在目標像素DST和源像素SRC之說。源像素指的是將要向Canvas上繪製的像素，目標像素指的是源像素在Canvas上對應位置已經存在的像素。

建構函式中的shaderA對應著目標像素，shaderB對應著源像素。

有一點需要說明，ComposeShader這個類不是必須的，也就是我們不用這個類也能創造對應的效果，它類似於一個助手類，為我們實現某種效果提供了方便，下面舉例說明。

我們有如下透明圖片：

上面的圖片是透明的，不過圖片中有個心形圖案是白色，不透明。
我想讓漸層顏色只填充中的?形地區，透明部分不填充，顏色從綠色漸層到藍色，漸層方向從左上方到右下角。我們不用ComposeShader即可實現上述效果，代碼如下所示：

int bitmapWidth = bitmap.getWidth();int bitmapHeight = bitmap.getHeight();//將繪製代碼放入到canvas.saveLayer()和canvas.restore()之間canvas.saveLayer(0, 0, bitmapWidth, bitmapHeight, null, Canvas.ALL_SAVE_FLAG);    //建立BitmapShader，用以繪製?形    BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);    //將BitmapShader作為畫筆paint繪圖所使用的shader    paint.setShader(bitmapShader);    //用BitmapShader繪製矩形    canvas.drawRect(0, 0, bitmapWidth, bitmapHeight, paint);    //將畫筆的Xfermode設定為PorterDuff.Mode.MULTIPLY模式    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));    //建立LinearGradient，用以產生從左上方到右下角的色彩坡形效果    LinearGradient linearGradient = new LinearGradient(0, 0, bitmapWidth, bitmapHeight, Color.GREEN, Color.BLUE, Shader.TileMode.CLAMP);    //將建立LinearGradient作為畫筆paint繪圖所使用的shader    paint.setShader(linearGradient);    //用LinearGradient繪製矩形    canvas.drawRect(0, 0, bitmapWidth, bitmapHeight, paint);    //最後將畫筆去除掉Xfermode    paint.setXfermode(null);canvas.restore();

效果如下所示：

此處我們還是一起分析一下代碼的執行過程。

我們的圖片中間的?形地區是純白色，該地區的像素顏色值ARGB分量是(255,255,255,255)。?形地區以外的地區是純透明的，該地區的像素顏色值ARGB分量是(0,0,0,0)。

為了使用Xfermode，我們將繪圖的代碼放到了canvas.saveLayer()和canvas.restore()之間，對此有疑問的同學可以參見我上述提到的博文。canvas.saveLayer()會建立一個新的繪圖圖層，而且該圖層是全透明的，我們後面的代碼都是繪製到這個圖層上，而不是直接繪製到Canvas上。

我們用上述Bitmap建立了一個BitmapShader，並將其綁定到畫筆Paint中。當我們用canvas.drawRect()繪製矩形時，就會用該BitmapShader填充，此時的效果應該是在新建立的layer上繪製了一個白色的心形。

然後我們建立了一個PorterDuffXfermode的執行個體，並通過paint.setXfermode()將其綁定到畫筆paint上。其中PorterDuffXfermode的mode類型為MULTIPLY。MULTIPLY的意思是將源像素的ARGB四個分量分別與目標像素對應的ARGB四個分量相乘，將相乘的結果作為混合後的像素。此處進行相乘時，ARGB四個分量都已經從[0, 255]的區間歸一化到[0.0, 1.0]的區間。

然後我們建立了一個LinearGradient，用以實現顏色線性漸層效果。顏色從左上方的綠色漸層到右下角的藍色。然後我們通過paint.setShader()方法將其綁定到畫筆paint的shader上。

後面我們再次調用canvas.drawRect()繪製同樣大小的一個矩形。在繪製時，我們的畫筆已經同時綁定了Xfermode和Shader。首先canvas會用LinearGradient繪製一個具有漸層色的矩形地區。然後根據畫筆設定的PorterDuff.Mode.MULTIPLY類型，將那些由漸層色填充的矩形地區中的像素與我們在第3步中繪製的心形圖片中的像素顏色進行相乘混合。漸層色填充的矩形地區中的像素是源像素，第3步中繪製的心形圖片中的像素是目標像素。目標像素中?形地區是純白色的，其像素顏色是(255,255,255,255)，歸一化後的顏色是(1,1,1,1)，對應位置的源像素中的ARGB顏色分量與其相乘，最終的顏色還是源像素的顏色，即心形地區被源像素著上了漸層色。目標像素中?形地區以外的顏色是純透明的，顏色是(0,0,0,0)，對應位置的源像素中的ARGB顏色分量與其相乘，最終的顏色還是目標像素中的(0,0,0,0)，即心形地區以外沒有被著色，依舊呈現透明色。

最後通過調用canvas.restore()方法將新建立的layer繪製到Canvas上去，這樣我們就看到最終的效果了。

下面我們看看如和用ComposeShader實現上述效果，代碼如下所示：

int bitmapWidth = bitmap.getWidth();int bitmapHeight = bitmap.getHeight();//建立BitmapShader，用以繪製?形BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//建立LinearGradient，用以產生從左上方到右下角的色彩坡形效果LinearGradient linearGradient = new LinearGradient(0, 0, bitmapWidth, bitmapHeight, Color.GREEN, Color.BLUE, Shader.TileMode.CLAMP);//bitmapShader對應目標像素，linearGradient對應源像素，像素顏色混合採用MULTIPLY模式ComposeShader composeShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);//將組合的composeShader作為畫筆paint繪圖所使用的shaderpaint.setShader(composeShader);//用composeShader繪製矩形地區canvas.drawRect(0, 0, bitmapWidth, bitmapHeight, paint);

用ComposeShader實現的效果與相同，我就不再貼圖了。我們可以看到，使用ComposeShader之後，實現相同的效果時，代碼量明顯減少了，而且我們也不需要將繪圖代碼放到canvas.saveLayer()和canvas.restore()之間了。

根據上面的樣本，我們可以得出如下結論：
假設我們定義了兩個Shader的變數，shaderA和shaderB，並分別對這兩個Shader進行了執行個體化。
可以使用ComposeShader將二者組合使用，基本代碼如下所示：

ComposeShader composeShader = new ComposeShader(shaderA, shaderB, porterDuffMode);paint.setShader(composeShader);canvas.drawXXX(..., paint);

上述代碼等價於下面的程式碼片段：

canvas.saveLayer(left, top, right, bottom, null, Canvas.ALL_SAVE_FLAG);    paint.setShader(shaderA);    canvas.drawXXX(..., paint);    paint.setXfermode(new PorterDuffXfermode(mode));    paint.setShader(shaderB);    canvas.drawXXX(..., paint);    paint.setXfermode(null);canvas.restore();

此處所說的以上兩個程式碼片段等價的前提是，兩個程式碼片段中的canvas.drawXXX(…, paint)方法中調用的drawXXX方法相同，並且裡面傳入的參數都相同，例如我們之前兩段心形程式碼範例中都調用drawRect()方法且繪製的矩形的位置及尺寸都相同。

總結

本文依次介紹了Shader的五個子類：BitmapShader、LinearGradient、RadialGradient、SweepGradient和ComposeShader。並在最後對ComposeShader這個相對複雜的樣本進行了講解，如果大家能看明白最後ComposeShader這個樣本，相信大家已經對Shader理解地比較透徹了。

如果覺得文章還可以，點擊下面幫我頂一下，希望本文對大家使用Shader進行繪圖有所協助！