Android Shader著色器/渲染器的用法解析
一、介紹
Shader是繪圖過程中的著色器，它有五個子類：
BitmapShader： 位圖渲染
LinearGradient： 線性渲染
SweepGradient： 梯度渲染
RadialGradient： 光束渲染
ComposeShader： 組合渲染
渲染模式：Shader.TileMode
Shader.TileMode.CLAMP： 邊緣拉伸模式，它會拉伸邊緣的一個像素來填充其他區(qū)域。
Shader.TileMode.MIRROR： 鏡像模式，通過鏡像變化來填充其他區(qū)域。需要注意的是，鏡像模式先進行y軸方向的鏡像操作，然后在進行x軸方向上的鏡像操作。
Shader.TileMode.REPEAT：重復模式，通過復制來填充其他區(qū)域
下面的圖：X軸是邊緣拉伸模式，Y重復模式
鏡像模式：xy軸均是鏡像模式
二、效果介紹：
1.BitmapShader： 位圖渲染
構(gòu)造方法：BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)
參數(shù)：
bitmap：要處理的bitmap對象
tileX：在X軸處理的效果，Shader.TileMode里有三種模式：CLAMP、MIRROR和REPETA
tileY：在Y軸處理的效果，Shader.TileMode里有三種模式：CLAMP、MIRROR和REPETA
我們給畫筆填充一個五角星，然后繪制一條直線
Shader shader[] = new Shader[8]; bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.star); shader[0] = new BitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT); Paint paint = new Paint(); paint.setStyle(Paint.Style.FILL); paint.setStrokeWidth(32); paint.setShader(shader[0]); int lineHeight = 100,lineOffset = 50; canvas.drawLine(0,lineHeight,parentWidth,100,paint);
2.LinearGradient： 線性渲染
LinearGradient是顏色線性漸變的著色器。
構(gòu)造函數(shù)：
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)
參數(shù)：
（x0,y0）表示漸變的起點，（x1,y1）表示漸變的終點坐標，這兩點都是相對于屏幕坐標系。
color0,color1分別表示起點的顏色和終點的顏色。
也傳入多個顏色，和每個顏色的起始位置。
colors[]傳入多個顏色值進去
positions[] 位置數(shù)組
而且當positions參數(shù)傳入null時，代表顏色是均勻的填充整個漸變區(qū)域的，顯得比較柔和。
通過兩個構(gòu)造函數(shù)分別畫兩條線：
lineHeight += lineOffset; shader[1] = new LinearGradient(0,lineHeight,parentWidth,lineHeight,Color.RED,Color.GREEN,Shader.TileMode.REPEAT); paint.setShader(shader[1]); canvas.drawLine(0,lineHeight,parentWidth,lineHeight,paint); lineHeight += lineOffset; shader[2] = new LinearGradient(0,lineHeight,parentWidth,lineHeight,GRADIENT_COLORS,null,Shader.TileMode.REPEAT); paint.setShader(shader[2]); canvas.drawLine(0,lineHeight,parentWidth,lineHeight,paint);
3.SweepGradient： 梯度渲染
SweepGradient是梯度漸變，也稱為掃描式漸變，可以實現(xiàn)雷達掃描效果。
構(gòu)造函數(shù)：
SweepGradient(float cx, float cy, int color0, int color1)
參數(shù)：
(cx,cy)表示漸變效果的中心點，也就是雷達掃描的圓點。color0和color1表示漸變的起點色和終點色。
顏色漸變是順時針的，從中心點的x軸正方形開始。
注意:這里構(gòu)造函數(shù)并不需要TileMode,因為梯度漸變的邊界相當于無限大的。
構(gòu)造函數(shù)：
SweepGradient(float cx, float cy,int colors[], float positions[])
參數(shù)：
colors[]顏色數(shù)組
positions數(shù)組，該數(shù)組中每一個position對應(yīng)colors數(shù)組中每個顏色在360度中的相對位置，
position取值范圍為[0,1]，0和1都表示3點鐘位置，0.25表示6點鐘位置，0.5表示9點鐘位置，0.75表示12點鐘位置，
通過要個構(gòu)造函數(shù)繪制兩個實心圓，其中第二個圓指定positions
public static final int[] GRADIENT_COLORS = new int[]{
Color.RED,Color.YELLOW,Color.BLUE, Color.GREEN, Color.WHITE, Color.RED };
public static final float[] GRADIENT_POSITONS = new float[]{
0.0f,0.5f,0.55f,0.6f,0.65f,1.0f};
lineHeight += lineOffset +32; shader[3] = new SweepGradient(150,lineHeight,GRADIENT_COLORS,null); paint.setShader(shader[3]); canvas.drawCircle(150,lineHeight,50,paint); shader[4] = new SweepGradient(450,lineHeight,GRADIENT_COLORS,GRADIENT_POSITONS); paint.setShader(shader[4]); canvas.drawCircle(450,lineHeight,50,paint);
4.RadialGradient： 光束渲染
RadialGradient:創(chuàng)建從中心向四周發(fā)散的輻射漸變效果，
構(gòu)造函數(shù)：
RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)
參數(shù)：
centerX 圓心的X坐標
centerY 圓心的Y坐標
radius 圓的半徑
centerColor 中心顏色
edgeColor 邊緣顏色
構(gòu)造函數(shù)：
RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)
參數(shù)：
colors[]傳入多個顏色值進去，這樣就會用colors數(shù)組中指定的顏色值一起進行顏色線性插值。
stops數(shù)組，該數(shù)組中每一個stop對應(yīng)colors數(shù)組中每個顏色在半徑中的相對位置，
stop[]取值范圍為[0,1]，0表示圓心位置，1表示圓周位置。如果stops數(shù)組為null，那么Android會自動為colors設(shè)置等間距的位置。
private float period = 0; //偏移量變化周期值
lineHeight += lineOffset + 150;
shader[5] = new RadialGradient(150,lineHeight,10,Color.GREEN,Color.RED,Shader.TileMode.MIRROR);
paint.setShader(shader[5]);
canvas.drawCircle(150,lineHeight,100,paint);
if ( period < 250 || period >= 650){
period = 250;
}else {
period += 5F;
}
shader[6] = new RadialGradient(period,lineHeight,30,GRADIENT_COLORS,null,Shader.TileMode.MIRROR);
paint.setShader(shader[6]);
canvas.drawCircle(450,lineHeight,100,paint);
這里多指定了一個period，設(shè)置為漸變的圓心x軸坐標，這樣就可以實現(xiàn)滾動的小球
同樣也可以設(shè)置繪制的圓心跟隨滾動：將圓心Y軸坐標設(shè)置為period，實現(xiàn)小球從上往下掉的效果
canvas.drawCircle(450,period,100,paint);
5.ComposeShader： 組合渲染
ComposeShader用來組合不同的Shader,可以將兩個不同的Shader組合在一起
構(gòu)造函數(shù):
ComposeShader (Shader shaderA, Shader shaderB, Xfermode mode)
ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode)
參數(shù)：
shaderA shaderB 兩種渲染效果
mode 疊加效果：PorterDuff圖形混合模式介紹
將bitmapShader和RadialGradient模式復合
lineHeight += lineOffset + 350; bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.head); shader[0] = new BitmapShader(bitmap, Shader.TileMode.REPEAT,Shader.TileMode.REPEAT); shader[6] = new RadialGradient(150,lineHeight,550,Color.BLACK,Color.TRANSPARENT, Shader.TileMode.CLAMP); //混合產(chǎn)生新的Shader. shader[7] = new ComposeShader(shader[0],shader[6],PorterDuff.Mode.DST_IN); paint.setShader(shader[7]); //以新的Shader繪制一個圓。 canvas.drawCircle(150,lineHeight,550,paint);
左下角的漸漸模糊的圖片便是組合效果
全部代碼：
//shader 畫筆填充
private void my_shader(Canvas canvas){
//Shader.TileMode是指平鋪模式
//Shader.TileMode.CLAMP是邊緣拉伸模式，它會拉伸邊緣的一個像素來填充其他區(qū)域。
//Shader.TileMode.MIRROR是鏡像模式，通過鏡像變化來填充其他區(qū)域。需要注意的是，鏡像模式先進行y軸方向的鏡像操作，然后在進行x軸方向上的鏡像操作。
//Shader.TileMode.REPEAT是重復模式，通過復制來填充其他區(qū)域
//bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.head);
Shader shader[] = new Shader[8];
bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.star);
shader[0] = new BitmapShader(bitmap,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(32);
paint.setShader(shader[0]);
int lineHeight = 100,lineOffset = 50;
canvas.drawLine(0,lineHeight,parentWidth,100,paint);
//canvas.drawCircle(240,240,100,paint);
//LinearGradient是顏色線性漸變的著色器。
//LinearGradient (float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
//（x0,y0）表示漸變的起點，（x1,y1）表示漸變的終點坐標，這兩點都是相對于屏幕坐標系。color0,color1分別表示起點的顏色和終點的顏色。
//LinearGradient (float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)
//多色漸變的構(gòu)造函數(shù)中，我們可以傳入多個顏色，和每個顏色的占比。而且當positions參數(shù)傳入null時，代表顏色是均勻的填充整個漸變區(qū)域的，顯得比較柔和。
lineHeight += lineOffset;
shader[1] = new LinearGradient(0,lineHeight,parentWidth,lineHeight,Color.RED,Color.GREEN,Shader.TileMode.REPEAT);
paint.setShader(shader[1]);
canvas.drawLine(0,lineHeight,parentWidth,lineHeight,paint);
lineHeight += lineOffset;
shader[2] = new LinearGradient(0,lineHeight,parentWidth,lineHeight,GRADIENT_COLORS,null,Shader.TileMode.REPEAT);
paint.setShader(shader[2]);
canvas.drawLine(0,lineHeight,parentWidth,lineHeight,paint);
//SweepGradient是梯度漸變，也稱為掃描式漸變，效果有點類似與雷達掃描效果。
//SweepGradient(float cx, float cy, int color0, int color1)
// (cx,cy)表示漸變效果的中心點，也就是雷達掃描的圓點。color0和color1表示漸變的起點色和終點色。
// 顏色漸變是順時針的，從中心點的x軸正方形開始。
// 注意:這里構(gòu)造函數(shù)并不需要TileMode,因為梯度漸變的邊界相當于無限大的。
//SweepGradient(float cx, float cy,int colors[], float positions[])
//colors[]顏色數(shù)組
//positions數(shù)組，該數(shù)組中每一個position對應(yīng)colors數(shù)組中每個顏色在360度中的相對位置，
// position取值范圍為[0,1]，0和1都表示3點鐘位置，0.25表示6點鐘位置，0.5表示9點鐘位置，0.75表示12點鐘位置，
lineHeight += lineOffset +32;
shader[3] = new SweepGradient(150,lineHeight,GRADIENT_COLORS,null);
paint.setShader(shader[3]);
canvas.drawCircle(150,lineHeight,50,paint);
shader[4] = new SweepGradient(450,lineHeight,GRADIENT_COLORS,GRADIENT_POSITONS);
paint.setShader(shader[4]);
canvas.drawCircle(450,lineHeight,50,paint);
//RadialGradient:創(chuàng)建從中心向四周發(fā)散的輻射漸變效果，其有兩個構(gòu)造函數(shù)：
//RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)
//centerX 圓心的X坐標
//centerY 圓心的Y坐標
//radius 圓的半徑
//centerColor 中心顏色
//edgeColor 邊緣顏色
//RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)
//colors[]傳入多個顏色值進去，這樣就會用colors數(shù)組中指定的顏色值一起進行顏色線性插值。
// stops數(shù)組，該數(shù)組中每一個stop對應(yīng)colors數(shù)組中每個顏色在半徑中的相對位置，
// stop[]取值范圍為[0,1]，0表示圓心位置，1表示圓周位置。如果stops數(shù)組為null，那么Android會自動為colors設(shè)置等間距的位置。
lineHeight += lineOffset + 150;
shader[5] = new RadialGradient(150,lineHeight,10,Color.GREEN,Color.RED,Shader.TileMode.MIRROR);
paint.setShader(shader[5]);
canvas.drawCircle(150,lineHeight,100,paint);
if ( period < 250 || period >= 650){
period = 250;
}else {
period += 5F;
}
shader[6] = new RadialGradient(period,lineHeight,30,GRADIENT_COLORS,null,Shader.TileMode.MIRROR);
paint.setShader(shader[6]);
canvas.drawCircle(450,period,100,paint);
//ComposeShader用來組合不同的Shader,可以將兩個不同的Shader組合在一起，它有兩個構(gòu)造函數(shù):
//ComposeShader (Shader shaderA, Shader shaderB, Xfermode mode)
//ComposeShader (Shader shaderA, Shader shaderB, PorterDuff.Mode mode)
lineHeight += lineOffset + 350;
bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.head);
shader[0] = new BitmapShader(bitmap, Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
shader[6] = new RadialGradient(150,lineHeight,550,Color.BLACK,Color.TRANSPARENT, Shader.TileMode.CLAMP);
//混合產(chǎn)生新的Shader.
shader[7] = new ComposeShader(shader[0],shader[6],PorterDuff.Mode.DST_IN);
paint.setShader(shader[7]);
//以新的Shader繪制一個圓。
canvas.drawCircle(150,lineHeight,550,paint);
}
以上這篇Android Shader著色器/渲染器的用法解析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
AndroidStudio 設(shè)置格式化斷行寬度教程
這篇文章主要介紹了AndroidStudio 設(shè)置格式化斷行寬度教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android滑動沖突是Android開發(fā)中常見的問題,在一個界面中,可能存在多個View可以響應(yīng)滑動事件,如果這些View滑動方向一致,則會導致滑動沖突,本文將從原理、使用與優(yōu)化三個方面,詳細介紹Android滑動沖突的解決方式,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了Android仿網(wǎng)易云音樂播放界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
Android開發(fā)調(diào)用WebService的方法示例
這篇文章主要介紹了Android開發(fā)調(diào)用WebService的方法,結(jié)合實例形式較為詳細的分析了Android調(diào)用WebService的原理、實現(xiàn)方法與相關(guān)操作注意事項,需要的朋友可以參考下2017-10-10
本篇文章主要介紹了Android進程間通信實踐的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
利用matrix可以實現(xiàn)各種圖片的特效，比如圖片的旋轉(zhuǎn)、縮放、移動，甚至是圖片倒影效果，這篇文章為大家介紹了matrix實現(xiàn)圖片倒影的代碼，感興趣的小伙伴們可以參考一下2016-05-05
Android實現(xiàn)iPhone晃動撤銷輸入功能 Android仿微信搖一搖功能
這篇文章主要為大家詳細介紹了Android實現(xiàn)iPhone晃動撤銷輸入功能，Android仿微信搖一搖功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了如何用AdapterViewFlipper完成圖片輪播，幫助大家更好的理解和學習使用AdapterViewFlipper，感興趣的朋友可以了解下2021-04-04
Android自定義View實現(xiàn)音頻播放圓形進度條
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)音頻播放圓形進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
折線圖是我們在開發(fā)中經(jīng)常會遇到的一個需求，下面這篇文章主要給大家介紹了關(guān)于自定義View之kotlin繪制折線圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧2018-09-09