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)
4000
;
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();
}
}