扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如何制作出类似雷达扫描的效果,具体方法如下
创新互联专注于永宁网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供永宁营销型网站建设,永宁网站制作、永宁网页设计、永宁网站官网定制、重庆小程序开发公司服务,打造永宁网络公司原创品牌,更为您提供永宁网站排名全网营销落地服务。
一、效果图
二、实现思路
1、自定义控件RadarView用来画雷达的效果图,可以自定义属性包括
backgroundColor:背景颜色
circleNum:圆的数量
startColor:开始颜色
endColor:结束颜色
lineColor:线的颜色
2、通过Handler循环发送消息到MessageQueue中,将mRotate加3,使Matrix旋转mRotate,重绘雷达扫描的圆。
3、通过梯度渐变扫描渲染器SweepGradient,在绘制圆的过程中,将颜色从startColor变为endColor。
三、实例代码
public class RadarView extends View { private final String TAG = "RadarView"; private static final int MSG_WHAT = 1; private static final int DELAY_TIME = 20; //设置默认宽高,雷达一般都是圆形,所以我们下面取宽高会取Math.min(宽,高) private final int DEFAULT_WIDTH = 200; private final int DEFAULT_HEIGHT = 200; //雷达的半径 private int mRadarRadius; //雷达画笔 private Paint mRadarPaint; //雷达底色画笔 private Paint mRadarBg; //雷达圆圈的个数,默认4个 private int mCircleNum = 4; //雷达线条的颜色,默认为白色 private int mCircleColor = Color.WHITE; //雷达圆圈背景色 private int mRadarBgColor = Color.BLACK; //paintShader private Shader mRadarShader; //雷达扫描时候的起始和终止颜色 private int mStartColor = 0x0000ff00; private int mEndColor = 0xaa00ff00; private Matrix mMatrix; //旋转的角度 private int mRotate = 0; private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); mRotate += 3; postInvalidate(); mMatrix.reset(); mMatrix.preRotate(mRotate, 0, 0); //延时DELAY_TIME后再发送消息 mHandler.sendEmptyMessageDelayed(MSG_WHAT, DELAY_TIME); } }; public RadarView(Context context) { this(context, null); } public RadarView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RadarView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); //设置抗锯齿 mRadarBg = new Paint(Paint.ANTI_ALIAS_FLAG); //画笔颜色 mRadarBg.setColor(mRadarBgColor); //画实心圆 mRadarBg.setStyle(Paint.Style.FILL); //设置抗锯齿 mRadarPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //画笔颜色 mRadarPaint.setColor(mCircleColor); //设置空心的画笔,只画圆边 mRadarPaint.setStyle(Paint.Style.STROKE); //画笔宽度 mRadarPaint.setStrokeWidth(2); //使用梯度渐变渲染器, mRadarShader = new SweepGradient(0, 0, mStartColor, mEndColor); mMatrix = new Matrix(); } //初始化,拓展可设置参数供布局使用 private void init(Context context, AttributeSet attrs) { if (attrs != null) { TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RadarView); mStartColor = ta.getColor(R.styleable.RadarView_startColor, mStartColor); mEndColor = ta.getColor(R.styleable.RadarView_endColor, mEndColor); mRadarBgColor = ta.getColor(R.styleable.RadarView_backgroundColor, mRadarBgColor); mCircleColor = ta.getColor(R.styleable.RadarView_lineColor, mCircleColor); mCircleNum = ta.getInteger(R.styleable.RadarView_circleNum, mCircleNum); ta.recycle(); } } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //雷达的半径为宽的一半或高的一半的最小值 mRadarRadius = Math.min(w / 2, h / 2); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //获取宽度 int width = measureSize(1, DEFAULT_WIDTH, widthMeasureSpec); //获取高度 int height = measureSize(0, DEFAULT_HEIGHT, heightMeasureSpec); //取最大的 宽|高 int measureSize = Math.max(width, height); setMeasuredDimension(measureSize, measureSize); } /** * 测绘measure * * @param specType 1为宽, 其他为高 * @param contentSize 默认值 */ private int measureSize(int specType, int contentSize, int measureSpec) { int result; //获取测量的模式和Size int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { result = Math.max(contentSize, specSize); } else { result = contentSize; if (specType == 1) { // 根据传入方式计算宽 result += (getPaddingLeft() + getPaddingRight()); } else { // 根据传入方式计算高 result += (getPaddingTop() + getPaddingBottom()); } } return result; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Log.d(TAG, "onDraw " + mRotate); mRadarBg.setShader(null); //将画布移动到屏幕的中心点 canvas.translate(mRadarRadius, mRadarRadius); //绘制底色,让雷达的线看起来更清晰 canvas.drawCircle(0, 0, mRadarRadius, mRadarBg); //画圆圈 for (int i = 1; i <= mCircleNum; i++) { canvas.drawCircle(0, 0, (float) (i * 1.0 / mCircleNum * mRadarRadius), mRadarPaint); } //绘制雷达基线 x轴 canvas.drawLine(-mRadarRadius, 0, mRadarRadius, 0, mRadarPaint); //绘制雷达基线 y轴 canvas.drawLine(0, mRadarRadius, 0, -mRadarRadius, mRadarPaint); //设置颜色渐变从透明到不透明 mRadarBg.setShader(mRadarShader); //设置矩阵 canvas.concat(mMatrix); canvas.drawCircle(0, 0, mRadarRadius, mRadarBg); } public void startScan() { mHandler.removeMessages(MSG_WHAT); mHandler.sendEmptyMessage(MSG_WHAT); } public void stopScan() { mHandler.removeMessages(MSG_WHAT); } }
布局文件:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流