自定义View练习 - 雷达信用图表

最新推荐文章于 2021-12-04 16:54:04 发布

maxwell0401

最新推荐文章于 2021-12-04 16:54:04 发布

阅读量718

点赞数

分类专栏：安卓View

本文链接：https://blog.csdn.net/maxwell0401/article/details/72855863

版权

本文介绍了一个自定义View的练习，通过绘制雷达图来展示芝麻信用分数。内容包括练习的来源、最终效果展示、绘制思路及详细实现过程，如计算点坐标、绘制多边形、连接线、填充区域、总分数和标题图标。同时，文章强调了获取文字宽高、计算坐标等关键知识点。

摘要由CSDN通过智能技术生成

自定义View练习 - 雷达信用图表

练习来源

Android自定义控件芝麻信用分雷达图

练习的github:https://github.com/alidili/SesameCreditScore

最终效果图

雷达信用图表

思路

绘制多边形
绘制连接线
绘制填充区域
绘制总分数
绘制标题和图标

实现过程

0. 定义变量


    //数据的数量
    private int dataCount;
    //弧度
    private float radian;
    //多边形的外接圆的半径
    private int radius;
    //中心点x
    private int centerX;
    //中心点y
    private int centerY;

    private List<CreditBean> creditBeans;
    //最大分值
    public int maxScore;

    private Paint linePaint;
    private Paint regionPaint;
    private Paint totalScorePaint;
    private Paint titlePaint;

1. 计算点坐标

计算坐标的示意图

    /**
     * 获得点坐标
     */
    public Point getPoint(int index) {
        return getPoint(index, 1);
    }

    /**
     * 获得点坐标,percent为百分比,用于获得填充区域和文字等的坐标位置.
     * 坐标的计算是重难点. 可以画图分析.
     */
    public Point getPoint(int index, float percent) {
        int x = 0;
        int y = 0;
        if (index == 0) {
            x = (int) (centerX + radius * Math.sin(radian) * percent);
            y = (int) (centerY - radius * Math.cos(radian) * percent);
        } else if (index == 1) {
            x = (int) (c