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

一、介绍

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);
}

以上这篇Android Shader着色器/渲染器的用法解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)

    一.前言 Android实现圆角矩形,圆形或者椭圆等图形,一般主要是个自定义View加上使用Xfermode实现的.实现圆角图片的方法其实不少,常见的就是利用Xfermode,Shader.本文直接继承ImageView,使用BitmapShader方法来实现圆形.圆角和椭圆的绘制,等大家看我本文的方法后,其他的类似形状也就都能举一反三来来画出来了. 二.效果图: 三.BitmapShader简介 BitmapShader是Shader的子类,可以通过Paint.setShader(Shader

  • Android Shader应用开发之霓虹闪烁文字效果

    本文实例为大家分享了Android霓虹闪烁文字效果的具体代码,供大家参考,具体内容如下 package com.example.apple.shaderdemo; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Matrix; i

  • Android Shader应用开发之雷达扫描效果

    本文实例为大家分享了Android雷达扫描效果的具体代码,供大家参考,具体内容如下 效果图 知识点提要 Shader 矩阵matrix 属性动画 ShaderView3 package com.example.apple.shaderdemo; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.

  • 利用Android中BitmapShader制作自带边框的圆形头像

    效果如下: BitmapShader 的简单介绍 关于 Shader是什么,Shader的种类有哪几种以及如何使用不属于本文范畴,对这方面不是很了解的同学,建议先去学习一下 Shader 的基本使用. BitmapShader主要的作用就是 通过Paint对象,对 画布进行指定的Bitmap填充,实现一系列效果,可以有以下三种模式进行选择 1.CLAMP - 拉伸,这里拉伸的是图片的最后一个元素,不断地重复,这个效果,在图片比较小,而所要画的面积比较大的时候会比较明显. 2.REPEAT - 重

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

    一.介绍 Shader是绘图过程中的着色器,它有五个子类: BitmapShader: 位图渲染 LinearGradient: 线性渲染 SweepGradient: 梯度渲染 RadialGradient: 光束渲染 ComposeShader: 组合渲染 渲染模式:Shader.TileMode Shader.TileMode.CLAMP: 边缘拉伸模式,它会拉伸边缘的一个像素来填充其他区域. Shader.TileMode.MIRROR: 镜像模式,通过镜像变化来填充其他区域.需要注意的

  • Angular Renderer (渲染器)的具体使用

    Angular 其中的一个设计目标是使浏览器与 DOM 独立.DOM 是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测试与重构.另外的好处是,由于这种解耦,使得我们的应用能够运行在其它平台 (比如:Node.js.WebWorkers.NativeScript 等). 为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异.比如定义了抽象类 Renderer.Renderer2 .抽象类 RootRenderer 等.此外还定义了以下引用类型:ElementRef.Temp

  • Django Rest framework解析器和渲染器详解

    解析器 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己想要的数据类型的过程. 本质就是对请求体中的数据进行解析. Content-type:用于声明我给你传的是什么类型的数据 application/x-ww-form-urlencoded 表单数据类型 multipart/form-data 文件 application/json(比如:request.body) Accept:用于声明我能解析什么样的数据类型 Django中的解析器 我们的请求进来后,请求体中的数据是保存在r

  • Java Swing中JTable渲染器与编辑器用法示例

    本文实例讲述了Java Swing中JTable渲染器与编辑器用法.分享给大家供大家参考,具体如下: JTable的内容.外观.事件响应在很大程度上是由渲染器与编辑器控制的.具体说来,渲染器负责单元格的外观比如前景色.背景色,以及单元格提示:编辑器负责单元格的内容和事件响应.编辑器默认为文本框形式,也可以使用下拉菜单.按钮.单选按钮等形式.下面通过一个demo程序来说明渲染器与编辑器的基本用法. JButtonTableExample.java package awtDemo; import j

  • Android开发之电话拨号器实例详解

    本文实例分析了Android开发之电话拨号器的用法.分享给大家供大家参考,具体如下: 1.新建一个名为javacallPhone的安卓项目,并在cn.csdn.hr.activity包下建一个CallPhoneActivity.java类 2.打开res下的Layout下的main.xml进行布局,设置布局方式为水平布局,再从左侧分别拖入textview,text files下的Phone,和button按钮,通过new String后效果如下: 3.打开CallPhoneActivity.ja

  • Android编程简单实现拨号器功能的方法

    本文实例讲述了Android编程简单实现拨号器功能的方法.分享给大家供大家参考,具体如下: 学习Android已经有2天时间了,没学习的时候觉得android可能很枯燥,但是学过之后我发觉其实这个比什么javaweb好玩多了.学习android可以见到一些很有趣的东西,这里呢也建议学习javaME的人不要在煎熬了,学习android吧.在写程序之前也需要知道android的工作原理 1.获取组件清单 2.登记或注册组件 3.将组件封装成意图 4.把意图交给意图处理器进行处理 5.把界面显示给用户

  • Xamarin渲染器移植到.NET MAUI项目中

    简介 众所周知, .NET MAUI使用的是Handler处理程序, 而Xamarin使用的则是Render渲染器模式.尽管MAUI中使用了新的渲染模式, 但是仍然Xamarin中的支持Render渲染器, 这意味着如果你的项目是从Xamarin移植到MAUI当中, 大部分代码能够可以重用, 本篇文章介绍如何将Xamarin 渲染器(Render)移植到.NET MAUI项目当中. 先决条件 为了还原本次测试环境, 下面分别列举了本次测试代码移植的开发测试环境, 如下所示: IDE: Visua

  • javascript编程开发中取色器及封装$函数用法示例

    本文实例讲述了javascript编程开发中取色器及封装$函数用法.分享给大家供大家参考,具体如下: 1.封装$函数 function $(str){ //如果传入的是'#' 则选择id标签 //如果传入的是'.' 则选择所有的类名标签 //如果传入的既不是'#也不是'.' 选择复合标签 //判断传入的值 if(typeof str !='string'){ console.log('传入的参数有误!'); return null; } //获取参数的第一个字母 var firstChar=st

  • Android MediaPlayer实现音乐播放器实例代码

    Android MediaPlayer实现音乐播放器 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=&qu

  • Android编程实现网络图片查看器和网页源码查看器实例

    本文实例讲述了Android编程实现网络图片查看器和网页源码查看器.分享给大家供大家参考,具体如下: 网络图片查看器 清单文加入网络访问权限: <!-- 访问internet权限 --> <uses-permission android:name="android.permission.INTERNET"/> 界面如下: 示例: public class MainActivity extends Activity { private EditText image

随机推荐