用数学思维实现雷达分析图

前言

前段时间回看里约奥运会的国球比赛，岛国媒体给我龙队一个响亮的称号—— 六边形战士 ！

马龙是我的偶像，看到这样的称号当然很骄傲。

分析图片可以知道：六个定点分别标识个技术点名称，对应 半径 所填充长度表示分值，龙队在各方面的分数都是满分，所以在雷达分析图上覆盖区全部填充。

作为程序员的我，不免要从技术实现的角度思考问题，接下来我们一起造轮子：

先上效果图：

设计思路

回顾两个知识点：

• 在一平面中，确定一坐标原点（0，0），水平向右为x轴正方向，竖直向上为y轴正方向，从右上方开始顺时针依次为第一象限、第二象限、第三象限和第四象限。
• 平面中的任一点的坐标应该是：其与原点所在直线的倾斜角的余弦为x，正弦值为y。

从效果图来看，我们应该把view区域按照数学中的平面坐标来区分，雷达图中心点（外接圆圆心）为坐标原点，水平向右的半径为x轴正方向，竖直向上的半径为y轴正方向，从右上方开始顺时针依次为第一象限、第二象限、第三象限和第四象限。

大致的思路是这样的，我们需要自定义属性，自定义view：重写构造、onDraw方法，这些都是必须的。我们可以在onSizeChanged方法中进行计算和确认各组成内容的位置与大小。在计算好大小和位置后，在onDraw中进行绘制。

关键的是：我们的目标是将各数据绘制在各半径上，最后链接起来构成完整区域，那就需要将各半径上所有点计算出，找到对应数据对应的点的坐标，然后绘制。

---

1、自定义View

A、定义属性：

    <!--雷达表-->
    <declare-styleable name="RadarChart">
        <!-- 蜘蛛网线条宽度 -->
        <attr name="radarLineWidth" format="dimension"/>
        <!-- 蜘蛛网颜色 -->
        <attr name="radarLineColor" format="color"/>
        <!-- 半径分成N段-->
        <attr name="radarLineSegments" format="integer"/>
        <!-- 文字颜色 -->
        <attr name="radarTextColor" format="color"/>
        <!-- 文字字体大小-->
        <attr name="radarTextSize" format="integer"/>
        <!-- 数据展示覆盖区域颜色 -->
        <attr name="radarCoverColor" format="color"/>
    </declare-styleable>

主要就是一些线条颜色、字体颜色、大小等属性。

B、继承View，声明各属性

/**
 * Description: 雷达表
 * Created by jia on 2017/10/18.
 * 人之所以能，是相信能
 */
public class JsRadarChart extends View {
   

    private static final String TAG = "JsRadarChart";

    /**
     * 雷达边数 默认6
     */
    private int mPieceNumber = 6;

    /**
     * 外接圆半径
     */
    private int mRadius = 50;

    /**
     * 线条宽度 默认10
     */
    private int mLineWidth = 8;

    /**
     * 线条颜色 默认灰色
     */
    private int mLineColor = 0xffd0d6dc;

    /**
     * 半径分为4段
     */
    private int mLineSegments = 4;

    /**
     * 字体颜色和字体大小
     */
    private int mTextColor = 0xff647d91;
    private int mTextSize = 10;