废话不多说,先看效果。
如何现实
代码里面也注释得很清楚。扫描效果就是通过SweepGradient来实现的加上变换Matrix来现实的。
实现步骤:
1.先实现圆环
2.SweepGradient现实扫描渲染
3.用Matrix旋转变换让SweepGradient旋转扫描起来
1.先实现圆环。很简单,应该不用详说。下面就贴代码。
//圆圈大小的比例
private float[] circleProportion = {1 / 13f, 2 / 13f, 3 / 13f, 4 / 13f, 5 / 13f, 6 / 13f};
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//圆环
drawCircle(canvas);
}
private void drawCircle(Canvas canvas) {
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[0], mPaintCircle);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[1], mPaintCircle);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[2], mPaintCircle);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[3], mPaintCircle);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[4], mPaintCircle);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[5], mPaintCircle);
}
效果是:
2.SweepGradient现实扫描渲染
不知道SweepGradient可以看一下这篇文章(后面有时间我也写一篇,绝对不是我懒。好吧。我承认我懒)
http://blog.csdn.net/t12x3456/article/details/10473225
//初始化扫描渲染
mSweepGradient = new SweepGradient(mWidth / 2, mHeight / 2, new int[]{Color.TRANSPARENT,
Color.parseColor("#84B5CA")}, null);
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画一环环的圆圈
drawCircle(canvas);
//画扫描
drawScan(canvas);
}
private void drawScan(Canvas canvas) {
//给画笔设置渲染效果
mPaintScan.setShader(mSweepGradient);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[4], mPaintScan);
}
效果:
3.用Matrix旋转变换让SweepGradient旋转扫描起来
不懂Matrix可以看这篇博客:
http://www.gcssloop.com/customview/Matrix_Basic
Matrix matrix = new Matrix();
int speed = 5;
private Runnable run = new Runnable() {
@Override
public void run() {
matrix.preRotate(speed,mWidth/2,mHeight/2);
invalidate();
postDelayed(run,130);
}
};
private void drawScan(Canvas canvas) {
//给画笔设置渲染效果
mPaintScan.setShader(mSweepGradient);
canvas.concat(matrix);
canvas.drawCircle(mWidth / 2, mHeight / 2, maxRadius * circleProportion[4], mPaintScan);
}
具体代码见:
https://github.com/zsj1225/RadarView
参考:
http://blog.csdn.net/t12x3456/article/details/10473225
http://www.gcssloop.com/customview/Matrix_Basic
http://blog.csdn.net/mr_immortalz/article/details/51319354