Android 绘图学习

SweepGradient扫描渐变

SweepGradient可以实现扫描渐变渲染，类似雷达扫描图，渐变圆弧，渐变进度条等，构造函数有两个：

/**
 * A Shader that draws a sweep gradient around a center point.
 *
 * @param cx       The x-coordinate of the center
 * @param cy       The y-coordinate of the center
 * @param colors   The colors to be distributed between around the center.
 *                 There must be at least 2 colors in the array.
 * @param positions May be NULL. The relative position of
 *                 each corresponding color in the colors array, beginning
 *                 with 0 and ending with 1.0. If the values are not
 *                 monotonic, the drawing may produce unexpected results.
 *                 If positions is NULL, then the colors are automatically
 *                 spaced evenly.
 */
public SweepGradient(float cx, float cy,
        @NonNull @ColorInt int colors[], @Nullable float positions[])；
/**
 * A Shader that draws a sweep gradient around a center point.
 *
 * @param cx       The x-coordinate of the center
 * @param cy       The y-coordinate of the center
 * @param color0   The color to use at the start of the sweep
 * @param color1   The color to use at the end of the sweep
 */
public SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1) ；

参数说明：
cx,cy 渐变中心坐标。
color0,color1：渐变开始结束颜色。
colors，positions：类似LinearGradient,用于多颜色渐变,positions为null时，根据颜色线性渐变。

两种颜色渐变

构造函数：
SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1)

sweepGradient = new SweepGradient(450,450,Color.RED, Color.GREEN);
mPaint.setShader(sweepGradient);
canvas.drawCircle(450,450,450,mPaint);

多颜色扫描渐变

构造函数：
SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[])

int [] colors = {Color.BLACK,Color.RED, Color.BLUE,Color.GREEN};
sweepGradient = new SweepGradient(450,450,colors,null);
mPaint.setShader(sweepGradient);
canvas.drawCircle(450,450,450,mPaint);

设置position：

position数组设置主要作用是特定位置对应颜色数组，位置取值【0-1】，0表示开始位置，1表示结束位置，数组和颜色数组一一对应。

int [] colors = {Color.BLACK,Color.RED, Color.BLUE,Color.GREEN};
float[] postions = {0f,0.1f,0.7f,1.0f};
sweepGradient = new SweepGradient(450,450,colors,postions);
mPaint.setShader(sweepGradient);
canvas.drawCircle(450,450,450,mPaint);

可以明显看到BLUE蓝色变多。

旋转扫描实例：

此处只是示例代码，如果要真实现可以利用属性动画或者handler更新，

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    startAngle = startAngle +1;

    if (startAngle == 360){
        startAngle = 0;
    }
    
    int [] colors = {Color.parseColor("#2300FF00"),Color.parseColor("#7F00FF00")};
    float[] position = new float[2];
    position[0] = (startAngle * 1f)/360f;
    position[1] = ((startAngle + 60)* 1.0f)/360f;
    sweepGradient = new SweepGradient(450,450,colors,position);
    mPaint.setShader(sweepGradient);
    canvas.drawCircle(450,450,450,mPaint2);
    canvas.drawCircle(450,450,350,mPaint2);
    canvas.drawCircle(450,450,200,mPaint2);
    canvas.drawCircle(450,450,100,mPaint2);
    float[] lines = {0, 450, 450, 450, 450,450,900, 450, 450, 0, 450, 450,450,450, 450, 900};
    canvas.drawLines(lines,mPaint2);

    canvas.drawArc(0,0,900,900,startAngle,endAngle,true,mPaint);

    invalidate();
}

绘制渐变圆弧

此处只是示例代码，如果要真实现可以利用属性动画或者handler更新，

endAngle = endAngle +1;

if (endAngle >= 360){
    endAngle = 0;
}

int [] colors = {Color.parseColor("#FFFFFF00"),Color.parseColor("#FFFF0000")};
float[] position = new float[2];
position[0] = 0f;
position[1] = ((endAngle)* 1.0f)/360f;
sweepGradient = new SweepGradient(470,470,colors,position);
mPaint.setShader(sweepGradient);
canvas.drawCircle(470,470,450,mPaint2);

canvas.drawArc(20,20,920,920,startAngle,endAngle,false,mPaint);

invalidate();

可以看到，由于设置了positions数组，绘制多少圆弧，颜色是从圆弧开始绘制的地方渐变到圆弧结束弧度。
positions数组的设置也有讲究，需要开始绘制的颜色对应positions数组值为0f，结束位置为((endAngle)* 1.0f)/360f;

如果不设置positions数组参数，结果如下：

 endAngle = endAngle +1;

        if (endAngle >= 360){
            endAngle = 0;
        }

        int [] colors = {Color.parseColor("#FFFFFF00"),Color.parseColor("#FFFF0000")};
        float[] position = new float[2];
        position[0] = 0f;
        position[1] = ((endAngle)* 1.0f)/360f;
        sweepGradient = new SweepGradient(470,470,colors,null);
        mPaint.setShader(sweepGradient);
        canvas.drawCircle(470,470,450,mPaint2);

        canvas.drawArc(20,20,920,920,startAngle,endAngle,false,mPaint);

        invalidate();

可以看到圆弧的渐变颜色一直是从开始到整个圆结束，所以和不设置positions数组有较大区别。