安卓仿小黑盒绝地求生雷达图

首先看一下小黑盒的效果图

                               

接下来开始撸码，先贴上雷达图的属性

1.确立中心点的坐标

               

2.绘制多边形。我们通过Paint绘制path的方式来绘制多边形，有四个多边形并且大小逐次递减，那我们的radarCount就定义为4，通过循环来绘制出4个多边形，每个多边形的半径的都是递减的，所以我们可以把最大的半径分成四份，通过遍历的索引来除以4，得到每一个半径的百分比，这样我们就可以确定每一个多边形的半径了。

而每一个多边形的角的坐标位置我们可以通过每个角所在的弧度来计算。

（1）计算每个角的坐标

         

（2）绘制多边形(path.close()一定要调用，不然无法形成闭合回路)

效果图1：

                            

3.绘制每个角与中心点的连接线（其实只要连接最外层的）

                  

效果图2：

                                  

4.绘制覆盖区域

             

效果图3：

                                             

5.绘制文字

（1）绘制各个属性的值

private void drawTextValue(Canvas canvas) {
        radarPaint.setColor(Color.WHITE);

        radarPaint.setTextSize(radarValueSize);
        radarPaint.setStyle(Paint.Style.STROKE);

        int x;
        int y;
        float textValueWidth;

        for (int i = 0; i < data.length; i++) {
            x = getPoint(i).x;
            y = getPoint(i).y;

            //值的文字宽度
            textValueWidth = radarPaint.measureText(String.valueOf(data[i]));

            if (i == 1) {
                //计算索引为0位置的x轴坐标， x为多边形当前夹角的坐标，将其减去文字宽度，是为了保持居中显示
                //然后向又位移1/3个半径是让该文字不遮挡雷达图
                //同时同索引位的属性的文字也会向左位移1/3个半径，保证居中显示
                x = (int) (x - textValueWidth / 2 + radius / 3);
                y += radarValueSize;
            } else if (i == 2) {
                //让文字坐标向左位移文字宽度的一半，保持居中显示
                x -= textValueWidth / 2;
                y = (int) (y + radarTextMargin + radarValueSize + radarDescSize);

            } else if (i == 3) {
                x -= textValueWidth / 2;
                y = (int) (y + radarValueSize + radarTextMargin + radarDescSize);

            } else if (i == 4) {
                //计算索引为3位置的x轴坐标， x为多边形当前夹角的坐标，将其减去文字宽度，是为了保持居中显示
                //然后向又位移1/3个半径是让该文字不遮挡雷达图
                //同时同索引位的属性的文字也会向左位移1/3个半径，保证居中显示
                x = (int) (x - textValueWidth / 2 - radius / 3);
                y += radarValueSize;

            } else if (i == 0) {
                x -= textValueWidth / 2;
                y -= radarTextMargin;
            }

            canvas.drawText(String.valueOf(data[i]), x, y, radarPaint);
        }
    }

（2）绘制各个属性的名称

 private void drawTextDesc(Canvas canvas) {
        radarPaint.setColor(Color.WHITE);
        radarPaint.setTextSize(radarDescSize);
        radarPaint.setStyle(Paint.Style.STROKE);

        int x;
        int y;
        float textDescWidth;
        for (int i = 0; i < data.length; i++) {
            x = getPoint(i).x;
            y = getPoint(i).y;

            //属性的文字宽度
            textDescWidth = radarPaint.measureText(String.valueOf(dataDesc[i]));
            //值的文字宽度
            if (i == 1) {
                //计算索引为0位置的x轴坐标， x为多边形当前夹角的坐标，将其减去文字宽度，是为了保持居中显示
                //然后向又位移1/3个半径是让该文字不遮挡雷达图
                //同时同索引位的值的文字也会向右位移1/3个半径，保证居中显示
                x = (int) (x - textDescWidth / 2 + radius / 3);

            } else if (i == 2) {
                //让文字坐标向左位移文字宽度的一半，保持居中显示
                x -= textDescWidth / 2;
                y = (int) (y + radarTextMargin + radarDescSize);
            } else if (i == 3) {
                x -= textDescWidth / 2;
                y = (int) (y + radarTextMargin + radarDescSize);
            } else if (i == 4) {
                //计算索引为3位置的x轴坐标， x为多边形当前夹角的坐标，将其减去文字宽度，是为了保持居中显示
                //然后向又位移1/3个半径是让该文字不遮挡雷达图
                //同时同索引位的值的文字也会向右位移1/3个半径，保证居中显示
                x = (int) (x - textDescWidth / 2 - radius / 3);
            } else if (i == 0) {
                x -= textDescWidth / 2;
                y = (int) (y - radarTextMargin - radarValueSize);
            }

            canvas.drawText(String.valueOf(dataDesc[i]), x, y, radarPaint);
        }
    }

6.不要忘记在onDraw方法调用各个绘制方法

             

大功告成！最终效果图如下

                                                      

要看源码请点击github地址