Shader之LinearGradient

LinearGradient这个着色器主要作用是画渐变，它有两个构造方法

LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)

x0,y0 表示渐变的起点坐标

x1,y1便是渐变的终点坐标

color0起点颜色

color1终点颜色

Shader.TileMode tile 是渐变填充视图的方式

先看看例子，用宽度200，高度200的红色到黄色的渐变色块去填充布满整个屏幕的视图。代码如下

public class LinearGradientView extends View {

    private Paint mPaint;
    private Rect rect;
    private LinearGradient linearGradient;
    private int screenWidth,screenHeight;

    public LinearGradientView(Context context) {
        this(context,null);
    }

    public LinearGradientView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);

        screenWidth=ScreenUitl.getScreenWidth(context);
        screenHeight=ScreenUitl.getScreenHeight(context);

        linearGradient=new LinearGradient(0,0,200,200,Color.RED,
                Color.YELLOW,Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);

        rect=new Rect(0,0,screenWidth,screenHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);

        canvas.drawRect(rect,mPaint);
    }
}

CLAMP模式  绘制一个200*200的渐变块后，以最后一个像素的黄色做拉伸

MIRROR模式  绘制一个200*200的渐变色块后，翻滚绘制

REPEAT模式  绘制一个200*200的渐变色块后， 重复绘制

 

如果把绘制的矩形水平垂直移动300，

起点位置竟然不是红色了。其实把，它的原理和BitmapShader一样。实际绘图是从视图的原点开始，上图的视图原点是在（0，0），也就是说是从（0.0）坐标开始绘制的。但是具体显示区域有多大是由在onDraw绘制的rect的位置和大小决定的。所以上图是显示了rect(300,300,screenWidth,screenHeight)这个范围的内容。

 

LinearGradient还有一个构造方法，可以设置多个渐变颜色值

LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)

x0,y0 表示渐变的起点坐标

x1,y1便是渐变的终点坐标

colors 渐变的颜色值，这里可以设置大于两个颜色值

positions 每个颜色值占渐变色值块的百分比位置如colors为new int[] { Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE }，positions为new float[] { 0, 0.1F, 0.5F, 0.7F, 0.8F }则颜色渐变占比为RED 到 YELLOW 从0%到10% YELLOW到GREEN 10%到50% GREEN到CYAN 50%到70%  CYAN到BLUE 80%到100%

如下例子

public class LinearGradientView extends View {

    private Paint mPaint;
    private Rect rect;
    private LinearGradient linearGradient;
    private int screenWidth,screenHeight;

    public LinearGradientView(Context context) {
        this(context,null);
    }

    public LinearGradientView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);

        screenWidth=ScreenUitl.getScreenWidth(context);
        screenHeight=ScreenUitl.getScreenHeight(context);

        linearGradient=new LinearGradient(0,0,200,200,
                new int[]{Color.RED, Color.YELLOW, Color.GREEN, Color.CYAN, Color.BLUE },
                new float[]{0, 0.1F, 0.5F, 0.7F, 0.8F},Shader.TileMode.CLAMP);
        mPaint.setShader(linearGradient);

        rect=new Rect(0,0,screenWidth,screenHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);

        canvas.drawRect(rect,mPaint);
    }

CLAMP模式

MIRROR模式

REPEAT模式