Android自定义View着色器Shader使用

我就是我 2022-01-14 12:05 343阅读 0赞

# [GitHub地址][GitHub] #

# [项目承接前面钟表项目，但之前代码功能对本篇没影响][Link 1] #

### Shader着色器分类：`例子图片中的背景渐变色` ###

1.  辐射着色器：RadialGradient
2.  线性着色器：LinearGradient
3.  混合着色器：ComposeShader
4.  扫描着色器：SweepGradient
5.  图片着色器：BitmapShader

### 1. 辐射着色器：RadialGradient ###

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]  
实现代码：

int[] colors = { 
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress),
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress)
            };
            //每个颜色结束的位置，中间为渐变
            float[] stops = { 0.25f,0.5f,0.75f,1.0f};
            //辐射式着色器
            RadialGradient gradient = new RadialGradient(
            	centre, //着色器的初始着色点x坐标
            	centre, //着色器的初始着色点y坐标
            	radius,//着色器的渲染半径
                colors,//着色器的颜色集
                stops,//着色器的颜色定位集
                Shader.TileMode.CLAMP//明暗平衡模式
            );
            mPaint.setShader(gradient);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环(实心)

### 2. 线性着色器LinearGradient ###

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]  
实现代码：

int[] colors = { 
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress),
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress)
            };
            //每个颜色结束的位置，中间为渐变
            float[] stops = { 0.25f,0.5f,0.75f,1.0f};
    		LinearGradient gradient =
                    new LinearGradient(
                    	0,//着色器开始的x坐标
                    	0,//着色器开始的y坐标
                    	getWidth(),//着色器结束的x坐标
                    	getHeight(),//着色器结束的y坐标
                    	colors,//着色器的颜色集
                    	stops,//着色器的颜色定位集
                    	Shader.TileMode.CLAMP//明暗平衡模式
                    );
            mPaint.setShader(gradient);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环(实心)

### 3. 混合着色器：ComposeShader ###

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 2]  
实现代码：

int[] colors = { 
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress),
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress)
            };
            //每个颜色结束的位置，中间为渐变
            float[] stops = { 0.25f,0.5f,0.75f,1.0f};
            //辐射式着色器
            RadialGradient gradient1 = new RadialGradient(centre, centre, radius,
                    colors,stops,
                    Shader.TileMode.CLAMP);
            //线性着色器
            LinearGradient gradient2 =
                    new LinearGradient(0,0,getWidth(),getHeight(),colors,stops,Shader.TileMode.CLAMP);
            ComposeShader gradient = new ComposeShader(
            	gradient1,//被混合的着色器
            	gradient2,//用来混合的着色器
            	PorterDuff.Mode.LIGHTEN//结合模式
            );
            mPaint.setShader(gradient);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环(实心)

### 4. 扫描着色器：SweepGradient ###

效果图：

> 扫描的开始方向是三点钟方向

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 3]  
实现代码：

int[] colors = { 
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress),
                    getResources().getColor(R.color.back_ground),
                    getResources().getColor(R.color.progress)
            };
            //每个颜色结束的位置，中间为渐变
            float[] stops = { 0f,0.3f,0.7f,1.0f};
            SweepGradient gradient = new SweepGradient(
            	centre,//扫描的中心点x坐标
            	centre,//扫描的中心点y坐标
            	colors,//扫描变幻的颜色集
            	stops//扫描变幻颜色的位置集
            );
            mPaint.setShader(gradient);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环(实心)

### 5. 图片着色器：BitmapShader ###

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 4]  
实现代码：

Bitmap bitmap
    			bitmap = BitmapFactory
    						.decodeResource(this.getResources(),R.drawable.ic_launcher);
     		BitmapShader gradient = new BitmapShader(
     			bitmap, //着色图片
     			Shader.TileMode.REPEAT,//x轴的着色方式
     			Shader.TileMode.CLAMP);//y轴的着色方式
            mPaint.setShader(gradient);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环(实心)

[GitHub]: https://github.com/yangshuaionline/YsAndroid
[Link 1]: https://blog.csdn.net/yangshuaionline/article/details/91865949
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: /images/20220114/d4199da6407647039e484088f1aae450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]: /images/20220114/2542098adbbb4856a5cebb20fd48eee9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 2]: /images/20220114/5e71838d1c784cc8b06597fc2e618c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 3]: /images/20220114/1cd1c892ee814c3c883f39f068f4ee71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 4]: /images/20220114/a6caca6ff467496d90fbaa10d207dcdf.png