歡迎您光臨本站 註冊首頁

Android Shader著色器/渲染器的用法解析

←手機掃碼閱讀     limiyoyo @ 2020-04-30 , reply:0

一、介紹

Shader是繪圖過程中的著色器,它有五個子類:

BitmapShader: 位圖渲染

LinearGradient: 線性渲染

SweepGradient: 梯度渲染

RadialGradient: 光束渲染

ComposeShader: 組合渲染

渲染模式:Shader.TileMode

Shader.TileMode.CLAMP: 邊緣拉伸模式,它會拉伸邊緣的一個像素來填充其他區域。

Shader.TileMode.MIRROR: 鏡像模式,通過鏡像變化來填充其他區域。需要注意的是,鏡像模式先進行y軸方向的鏡像操作,然後在進行x軸方向上的鏡像操作。

Shader.TileMode.REPEAT:重複模式,通過複製來填充其他區域

下面的圖:X軸是邊緣拉伸模式,Y重複模式

鏡像模式:xy軸均是鏡像模式

二、效果介紹:

1.BitmapShader: 位圖渲染

構造方法:BitmapShader (Bitmap bitmap, Shader.TileMode tileX, Shader.TileMode tileY)

參數:

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是顏色線性漸變的著色器。

構造函數:

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)

參數:

(x0,y0)表示漸變的起點,(x1,y1)表示漸變的終點座標,這兩點都是相對於屏幕座標系。

color0,color1分別表示起點的顏色和終點的顏色。

也傳入多個顏色,和每個顏色的起始位置。

colors[]傳入多個顏色值進去

positions[] 位置數組

而且當positions參數傳入null時,代表顏色是均勻的填充整個漸變區域的,顯得比較柔和。

通過兩個構造函數分別畫兩條線:

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是梯度漸變,也稱為掃描式漸變,可以實現雷達掃描效果。

構造函數:

SweepGradient(float cx, float cy, int color0, int color1)

參數:

(cx,cy)表示漸變效果的中心點,也就是雷達掃描的圓點。color0和color1表示漸變的起點色和終點色。

顏色漸變是順時針的,從中心點的x軸正方形開始。

注意:這裡構造函數並不需要TileMode,因為梯度漸變的邊界相當於無限大的。

構造函數:

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

參數:

colors[]顏色數組

positions數組,該數組中每一個position對應colors數組中每個顏色在360度中的相對位置,

position取值範圍為[0,1],0和1都表示3點鐘位置,0.25表示6點鐘位置,0.5表示9點鐘位置,0.75表示12點鐘位置,

通過要個構造函數繪製兩個實心圓,其中第二個圓指定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:創建從中心向四周發散的輻射漸變效果,

構造函數:

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數組中指定的顏色值一起進行顏色線性插值。

stops數組,該數組中每一個stop對應colors數組中每個顏色在半徑中的相對位置,

stop[]取值範圍為[0,1],0表示圓心位置,1表示圓周位置。如果stops數組為null,那麼Android會自動為colors設置等間距的位置。

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,設置為漸變的圓心x軸座標,這樣就可以實現滾動的小球

同樣也可以設置繪製的圓心跟隨滾動:將圓心Y軸座標設置為period,實現小球從上往下掉的效果

canvas.drawCircle(450,period,100,paint);

5.ComposeShader: 組合渲染

ComposeShader用來組合不同的Shader,可以將兩個不同的Shader組合在一起

構造函數:

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

參數:

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); //混合產生新的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是邊緣拉伸模式,它會拉伸邊緣的一個像素來填充其他區域。 //Shader.TileMode.MIRROR是鏡像模式,通過鏡像變化來填充其他區域。需要注意的是,鏡像模式先進行y軸方向的鏡像操作,然後在進行x軸方向上的鏡像操作。 //Shader.TileMode.REPEAT是重複模式,通過複製來填充其他區域 //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) //多色漸變的構造函數中,我們可以傳入多個顏色,和每個顏色的佔比。而且當positions參數傳入null時,代表顏色是均勻的填充整個漸變區域的,顯得比較柔和。 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軸正方形開始。 // 注意:這裡構造函數並不需要TileMode,因為梯度漸變的邊界相當於無限大的。 //SweepGradient(float cx, float cy,int colors[], float positions[]) //colors[]顏色數組 //positions數組,該數組中每一個position對應colors數組中每個顏色在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:創建從中心向四周發散的輻射漸變效果,其有兩個構造函數: //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數組中指定的顏色值一起進行顏色線性插值。 // stops數組,該數組中每一個stop對應colors數組中每個顏色在半徑中的相對位置, // stop[]取值範圍為[0,1],0表示圓心位置,1表示圓周位置。如果stops數組為null,那麼Android會自動為colors設置等間距的位置。 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組合在一起,它有兩個構造函數: //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); //混合產生新的Shader. shader[7] = new ComposeShader(shader[0],shader[6],PorterDuff.Mode.DST_IN); paint.setShader(shader[7]); //以新的Shader繪製一個圓。 canvas.drawCircle(150,lineHeight,550,paint); }


[limiyoyo ] Android Shader著色器/渲染器的用法解析已經有306次圍觀

http://coctec.com/docs/android/show-post-232226.html