自定义view----六边形战斗力图表
来源:互联网 发布:富云软件培训靠谱吗 编辑:程序博客网 时间:2024/04/29 08:12
自己做的一个多边形图表,效果如下
请大家下载代码查看,博客里只复制部分代码。
代码下载:
自定义view – 六边形图表 - 下载频道 - CSDN.NET
http://download.csdn.net/detail/baidu_31093133/9893021
只要给每一个维度传入不同的数值就可以显示不同的等级了。
实现步骤:
1、绘制六边形
2、绘制中心线
3、绘制文字
4、绘制等级
1、绘制六边形
//绘制多边形 传入的参数是canvas和六边形的半径 private void drawPolygon(Canvas canvas, float radius) { Path path = new Path(); path.moveTo(center, center - radius); for (int i = 0; i < 6; i++) { endX = (float) (center + radius * Math.sin(hudu * i)); endY = (float) (center - radius * Math.cos(hudu * i)); path.lineTo(endX, endY); } path.close(); canvas.drawPath(path, polygonPaint); }
解释:
1、double hudu = Math.PI / 3;
2、center是画布的中心点,在onMeasure方法中获取。
3、使用path绘制六边形的关键是根据三角函数获得六个点的坐标。
六边形坐标计算:
得到六个点的坐标之后,就可以使用Path绘制出六边形了。如果我们要绘制实心六边形,需要将Paint的style设置为FILL。如果是空心则设置为STROKE
2、绘制中心线
//绘制多边形的中心线 private void drawCenterLine(Canvas canvas) { canvas.save(); canvas.rotate(0, center, center); //lineEndY = getPaddingTop() + str_rect.height() * 2; lineEndY = center - r1; for (int i = 0; i < 6; i++) { canvas.drawLine(center, center, center, lineEndY, centerLinePaint); canvas.rotate(degree, center, center); } canvas.restore(); }
解释:
1、degree = 60; lineEndY是线的终点Y坐标。
2、每次将画布旋转60度,再次绘制中心线,
中心线的起点坐标为center,center,也就是六边形的中心点
中心线的终点坐标为center,center-r1.
3、绘制文字
解释:文字和六边形之间有一个文字矩阵的距离,文字矩阵指的就是以文字的的宽、高形成的绘制矩行区域。
//绘制标题 private void drawTitle(Canvas canvas) { canvas.drawText(strs[0], center - str_rect.width() / 2, (float) (getPaddingTop() + str_rect.height()), strPaint); canvas.drawText(strs[1], (float) ((center + r1 * Math.sin(hudu)) + str_rect.width() / 2), (float) (center - r1 * Math.cos(hudu)), strPaint); canvas.drawText(strs[2], (float) ((center + r1 * Math.sin(hudu * 2)) + str_rect.width() / 2), (float) (center - r1 * Math.cos(hudu * 2)), strPaint); canvas.drawText(strs[3], center - str_rect.width() / 2, (float) center + getPaddingTop() + r1 + str_rect.height(), strPaint); canvas.drawText(strs[4], (float) ((center + r1 * Math.sin(hudu * 4)) - str_rect.width() * 1.5), (float) (center - r1 * Math.cos(hudu * 4)), strPaint); canvas.drawText(strs[5], (float) ((center + r1 * Math.sin(hudu * 5)) - str_rect.width() * 1.5), (float) (center - r1 * Math.cos(hudu * 5)), strPaint); }
这里的难点就是根据三角函数确定每一个文字标题的坐标。大家可以自己计算一下,就不再解释了,偷个懒(^__^) 。
4、绘制等级
//绘制等级 private void drawRank(Canvas canvas) { Path path = new Path(); //起始坐标 path.moveTo(center, center - r1 * ranks[0] / 100); for (int i = 0; i < 6; i++) { rankRadius = r1 * ranks[i] / 100; endX = (float) (center + rankRadius * Math.sin(hudu * i)); endY = (float) (center - rankRadius * Math.cos(hudu * i)); path.lineTo(endX, endY); } path.close(); canvas.drawPath(path, polygonPaint); }
将最大的六边形的半径r1分为100等份,根据传入的值,确定坐标。
比如传入的值是 击杀 50。
那么第一个点的坐标就是:
x = center ; y = center - r1 * 50 /100;
然后利用三角函数计算出每一个点的坐标。
最后利用path将这些点连接起来,使用path.close();闭合路径。
设置画笔模式为STROKE,绘制空心六边形。
最后的最后把用到的各种变量,例如颜色值,文字内容,文字大小,文字颜色,六边形颜色,等级六边形的颜色,中心线的颜色等等开放一个接口出来,就可以随意定制自己的六边形图表了。
特别注意:
不要在onDraw方法里声明变量,减少内存开销。
自定义view性能优化:
onDraw方法里 1、减少计算时间 2、减少绘制时间 3、不要每次绘制都产生一个对象,这样会增加内存消耗。
以上就是自定义view,六边形图表的实现方式。
- 自定义view----六边形战斗力图表
- 用view绘制六边形能力值自定义控件
- 自定义View时,用到Paint Canvas的一些温故,自定义Loading控件(“六边形”的旋转跳跃)
- Android自定义六边形控件
- Android 自定义六边形进度条
- 使用ValueAnimator自定义动态XY图表View
- Android自定义View — 圆环统计图表
- Android 自定义View 环绕六边形控件及其TouchEvent事件的监听
- 自定义View时,用到Paint Canvas的一些温故,自定义Loading控件(动画五,“六边形”的旋转跳跃)
- 自定义View——canvas画曲线图表
- 自定义view实现通用的柱形图表
- Android 自定义ImageView, 圆形六边形头像
- 自定义控件实现多边形绘制 图形菜单 绘制五边形,六边形等
- Android自定义绘制图表
- 自定义android图表SimpleChart
- Android自定义图表:ChartView
- AChartEngine使用View显示图表
- 自定义view
- 事物与主体:系统性:方面性:层次性;
- IntelliJ Idea 常用快捷键
- 网络编程之SOCKET编程学习笔记
- 栈的链性表的c语言实现方式 linkstack.h 和 linkstack.c
- 反射机制
- 自定义view----六边形战斗力图表
- 查看VMware虚拟机里的Centos7的IP
- 面向对象理解
- 绝对定位
- JavaScript基础(六)其他知识点,日期,Math,数组,对象
- SSM框架常用配置
- Saliency Detection with Caffe Framework
- 欢迎使用CSDN-markdown编辑器
- ORM之EF学习---增删改查