自定义View实战之仿雷达蜘蛛网实现

2023-10-08 12:38

本文主要是介绍自定义View实战之仿雷达蜘蛛网实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果图预览
图片截屏后缩放不清晰

1. 分析

1. 绘制多边形
2. 连接多边形各顶点
3. 绘制多边形各个顶点的文字
4. 绘制每一块的刻度
5. 造一些假数据用于绘制数据区域

2. 技术实现原理

1. PathMeasure可以获取任意正多边形各个坐标的余弦值、正弦值
2. 连线闭合采用Path类实现
3. 绘制文字采用canvas自带的canvas.drawText方法 不过需要计算角度
4. 绘制刻度需要计算各个点的坐标 可以用PointF记录点的坐标
5. 文本内容的水平垂直居中处理

3. 初始化一些东西

SIDE_NUM代表边的数目即几边形,PathMeasure mMeasure的
mMeasure.setPath(mPath,true)方法为PathMeasure设置路径,

boolean getPosTan (float distance, float[] pos, float[] tan)

  1. distance为距离当前path起点的距离,取值范围为0到path的长度。
  2. pos 如果不为null,则返回path当前距离的位置坐标,pos[0] = x,pos[1] = y 。
  3. tan 如果不为null,则返回当前位置坐标的切线,tan[0] = x, tan[1] = y 。
  4. 返回值为boolean,true表示成功,数据会存入pas、tan,反之则为失败,数据也不会存入pas、tan。

mCosArray,mCosArray用来存放各个顶点的余弦和正弦值

//定义多边形顶点文字

private String[] mStrings = {“A”,”B”,”C”,”D”,”E”,”F”,”G”,”H”};

//定义多边形数据区域x坐标的数据

private float[] mValues = {10.0f,47.0f,11.0f,38.0f,9.0f,52.0f,14.0f,37.0f};


@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mCenterX = w / 2;mCenterY = h / 2;mPointF = new PointF();mLength = DensityUtil.dip2px(getContext(),120);mPath.addCircle(0,0,mLength, Path.Direction.CW);mMeasure.setPath(mPath,true);mPos = new float[2];mTan = new float[2];mCosArray = new float[SIDE_NUM];mSinArray = new float[SIDE_NUM];for (int i=0; i < SIDE_NUM; i++){mMeasure.getPosTan((float) (Math.PI * 2 * mLength * i / SIDE_NUM), mPos, mTan);mCosArray[i] = mTan[0];mSinArray[i] = mTan[1];}mPath.reset();
}

4. 绘制多边形和多边形连线

a. 绘制多边形

mPath.lineTo连接各个顶点 顶点坐标值=mLength*正弦和余弦值
POLYGON_NUM表示画多少个多边形 多边形从大往小画的
所以canvas.scale(1 - i / POLYGON_NUM,1 - i / POLYGON_NUM);这个代表缩放比例,每次画完一个多边形都需要闭合和重置mPath.close()和mPath.reset();
canvas.save()和canvas.restore()是保证这一次绘制过程对别的绘制不会有影响,因为这里操作了scale比例缩放


//绘制多边形
private void drawPolygon(Canvas canvas) {mPaint.setColor(Color.GRAY);for (int i = 0; i < POLYGON_NUM; i++){canvas.save();canvas.scale(1 - i / POLYGON_NUM,1 - i / POLYGON_NUM);mPath.moveTo(0,mLength);for (int j = 0; j < SIDE_NUM; j++){mPath.lineTo(mLength* mCosArray[j],mLength* mSinArray[j]);}mPath.close();canvas.drawPath(mPath,mPaint);mPath.reset();canvas.restore();}
}

b. 多边形连线

mPaint.setColor(Color.BLUE);加颜色区分
mPath.moveTo(0,0);每次都移动坐标点到原点
原点开始连接各个顶点
mPath.lineTo(mLength * mCosArray[j],mLength * mSinArray[j]);


//绘制多边形的连线private void drawPolygonLine(Canvas canvas) {mPaint.setColor(Color.BLUE);//连线for (int j=0; j< SIDE_NUM; j++){mPath.moveTo(0,0);mPath.lineTo(mLength * mCosArray[j],mLength * mSinArray[j]);drawPolygonText(canvas,j);}mPath.close();canvas.drawPath(mPath,mPaint);mPath.reset();}

5. 绘制多边形各顶点文字

canvas.rotate(180);旋转180的原因是我是从底部90度开始的,为了保证A-F顺时针旋转,所以旋转180度,根据cos值判断文字的方向 不一定说要以0.2判断 我不过取了一个相对值


