前言
前段时间回看里约奥运会的国球比赛,岛国媒体给我龙队一个响亮的称号—— 六边形战士 !
马龙是我的偶像,看到这样的称号当然很骄傲。
分析图片可以知道:六个定点分别标识个技术点名称,对应 半径 所填充长度表示分值,龙队在各方面的分数都是满分,所以在雷达分析图上覆盖区全部填充。
作为程序员的我,不免要从技术实现的角度思考问题,接下来我们一起造轮子:
先上效果图:
设计思路
回顾两个知识点:
- 在一平面中,确定一坐标原点(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;