View绘制系列(13)-Canvas渐变属性绘制
Canvas渐变属性绘制 五颜六色，七彩缤纷。有时候我们的UI设计稿也极尽色彩之能，比如下图这样： 这种渐变效果我们能画吗？不得不说，Android系统的基础构架还是很强大的，我们可以使用LinearGradient进行绘制，与其相关的还有SweepGradient，RadialGradient. LinearGradient,SweepGradient及RadialGradient均为Shader子类，所以与前文类似，我们只需要调用paint.setShader方法将对象设置进去，然后进行绘制即可。 LinearGradient 使用代码如下： int[]mColors={Color.RED,Color.YELLOW,Color.GREEN,Color.BLUE}; //从(0,0)到(400,400)绘制线性渐变，也就是对角线区域为渐变水平线 LinearGradientlinearGradient= newLinearGradient(0,0,400,400,mColors,null,Shader.TileMode.MIRROR); paint.setShader(linearGradient); canvas.drawRect(0,0,800,800,paint); paint.setTextSize(400); //使用渐变着色器绘制文本注意 canvas.drawText("注意：",200,1600,paint); 上述代码中我们使用的LinearGradient的构造原型是：LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],@Nullable float positions[], @NonNull TileMode tile)，其中： x0,y0,x1,y1:分别表示x轴及y轴起终点 colors:是一个颜色数组，表示渐变的颜色序列，我们这里依次是红黄绿蓝 positions:表示各个颜色在总长度上所占的比例，每个元素的取值范围在0到1之间，总体的和应该等于1，如果每个颜色的长度都相同，则可以取null tile:绘制模式，前文已介绍 当然我们也可以通过修改x0,y0,x1,y1的值使其变成水平或竖直方向的渐变效果，当x0=x1时，绘制出来的效果为垂直方向的颜色渐变,当y0=y1时，绘制出来效果是水平方向的颜色渐变。 LinearGradient还有一个构造原型： LinearGradient(floatx0,floaty0,floatx1,floaty1, @ColorIntintcolor0,@ColorIntintcolor1, @NonNullTileModetile) 和上一个的区别是，这个构造原型里指定的颜色比较单一，只用指定起始颜色color0和结束颜色color1即可。 SweepGradient SweepGradient-扫描渲染，也被称为梯度渲染，经常被用来实现雷达扫描效果。它的构造函数也有两个，第一个SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[])，这个构造函数中： cx,cy:绘制的中心点坐标 colors:用于绘制渐变效果的颜色数组，至少有两个元素，一个开始颜色，一个结束颜色 positions:同LinearGradient中的positions，用于指定各个颜色所占的长度比例，每个元素的取值范围在0到1之间,总体的和应该等于1，如果比例一样，则可以取null 第二个SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1)，这个构造函数中只需要指定中心坐标和开始结束颜色就好。 使用代码如下： float[]sweepPositions={0.1f,0.1f,0.8f}; SweepGradientsweepGradient=newSweepGradient(550,850,sweepColors,sweepPositions); paint.setShader(sweepGradient); canvas.drawRect(100,700,1000,1000,paint); 运行效果： RadialGradient RadialGradient-环形渲染，用它可以实现水波纹动画，同样有两个构造函数，第一个是RadialGradient(float centerX, float centerY, float radius,@NonNull @ColorInt int colors[], @Nullable float stops[],@NonNull TileMode tileMode)其中： centerX,centerY:圆环所在圆的圆心坐标 radius:绘制半径 colors:绘制的渐变颜色数组 stops:各颜色所占的百分比，相同则取null tileMode:绘制模式，前文已介绍 另一个构造函数是RadialGradient(float centerX, float centerY, float radius,@ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode)，直接声明圆心位置颜色和边界颜色，其他参数与第一个构造函数参数含义一致。 代码如下： int[]radialColors={Color.RED,Color.YELLOW,Color.GREEN}; RadialGradientradialGradient=newRadialGradient(700,1700,200,radialColors,null,TileMode.REPEAT); paint.setShader(radialGradient); canvas.drawCircle(700,1700,700,paint); 运行效果： 由于代码中设置的绘制模式是TileMode.REPEAT,所以红黄绿交替重复绘制。 本文分享自微信公众号 - 小海编码日记（gh_1f87b8c00ede）。 如有侵权，请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
