使用梯度渲染/渐变渲染(SweepGradient)可以实现雷达扫描效果,它的初始角度是0,使用矩阵变换的旋转操作可以重置SweepGradient的角度
mSweepGradient.setLocalMatrix(matrix);
matrix.setRotate(degree, mWidth / 2, mWidth / 2);
最后再使用
postInvalidate();
无限重绘。
代码如下:
public class RadarView extends View {
private Paint mPaint;
private SweepGradient mSweepGradient;
private Matrix matrix;
//画笔粗细
private int strokeWidth = 5;
/**
* 旋转的角度
**/
private int degree = 0;
public RadarView(Context context) {
this(context, null);
}
public RadarView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
matrix = new Matrix();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//将背景设置成白色
canvas.drawColor(Color.WHITE);
int mWidth = canvas.getWidth();
if(mSweepGradient == null){
mSweepGradient = new SweepGradient(mWidth / 2, mWidth / 2, new int[]{Color.TRANSPARENT, Color.CYAN}, null);
}
//画圆1
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
mPaint.setColor(Color.parseColor("#e04095af"));
canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth-strokeWidth) / 2, mPaint);
//画圆2
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
mPaint.setColor(Color.parseColor("#e04095af"));
canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth-strokeWidth) / 8 * 3, mPaint);
//画圆3
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
mPaint.setColor(Color.parseColor("#e04095af"));
canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth-strokeWidth) / 4, mPaint);
//画圆4
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
mPaint.setColor(Color.parseColor("#e04095af"));
canvas.drawCircle(mWidth / 2, mWidth / 2, (mWidth-strokeWidth) / 8, mPaint);
//画点
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(strokeWidth);
canvas.drawPoint(mWidth / 2, mWidth / 2, mPaint);
//通过梯度渲染画扫描框
mPaint.setStyle(Paint.Style.FILL);
mPaint.setShader(mSweepGradient);
canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2, mPaint);
//下面开始为重绘之前做准备
//(1)重绘之前,将mPaint还原成初始状态
mPaint.reset();
//(2)使用Matrix旋转
mSweepGradient.setLocalMatrix(matrix);
matrix.setRotate(degree, mWidth / 2, mWidth / 2);
degree++;
if (degree > 360) {
degree = 0;
}
postInvalidate();
}
}
效果如下:
[本章完...]