一、介绍

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着色器/渲染器的用法解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持Devmax。

Android Shader着色器/渲染器的用法解析的更多相关文章

  1. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  4. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  5. Ionic – Splash Screen适用于iOS,但不适用于Android

    我有一个离子应用程序,其中使用CLI命令离子资源生成的启动画面和图标iOS版本与正在渲染的启动画面完美配合,但在Android版本中,只有在加载应用程序时才会显示白屏.我检查了config.xml文件,所有路径看起来都是正确的,生成的图像出现在相应的文件夹中.(我使用了splash.psd模板来生成它们.我错过了什么?这是config.xml文件供参考,我觉得我在这里做错了–解决方法在config.xml中添加以下键:它对我有用!

  6. 为什么这个OpenGL ES 2.0着色器不能在iOS上使用我的VBO?

    如果有人能够了解这里出了什么问题,也许是对gl命令或其他一些不兼容的命令序列的错误排序,我将非常感谢你的帮助.尽管谷歌在“OpenGLES2.0编程指南”中进行了大量研究和研究,但我一直试图让这段代码整天都没有成功.我正在尝试在iPhone上的OpenGLES2.0中使用顶点缓冲区对象和自定义着色器.我试图交错来自以下类型的一系列自定义结构的顶点数据:位置,半径和颜色字节分别考虑顶点位置,点大小和

  7. ios – 无法启动iPhone模拟器

    /Library/Developer/CoreSimulator/Devices/530A44CB-5978-4926-9E91-E9DBD5BFB105/data/Containers/Bundle/Application/07612A5C-659D-4C04-ACD3-D211D2830E17/ProductName.app/ProductName然后,如果您在Xcode构建设置中选择标准体系结构并再次构建和运行,则会产生以下结果:dyld:lazysymbolbindingFailed:Symbol

  8. Xamarin iOS图像在Grid内部重叠

    heyo,所以在Xamarin我有一个使用并在其中包含一对,所有这些都包含在内.这在Xamarin.Android中看起来完全没问题,但是在Xamarin.iOS中,图像与标签重叠.我不确定它的区别是什么–为什么它在Xamarin.Android中看起来不错但在iOS中它的全部都不稳定?

  9. 在iOS上向后播放HTML5视频

    我试图在iPad上反向播放HTML5视频.HTML5元素包括一个名为playbackRate的属性,它允许以更快或更慢的速率或相反的方式播放视频.根据Apple’sdocumentation,iOS不支持此属性.通过每秒多次设置currentTime属性,可以反复播放,而无需使用playbackRate.这种方法适用于桌面Safari,但似乎在iOS设备上的搜索限制为每秒1次更新–在我的情况下太慢了.有没有办法在iOS设备上向后播放HTML5视频?解决方法iOS6Safari现在支持playbackRat

  10. ios – 如何设计一个简单的GLSL包装器,用于着色器使用

    以下简单的例子.说我有一个顶点着色器只是模拟固定的功能和两个片段着色器–一个用于绘制光滑的矩形,一个用于绘制光滑的圆.我有以下文件:基本链接现在使用这些标准的方法是什么?将上述着色器链接到两个OpenGL着色器程序?一个OO设计与着色器对象每个都有参数?

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作,实现图片的放大、缩小和旋转等处理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

返回
顶部