自定义 View - 一起来撸一个蜘蛛网

今天，一起来撸一个蜘蛛网吧！

上图就是掌上英雄联盟能力值的一个蜘蛛网式的展示，这种效果让人可以很直观的看到自己各个能力的分析，所以，有多个属性值需要同时展示的话，用这种方式来做，着实可以为自己的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);
            }
        }
    }

我将画布分为四块，然后每个分界线又有不同的出来。从0~90度，也就是右下角，文字起始位置就是x的位置，90~180度，也就是左下角，文字在左显示，也就是文字起始位置是x-textWidth，180~270，左上角，右上角的处理和上面两个的处理差不多一样。然后就是处于0,90,180,270,360这些角度的特殊处理。具体看代码吧，应该还是比较容易明白的。

至此，我们就完成了蜘蛛网属性值自定义view的实现。

写在最后

1、纸上得来终觉浅，得知此事要躬行。希望还是自己动手实现实现，理解了实现过程，就很容易自定义出自己想要的view了。
2、因为不知道绘制文字的大小以及长度，所以过长或者多大的文字，都有可以能使文字显示不全。代码部分有很多不优雅的地方，敬请谅解。
3、相互学习，相互进步。有意见或者建议，可以在评论区轻喷(￣┰￣*)。有错漏的地方，欢迎校正。(:зゝ∠) 4、都在这里了，不给我点个赞吗？(๑•ᴗ•๑)