热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

AndroidShader着色器/渲染器的用法解析

这篇文章主要介绍了AndroidShader着色器渲染器的用法解析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、介绍

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


推荐阅读
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
author-avatar
手机用户2502906317
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有