今天，一起来撸一个蜘蛛网吧！
能力值展示
上图就是掌上英雄联盟能力值的一个蜘蛛网式的展示，这种效果让人可以很直观的看到自己各个能力的分析，所以，有多个属性值需要同时展示的话，用这种方式来做，着实可以为自己的APP增色不少。
先看一下我自己撸的一个蜘蛛网自定义View。
撸主撸的蜘蛛网
嗯，就是这个样子的蜘蛛网，当然，撸成什么样不是重点，重点是怎么能撸出来。
先做一下分析。从效果图看。主要就是多边形的一个绘制，覆盖区域的绘制以及文字的绘制。既然知道了效果图的构成，那现在就先将它肢解，一步一步绘制出来。
这里，我将绘制的过程分为以下四步：
1、绘制多边形
2、绘制对角直线
3、绘制覆盖区域
4、绘制文字
在开始之前，大家需要了解几个知识点：
1、canvas的坐标系默认是在左上角的，横坐标向右为正，纵坐标向下为正。在本例中，在绘制之前，会将坐标系移至绘图区域中心点，即坐标原点在绘图中心点。canvas.translate(centerX,centerY);
2、path的基本使用，path.close()可以将改path所绘制的第一个点和最后一个点连接起来，形成一个封闭的区域。
3、绘制的过程中，我们会需要到Math中的正弦和余弦函数，他们接收的参数是弧度而不是角度。
4、弧度2π=360。
第一步：绘制多边形
//绘制多边形
private void drawPolygon(Canvas canvas) {
mPath.reset();
//绘制多层多边形
for (int j = 1; j <= mSideCount; j++) {
//绘制某层多边形
for (int i = 0; i < mSideCount; i++) {
if (i == 0)
mPath.moveTo(mSpacing * j, 0);
else
//参考示意图食用
mPath.lineTo((float) (mSpacing * j * Math.cos(mRadian * i)),
(float) (mSpacing * j * Math.sin(mRadian * i)));
}
mPath.close();
canvas.drawPath(mPath, mSpiderPaint);
}
}
请收下我的丑图！
角度示意图
代码结合示意图看。根据要求，我们需要找出各个定点的坐标，然后用path连接，这样就能形成一个多边形。那么如何计算点的坐标，我们这里用到了三角函数。由示意图结合三角函数可以得出：x = r * cos(a); y = r * sin(a)。但是查看Math.sin()和Math.cos()的API，接收的参数是所对应角的弧度。那我们就转换一下。根据上面的知识点，我们可以得到示例图中a所对应的弧度是2π / 6。
在回来看代码，因为path的起点默认是坐标系原点，而我们前面已经将坐标系移至绘图中心点。所以当i = 0时，我们将path的起点移至第一个顶点，而后再用三角函数绘制出其他的顶点，最后调用path.close将path连接起来。然后每次改变一下起点，一层一层绘制，这样就可以绘制出多个多边形了。
多层多边形
第二步：绘制对角直线
现在还没有蜘蛛网的样子，待我们加上对角线，就有网的样子了。
//绘制连结线
private void drawConnLine(Canvas canvas) {
for (int i = 0; i < mSideCount; i++) {
//直接旋转画布绘制直线
canvas.drawLine(0, 0, mRadius, 0, mSpiderPaint);
canvas.rotate(mAngle);
}
}
这里绘制对角直线比较简单，根据每个角的度数旋转画布，然后绘制直线就可以了。
网状图
第三步：绘制覆盖区域
//绘制覆盖区域
private void drawCoverArea(Canvas canvas) {
if (mValues == null || mValues.size() != mSideCount)
return;
mPath.reset();
//单位刻度
float unitScale = mRadius / mMaxValue;
for (int i = 0; i < mSideCount; i++) {
if (i == 0) {
mPath.moveTo(mValues.get(i) * unitScale, 0);
//绘制当前刻度值的实心小圆点
canvas.drawCircle(mValues.get(i) * unitScale, 0, 5, mCoverPaint);
} else {
mPath.lineTo((float) (mValues.get(i) * unitScale * Math.cos(mRadian * i)),
(float) (mValues.get(i) * unitScale * Math.sin(mRadian * i)));
canvas.drawCircle((float) (mValues.get(i) * unitScale * Math.cos(mRadian * i)),
(float) (mValues.get(i) * unitScale * Math.sin(mRadian * i)), 5, mCoverPaint);
}
}
mPath.close();
mCoverPaint.setAlpha(120);
canvas.drawPath(mPath, mCoverPaint);
}
绘制覆盖区域的想法和绘制多边形一样，根据各个属性的属性值绘制path，最后调用path.close()函数封闭path。这里我们用的画笔是实心的，也就是Paint.Style.FILL_AND_STROKE，然后，为了美观，我们设置透明度为120，绘制出的效果如下图：
绘制覆盖区域
最后一步：绘制文字
港真，这一部分绘制调试来调试去，有点失去耐性了，最后，索性就酱了！字的大小有限制，字摆放的位置有限制，各种限制，然后调试起来还是挺麻烦的。
这里的代码。。。实在是。。。看的有点醉，各位将就着看吧，大家看看怎样可以更优雅的实现这部分功能。
//绘制顶部文本
private void drawTextDesc(Canvas canvas) {
if (mAttributes == null || mAttributes.size() != mSideCount)
return;
mSpiderPaint.setColor(mAttributeTextColor);
float x;
float y;
float textWidth;
float degree;
float fontHeight;
//计算Text的高度
Paint.FontMetrics fontMetrics = mSpiderPaint.getFontMetrics();
fontHeight = fontMetrics.descent - fontMetrics.ascent;
for (int i = 0; i < mSideCount; i++) {
x = (float) ((mRadius + fontHeight * 0.6) * Math.cos(mRadian * i));
y = (float) ((mRadius + fontHeight * 0.6) * Math.sin(mRadian * i));
//计算Text的宽度
textWidth = mSpiderPaint.measureText(mAttributes.get(i));
degree = mAngle * i;
if ((int) degree == 90) {
canvas.drawText(mAttributes.get(i), x - textWidth / 2, y, mSpiderPaint);
} else if ((int) degree == 270) {
canvas.drawText(mAttributes.get(i), x - textWidth / 2, y, mSpiderPaint);
} else if (degree >= 0 && degree < 90) {
canvas.drawText(mAttributes.get(i), x, y, mSpiderPaint);
} else if (degree <= 180) {
canvas.drawText(mAttributes.get(i), x - textWidth, y, mSpiderPaint);
} else if (degree < 270) {
canvas.drawText(mAttributes.get(i), x - textWidth, y, mSpiderPaint);
} else if (degree <= 360) {
canvas.drawText(mAttributes.get(i), x, y, mSpiderPaint);
}
}
}
我将画布分为四块，然后每个分界线又有不同的出来。从090度，也就是右下角，文字起始位置就是x的位置，90180度，也就是左下角，文字在左显示，也就是文字起始位置是x-textWidth，180~270，左上角，右上角的处理和上面两个的处理差不多一样。然后就是处于0,90,180,270,360这些角度的特殊处理。具体看代码吧，应该还是比较容易明白的。
成品
至此，我们就完成了蜘蛛网属性值自定义view的实现。
写在最后
1、纸上得来终觉浅，得知此事要躬行。希望还是自己动手实现实现，理解了实现过程，就很容易自定义出自己想要的view了。
2、因为不知道绘制文字的大小以及长度，所以过长或者多大的文字，都有可以能使文字显示不全。代码部分有很多不优雅的地方，敬请谅解。
3、相互学习，相互进步。有意见或者建议，可以在评论区轻喷(￣┰￣*)。有错漏的地方，欢迎校正。(:зゝ∠)
4、都在这里了，不给我点个赞吗？(๑•ᴗ•๑)
网友评论