android开发分享Android Shader着色器/渲染器的用法解析

一、介绍shader是绘图过程中的着色器,它有五个子类:bitmapshader: 位图渲染lineargradient: 线性渲染sweepgradient: 梯度渲染radialgradient:

一、介绍

shader是绘图过程中的着色器,它有五个子类:

bitmapshader: 位图渲染

lineargradient: 线性渲染

sweepgradient: 梯度渲染

radialgradient: 光束渲染

composeshader: 组合渲染

渲染模式:shader.tilemode

shader.tilemode.clamp: 边缘拉伸模式,它会拉伸边缘的一个像素来填充其他区域。

shader.tilemode.mirror: 镜像模式,通过镜像变化来填充其他区域。需要注意的是,镜像模式先进行y轴方向的镜像操作,然后在进行x轴方向上的镜像操作。

shader.tilemode.repeat:重复模式,通过复制来填充其他区域

下面的图:x轴是边缘拉伸模式,y重复模式

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

镜像模式:xy轴均是镜像模式

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

二、效果介绍:

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

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

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

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

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

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

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轴坐标,这样就可以实现滚动的小球

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

同样也可以设置绘制的圆心跟随滚动:将圆心y轴坐标设置为period,实现小球从上往下掉的效果

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

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

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

左下角的渐渐模糊的图片便是组合效果

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

全部代码:

  //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着色器/渲染器的用法解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持<计算机技术网(www.ctvol.com)!!>。

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/addevelopment/898494.html

(0)
上一篇 2021年10月22日
下一篇 2021年10月22日

精彩推荐