原始图效果
模仿效果
PNG
GIF
流程
1.绘制中心线，用于计算外层多边形各点的坐标
2.绘制最外层多边形
3.分析原型图算出每个多边形之间的间距
4.绘制里三层多边形
5.绘制字体
6.根据进度值绘制等级进度
难点
关键在于坐标的计算，与旋转角度的掌控。
一 测量
初始化
privatePaintcenter_paint;//中心线画笔
private intcenter;//中心点
private floatone_radius;//外层菱形圆半径
private intdefalutSize=300;//默认大小
//初始化中心线画笔
center_paint=newPaint();
center_paint.setAntiAlias(true);
center_paint.setColor(Color.WHITE);
测量
@Override
protected voidonMeasure(intwidthMeasureSpec, intheightMeasureSpec) {
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
intwMode = MeasureSpec.getMode(widthMeasureSpec);
intwSize = MeasureSpec.getSize(widthMeasureSpec);
inthMode = MeasureSpec.getMode(heightMeasureSpec);
inthSize = MeasureSpec.getSize(heightMeasureSpec);
intwidth,height;
if(wMode == MeasureSpec.EXACTLY) {
width = wSize;
}else{
width = Math.min(wSize,defalutSize);
}
if(hMode == MeasureSpec.EXACTLY) {
height = hSize;
}else{
height = Math.min(hSize,defalutSize);
}
center= width /2;//中心点
one_radius=center- getPaddingTop() -2*str_rect.height();
setMeasuredDimension(width,height);
}
这里在计算最外层多边形外切圆半径的时候留出了2个字体高度距离，给多边形外字体的绘制留出空间。
二 绘制中心线
/**
* 绘制中心线
*
*@paramcanvas
*/
private voidcenter(Canvas canvas) {
//绘制七边形中心线
canvas.save();//保存当前状态
canvas.rotate(0,center,center);
floatstartY = getPaddingTop() +2*str_rect.height();
floatendY =center;
floatdu = (float) (360/7+0.5);
for(inti =0;i <7;i++) {
canvas.drawLine(center,startY,center,endY,center_paint);
canvas.rotate(du,center,center);
}
canvas.restore();//恢复之前状态
}
先计算出圆心到A点的坐标，
在计算出旋转的角度（360/7），
然后旋转7次Canvas，绘制7条中心线。
为了加深显示效果，先绘制一个绿色背景作参考。
三 绘制最外层正七边形
各坐标点的计算主要用到了三角函数。
A点
x 对应这圆心center。
y paddingTop+2个字体高度的距离
B点
x A点的x坐标+EB
利用三角函数公式，BE=sin(AB的夹角)*OB
这里有个坑，Math.sin(x)里的x是弧度，而不是角度。
如果要计算角度则需要加上Math.sin(Math.toRadians(x))
center+ Math.sin(Math.toRadians(360/7)) *one_radius
y A点的y坐标+AE
同理AE=OA-OE,OE=cos(AB的夹角)*OB
OE=cos(AB的夹角)*OB
Math.abs(Math.cos(Math.toRadians(360/7)) *one_radius
由于余弦有正负值，这里要取绝对值
AE=OA-OE
(getPaddingTop() +2*str_rect.height() +one_radius
- Math.abs(Math.cos(Math.toRadians(360/7)) *one_radius))
C点
x :圆心X+FC
Math.sin(Math.toRadians(360/7+360/7/2)) *one_radius
y: 圆心Y+OF
(Math.cos(Math.toRadians(360/7+360/7/2)) *one_radius) +center
D点
x :圆心x+HD
center+ Math.sin(Math.toRadians(360/7/2)) *one_radius
y：圆心y+OH
Math.cos(Math.toRadians(360/7/2)) *one_radius) +center
右边点绘制完后，左边点就出来了，只需要把加号改成减号。
截屏显示效果有多点差- -
�四 绘制内三层正七边形
privatePainttwo_paint;//第二层多边形画笔
privatePaintthree_paint;//第三层多边形画笔
privatePaintfour_paint;//第四层多边形画笔
绘制完最外层七边形后，剩下来的就好办了，只需要计算出每个七边形的间距即可。
由原型图分析，每一个正七边形占半径的四分之一
private floatdistance;//多边形之间的间距
distance=one_radius/4;
去掉绿色背景后，显示的效果
五 绘制字体
根据最外层多边形各点坐标以及字体的长度高度 微调。
privateRectstr_rect;//字体矩形
String[]str= {"击杀","生存","助攻","物理","魔法","防御","金钱"};
效果
6绘制各能力值进度
floatf1,f2,f3,f4,f5,f6,f7;
privatePaintmPaint;//各等级进度画笔
根据f1~f7的值，来控制各点的y轴坐标即可。
感兴趣的同学可直接到github下载源码。
https://github.com/jiangzehui/polygonsview