//绘制多边形各顶点文字
private void drawPolygonText(Canvas canvas,int index) {canvas.save();canvas.rotate(180);mPointF.x = -mLength * mCosArray[index] * 1.1f;mPointF.y = -mLength * mSinArray[index] * 1.1f;//根据cos值,判断文字位置,设置居左、居中、居右if (mCosArray[index] > 0.2){textCenter(new String[]{mStrings[index]},mTextPaint,canvas,mPointF, Paint.Align.RIGHT);}else if (mCosArray[index] < -0.2){textCenter(new String[]{mStrings[index]},mTextPaint,canvas,mPointF, Paint.Align.LEFT);}else {textCenter(new String[]{mStrings[index]},mTextPaint,canvas,mPointF, Paint.Align.CENTER);}canvas.restore();
}/*** 多行文本居中、居右、居左* @param strings 文本字符串列表* @param point 点的坐标*/
protected void textCenter(String[] strings, Paint paint, Canvas canvas, PointF point, Paint.Align align){paint.setTextAlign(align);Paint.FontMetrics fontMetrics= paint.getFontMetrics();float top = fontMetrics.top;float bottom = fontMetrics.bottom;float ascent = fontMetrics.ascent;float descent = fontMetrics.descent;int length = strings.length;float total = (length - 1) * (-top + bottom) + (-ascent + descent);float offset = total / 2 - bottom;for (int i = 0; i < length; i++) {float yAxis = -(length - i - 1) * (-top + bottom) + offset;canvas.drawText(strings[i], point.x, point.y + yAxis, paint);}
}

6. 绘制刻度

mPointF.x: 计算每一个多边形顶点处的X坐标
mPointF.y:计算每一个多边形顶点处的Y坐标

//绘制刻度
private void drawPolygonScale(Canvas canvas) {canvas.save();canvas.rotate(180);DecimalFormat sdf = new DecimalFormat ("0");//外循环控制边数 每一个顶点处都绘制刻度for (int i = 0; i < SIDE_NUM; i++) {//内循环控制多边形数量 for (int j = 1; j < POLYGON_NUM; j++){mPointF.x =  mLength * (1 - j / POLYGON_NUM) * mCosArray[i];mPointF.y =  mLength * (1 - j / POLYGON_NUM) * mSinArray[i];String text = sdf.format(10 * (POLYGON_NUM - j));mScaleTextPaint.getTextBounds(text,0,text.length(),mScaleTextRect);canvas.drawText(text, mPointF.x - mScaleTextRect.width() / 2, mPointF.y + mScaleTextRect.height() / 2, mScaleTextPaint);}}//绘制中心点数字String centerValue = "0";mScaleTextPaint.getTextBounds(centerValue,0,centerValue.length(),mScaleTextRect);canvas.drawText(centerValue,0 - mScaleTextRect.width() / 2,0 + mScaleTextRect.height() / 2,mScaleTextPaint);canvas.restore();
}

7. 绘制数据区域

mValues定义一个x轴的数据点集合,然后根据一定比例计算相应的y轴的数据点集合,然后通过path连接各个坐标点


//绘制数据区域 连接各个数据点
private void drawPolygonData(Canvas canvas) {for (int i = 0; i < SIDE_NUM; i++){float value = mValues[i];float yValue = value * 6.18f;Log.e("drawGraph value",value+" ;yValue: "+yValue);if ( i == 0 ){mPath.moveTo(yValue * mCosArray[i], yValue * mSinArray[i]);}else {mPath.lineTo(yValue * mCosArray[i], yValue*mSinArray[i]);}}mPath.close();canvas.drawPath(mPath, mDataFillPaint);canvas.drawPath(mPath,mStrokePaint);mPath.reset();
}

8. 小结和源码下载

小结:
最核心的是通过PathMeasure类的getPosTan方法获得此任意正多边形各角坐标的余弦值、正弦值,
然后通过正弦余弦值获得各个点的x,y坐标值,还有就是Path类的使用以及canvas的旋转,缩放等操作,
别忘记canvas.save和canvas.restore不然会影响其他的绘制源码下载:最后统一提供下载地址

9.联系方式

QQ:1509815887

这篇关于自定义View实战之仿雷达蜘蛛网实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/165327

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy:PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注,收藏不迷路💖 Kubernetes的PodSecurityPolicy(PSP)是一个关键的安全特性,它在Pod创建之前实施安全策略,确保P