Android高级UI之颜色渲染——SweepGradient，Matrix实现雷达扫描效果

效果图

使用的技术点

SweepGradient 扫描/梯度渲染，Matrix矩阵
public SweepGradient(float cx, float cy, int[] colors, float[] positions)
Parameters:
cx 渲染中心点x 坐标
cy 渲染中心y 点坐标
colors 围绕中心渲染的颜色数组，至少要有两种颜色值
positions 相对位置的颜色数组,可为null, 若为null,可为null,颜色沿渐变线均匀分布

public SweepGradient(float cx, float cy, int color0, int color1)
Parameters:
cx 渲染中心点x 坐标
cy 渲染中心点y 坐标
color0 起始渲染颜色
color1 结束渲染颜色
Matrix 是一种通过数学的矩阵运算来实现图形变换的方式，能实现平移变换，旋转变换，缩放变换，错切变换，对称变换等效果

具体实现

1、定义渐变的几种颜色

 private int[] mColors = {Color.argb(80,0,55,255),Color.argb(200,0,55,255),Color.argb(200,255,0,0)};

2、初始化

private void init(){
        mSweepGradient = new SweepGradient(300, 300, mColors, null);
        mPaint = new Paint();
        matrix = new Matrix();
}

3、重新ondraw方法

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.reset();
        mPaint.setShader(mSweepGradient);
        canvas.drawCircle(300, 300, 300, mPaint);
        canvas.save();
        mPaint.reset();

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.YELLOW);
        canvas.drawCircle(300, 300,60,mPaint);
        canvas.drawCircle(300, 300,120,mPaint);
        canvas.drawCircle(300, 300,180,mPaint);
        canvas.drawCircle(300, 300,240,mPaint);
        canvas.drawCircle(300, 300,300,mPaint);
        canvas.save();
        mPaint.reset();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.YELLOW);
        canvas.drawLines(pts,mPaint);
        canvas.save();
    }

4、通过不断的修改矩阵的旋转角度，不断重绘实现雷达效果

public void rotate(float degree){
        matrix.setRotate(degree,300, 300);
        mSweepGradient.setLocalMatrix(matrix);
        postInvalidate();
}

本例通过handler来实现不断的修改旋转角度

 Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    degree+=3;
                    view.rotate(degree);
                    sendEmptyMessageDelayed(0,10);
                    if(degree>=360){
                        degree = 0;
                    }
                    break;
            }
        }
    };

本例代码

package com.example.flowproject;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;

public class RadarView extends View{
    private int[] mColors = {Color.argb(80,0,55,255),Color.argb(200,0,55,255),Color.argb(200,255,0,0)};
    Paint mPaint;
    SweepGradient mSweepGradient;
    float[] pts = {300,0,300,600,0,300,600,300};
    Matrix matrix;
    public RadarView(Context context) {
        super(context);
        init();
    }

    public RadarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init(){
        mSweepGradient = new SweepGradient(300, 300, mColors, null);
        mPaint = new Paint();
        matrix = new Matrix();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.reset();
        mPaint.setShader(mSweepGradient);
        canvas.drawCircle(300, 300, 300, mPaint);
        canvas.save();
        mPaint.reset();

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.YELLOW);
        canvas.drawCircle(300, 300,60,mPaint);
        canvas.drawCircle(300, 300,120,mPaint);
        canvas.drawCircle(300, 300,180,mPaint);
        canvas.drawCircle(300, 300,240,mPaint);
        canvas.drawCircle(300, 300,300,mPaint);
        canvas.save();
        mPaint.reset();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.YELLOW);
        canvas.drawLines(pts,mPaint);
        canvas.save();
    }

    public void rotate(float degree){
        matrix.setRotate(degree,300, 300);
        mSweepGradient.setLocalMatrix(matrix);
        postInvalidate();
    }
}