Android原生绘图(九):LinearGradient线性渐变

2,798

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

简介

linearGradient线性渐变,会用到Paint的setShader,Shader 被称为着色器,在opengl中这个概念经常被用到,android中的shader主要用来给图像着色,Shader在绘制过程中会返回横向重要的颜色组,Paint设置shader后,绘制时会从shader中获取颜色,也就是需要shader告诉画笔某处的颜色值。

Shader 具体实现类包括
BitmapShader,ComposeShader,LinearGradient,RadialGradient,SweepGradient

LinearGradient两种构造函数

/**
 * Create a shader that draws a linear gradient along a line.
 *
 * @param x0       The x-coordinate for the start of the gradient line
 * @param y0       The y-coordinate for the start of the gradient line
 * @param x1       The x-coordinate for the end of the gradient line
 * @param y1       The y-coordinate for the end of the gradient line
 * @param color0   The color at the start of the gradient line.
 * @param color1   The color at the end of the gradient line.
 * @param tile     The Shader tiling mode
*/
public LinearGradient(float x0, float y0, float x1, float y1,
    @ColorInt int color0, @ColorInt int color1, @NonNull TileMode tile) ;


/**
 * Create a shader that draws a linear gradient along a line.
 *
 * @param x0           The x-coordinate for the start of the gradient line
 * @param y0           The y-coordinate for the start of the gradient line
 * @param x1           The x-coordinate for the end of the gradient line
 * @param y1           The y-coordinate for the end of the gradient line
 * @param colors       The colors to be distributed along the gradient line
 * @param positions    May be null. The relative positions [0..1] of
 *                     each corresponding color in the colors array. If this is null,
 *                     the the colors are distributed evenly along the gradient line.
 * @param tile         The Shader tiling mode
*/
public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[], 
@Nullable float positions[], @NonNull TileMode tile) ;

参数说明:

(x0,y0):渐变起始点坐标

(x1,y1):渐变结束点坐标

color0:渐变开始点颜色,16进制的颜色表示,必须要带有透明度

color1:渐变结束颜色

colors:渐变数组

positions:位置数组,position的取值范围[0,1],作用是指定某个位置的颜色值,如果传null,渐变就线性变化。

tile:用于指定控件区域大于指定的渐变区域时,空白区域的颜色填充方法。

  • CLAMP边缘拉伸,为被shader覆盖区域,使用shader边界颜色进行填充
  • REPEAT 在水平和垂直两个方向上重复,相邻图像没有间隙
  • MIRROR以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙

第一个构造函数可以指定两个颜色之间的渐变,第二个构造函数可以指定多个颜色之间的渐变,线性渐变不但可以代码实现还可以xml文件实现,这里只讲解代码实现方式。

Path mPath1 = new Path();
mPath1.moveTo(150,250);
mPath1.lineTo(250,320);
mPath1.lineTo(300,300);
mPath1.lineTo(350,350);
mPath1.lineTo(420,270);
mPath1.lineTo(540,370);
mPath1.lineTo(560,300);
mPath1.lineTo(650,340);
mPath1.lineTo(750,270);
mPath1.lineTo(850,330);
mPath1.lineTo(950,240);
mPath1.lineTo(1050,290);
mPath1.lineTo(1150,350);
mPath1.lineTo(1250,230);
int[] colors = {Color.BLUE, Color.RED, Color.YELLOW};
float[] positions = {0.3f, 0.6f, 1.0f};
LinearGradient linearGradient = new LinearGradient(0,400, 0,230, colors, positions, Shader.TileMode.CLAMP);
mPaint.setShader(linearGradient);
canvas.drawPath(mPath1, mPaint);

TileMode 边缘填充模式

如果shader的大小小于view的大小时如何绘制其他没有被shader覆盖的区域?

跟最后一个参数有关,

-CLAMP

边缘拉伸,利用边缘的颜色,填充剩余部分

-REPEAT

在水平和垂直两个方向上重复,相邻图像没有间隙,重复shader

-MIRROR

以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙,镜面shader