上周项目中要用到一个蛛网评分控件，于是就先上Github搜，搜了半天没搜着（也可能是我搜的关键词不对），那只好自己写一个了，就叫SpiderWebScoreView
先放一张最终效果图：
先整理一下需求：
- 要能支持任意个角以及任意层级
- 不管是多少个角都要能自动左右对称
- 蛛网图形外圈的文字要能自定义（甚至是图片）
然后整理一下一个蛛网评分控件的实现流程：
- 首先要根据角的个数以及层数画一个蜘蛛网
- 然后根据最大分值和所有分值画一个分数图形
- 最后在蜘蛛网的外圈把文案画出来
我们第一步来画蜘蛛网
先整理一下画蜘蛛网需要的知识点：
- 一层一层的多边形要用Path画
- 从中心出发到每个角的线用drawLine
- 根据角度计算圆上的坐标
接下来看一下怎么根据角度计算圆上的坐标，直接上代码
float centerX = 100f; // 已知圆心X坐标为100
float centerY = 100f; // 已知圆心Y坐标为100
float radius = 100f; // 已知半径为100
float angle = 45f; // 已知角度为45°double radians = Math.toRadians(angle); // 计算出弧度
float x = (float) (centerX + Math.sin(radians) * radius); // 计算出X坐标
float y = (float) (centerY - Math.cos(radians) * radius); // 计算出Y坐标
复制代码既然上述技术问题都解决了，就开始画吧
private int angleCount = 5; // 整个蛛网有几个角
private int hierarchyCount = 5; // 整个蛛网分多少层（例如最大分数是10分，分5层，那么每层就代表2分）
private int lineColor = 0xFF000000; // 蛛网线条的颜色
private float lineWidth = -1; // 蛛网线条的宽度private float centerX; // 中心点X坐标
private float centerY; // 中心点Y坐标
private float radius; // 整个蛛网图的半径
private Paint linePaint;
private Path path;....@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);reset();
}private void reset(){if(angleCount != 0 && hierarchyCount != 0){int viewWidth = getWidth();int viewHeight = getHeight();centerX = viewWidth / 2;centerY = viewHeight / 2;radius = Math.min(viewWidth, viewHeight) / 2;}
}@Override
protected void onDraw(Canvas canvas) {super.onDraw(canvas);drawAllHierarchy(canvas);drawAllLine(canvas);
}/*** 绘制所有的层* @param canvas Canvas*/
private void drawAllHierarchy(Canvas canvas) {float averageRadius = radius / hierarchyCount;for(int w = 0; w < hierarchyCount; w++){drawHierarchyByRadius(canvas, averageRadius *(w+1));}
}/*** 根据半径绘制一层* @param canvas Canvas* @param currentRadius 当前半径*/
private void drawHierarchyByRadius(Canvas canvas, float currentRadius) {path.reset();float nextAngle;float nextRadians;float nextPointX;float nextPointY;float averageAngle = 360 / angleCount;float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;for (int position = 0; position < angleCount; position++) {nextAngle = offsetAngle + (position * averageAngle);nextRadians = (float) Math.toRadians(nextAngle);nextPointX = (float) (centerX + Math.sin(nextRadians) * currentRadius);nextPointY = (float) (centerY - Math.cos(nextRadians) * currentRadius);if(position == 0){path.moveTo(nextPointX, nextPointY);}else{path.lineTo(nextPointX, nextPointY);}}path.close();canvas.drawPath(path, linePaint);
}/*** 绘制所有的线* @param canvas Canvas*/
private void drawAllLine(Canvas canvas){float nextAngle;float nextRadians;float nextPointX;float nextPointY;float averageAngle = 360 / angleCount;float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;for(int position = 0; position < angleCount; position++){nextAngle = offsetAngle + (position * averageAngle);nextRadians = (float) Math.toRadians(nextAngle);nextPointX = (float) (centerX + Math.sin(nextRadians) * radius);nextPointY = (float) (centerY - Math.cos(nextRadians) * radius);canvas.drawLine(centerX, centerY, nextPointX, nextPointY, linePaint);}
}
复制代码详解：
- onSizeChanged的时候会根据view的宽高计算圆心坐标和半径
- 先根据层数计算每层的半径
- 接下来再根据角个数计算出每个角的度数
- 有了角度和半径后就可以根据上面的算法算出每个点的坐标了
- 坐标都算出来了就直接用Path连线，然后绘制即可
这里面需要额外注意的就是offsetAngle的计算，offsetAngle用来偏移整个图形，让整个图形左右对称，算法就是对于角个数是奇数的不用偏移，是偶数的偏移平均角度除以2即可
第二步来画分数图形
和画蜘蛛网所用到的知识点一样，只不过半径要根据分值和最大分值来算，如下：
private float maxScore = 10f; // 最大分数
private float[] scores; // 分数列表
private int scoreColor = 0x80F65801; // 分数图形的颜色
private int scoreStrokeColor = 0xFFF65801; // 分数图形描边的颜色
private float scoreStrokeWidth = -1; // 分数图形描边的宽度
private boolean disableScoreStroke; // 禁用分数图形的描边
private Paint scorePaint;
private Paint scoreStrokePaint;.../*** 绘制分数图形* @param canvas Canvas*/
private void drawScore(Canvas canvas){if(scores == null || scores.length <= 0){return;}path.reset();float nextAngle;float nextRadians;float nextPointX;float nextPointY;float currentRadius;float averageAngle = 360 / angleCount;float offsetAngle = averageAngle > 0 && angleCount % 2 == 0 ? averageAngle / 2 : 0;for (int position = 0; position < angleCount; position++) {currentRadius = (scores[position] / maxScore) * radius;nextAngle = offsetAngle + (position * averageAngle);nextRadians = (float) Math.toRadians(nextAngle);nextPointX = (float) (centerX + Math.sin(nextRadians) * currentRadius);nextPointY = (float) (centerY - Math.cos(nextRadians) * currentRadius);if(position == 0){path.moveTo(nextPointX, nextPointY);}else{path.lineTo(nextPointX, nextPointY);}}path.close();canvas.drawPath(path, scorePaint);// 绘制描边if(!disableScoreStroke){if(scoreStrokePaint == null){scoreStrokePaint = new Paint();scoreStrokePaint.setColor(scoreStrokeColor);scoreStrokePaint.setStyle(Paint.Style.STROKE);scoreStrokePaint.setAntiAlias(true);if(scoreStrokeWidth > 0){scoreStrokePaint.setStrokeWidth(scoreStrokeWidth);}}canvas.drawPath(path, scoreStrokePaint);}
}
复制代码第三步画外面那圈文字
到了这里有些犹难办了，考虑到外面这圈文字变数比较大，不同的APP会有不同的需求，比如有的需求是一行纯文本，有的是两行纯文本但两行的样式不一样，更甚者可能是是文字加图片。
要是直接往Canvas上写文字是绝对满足不了这样的需求的，既然我要做一个开源的控件那就必须要解决这样的问题，要不然别人是用不了的
想到这里脑海里立马就有解决方案了，那就是自定义一个圆形的Layout，就叫CircularLayout，把CircularLayout放在SpiderWebScoreView上面，用的时候直接往CircularLayout里面添加View即可，这样想要什么样式就加什么样的View即可
具体的自定义CircularLayout的细节就不再赘述了，用到的知识点跟SpiderWebScoreView一样
最后放上蛛网评分控件的Github地址 github.com/xiaopansky/… ，欢迎大家访问使用