自定义View入门实战案例详析 | 蜘蛛网数据分析组件

简介: 自定义View入门实战案例详析 | 蜘蛛网数据分析组件

初始化

public class SpiderView extends View {

    /*
     * radar   美 [ˈredɑr]  n.雷达
     */
    private Paint radarPaint;//网格画笔
    private Paint valuePaint;//结果点值画笔

    private float radius;//网格最大半径
    private int centerX;//中心X
    private int centerY;//中心Y

    public SpiderView(Context context,  AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {

        //网格画笔,描边
        radarPaint = new Paint();
        radarPaint.setStyle(Paint.Style.STROKE);
        radarPaint.setColor(Color.RED);

        //结果点值画笔,填充
        valuePaint = new Paint();
        valuePaint.setColor(Color.BLUE);
        valuePaint.setStyle(Paint.Style.FILL);
    }
}

获得布局中心

onSizeChanged()中,
根据View的长宽,
获取整个布局的中心坐标,
以及计算网状多边形的半径,
后续整个蜘蛛网都是从这个中心坐标开始绘制的:

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        //计算多边形半径
        radius = Math.min(w, h)/ 2 * 0.9f;
        //计算中心坐标
        centerX = w/2;
        centerY = h/2;

        postInvalidate();

        super.onSizeChanged(w, h, oldw, oldh);
    }
  • **当控件大小发生变化时,

都会通过onSizeChanged()通知当前控件的大小;
所以只要重写onSizeChanged(),
即可在其中计算得知控件的最新大小;**

开始绘制

绘制的架构
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        //绘制蜘蛛网状图
        drawPolygon(canvas);
        //绘制网格中线
        drawLines(canvas);
        //绘制数据
        drawRegion(canvas);
    }
绘制蜘蛛网络

效果如下:

  • 绘制思路:

利用PathmoveTo()lineTo(),一圈圈画出来;
需要计算每个转折点的位置;
(下面angle即为以上所述夹角a)

 float x = (float) (centerX + curR * Math.cos(angle * j));
 float y = (float) (centerY + curR * Math.sin(angle * j));
  • 因为我们共画了6个角,count = 6;

则每个角的度数为360 / 6 = 60 度,
不过这里注意不要写angle = 60;……
不然……悲剧如下:

  • 众所周知,

三角函数以π为基数进行运算,
下面这行代码才是正解!
angle = (float) (Math.PI * 2 / count);

实际使用时候具体调整;
根据以上原理,绘制蜘蛛网圈代码如下:

    private void drawPolygon(Canvas canvas) {

        Path path = new Path();

        float r = radius / count; //r 是网圈之间的间隔
        //逐个绘制网的单圈,从第1圈(一个r距离)开始画,直到count个,
        // 中心点(0个r距离)不用绘制
        for(int i = 1; i<= count; i++){

            float curR = r * i;//当前 半径 / 距离中心的偏移量
            path.reset();//每一圈的开始,都要重置

            //从 0度 开始,绘制到  (count-1)* angle 度
            //  < count  ,即 (count-1)
            for(int j = 0; j < count; j++) {
                if(j == 0){
                    //绘制 0度 的点 ,都是 0度 ,同一直线, 同在centerY
                    path.moveTo(centerX + curR , centerY);
                } else {
                    //根据半径,计算出蜘蛛网圈上的每一个点的坐标
                    float x = (float) (centerX + curR * Math.cos(angle * j));
                    float y = (float) (centerY + curR * Math.sin(angle * j));

                    path.lineTo(x, y);
                }
            }
            //画完一圈点之后
            path.close();
            canvas.drawPath(path, radarPaint);//落实绘制路径
        }

    }
绘制网格中线
  • 绘制原理与绘制蜘蛛网圈的原理差不多,

利用三角函数
以中心点为线段开始: path.moveTo(centerX, centerY);

  • 再找到各个末端点的坐标,

用for循环向数个末端点 逐个连线即可:lineTo(x, y);

  • 注意每次画完一条线段,

需要重置一下路径:path.reset();

    private void drawLines(Canvas canvas) {
        Path path = new Path();

        for(int i = 0; i < count; i++) {
            //注意每次画完一条线段,需要重置一下路径
            path.reset();

            path.moveTo(centerX, centerY);//以中心点为线段开始

            //找到各个末端点的坐标
            float x = (float) (centerX + radius * Math.cos(angle * i));
            float y = (float) (centerY + radius * Math.sin(angle * i));

            path.lineTo(x, y);
            canvas.drawPath(path, radarPaint);
        }
    }

效果如下:

绘制数据图

思路:

  • 确定每个数据点的位置;
  • 网状图的每一层网格都应该对应一个数值;
  • 这里简单将最大值设置为6,

即每一层数值是按1,2,3,4,5,6分布的:

    private void init() {

        //网格画笔,描边
        radarPaint = new Paint();
        radarPaint.setStyle(Paint.Style.STROKE);
        radarPaint.setColor(Color.RED);

        //结果点值画笔,填充
        valuePaint = new Paint();
        valuePaint.setColor(Color.BLUE);
        valuePaint.setStyle(Paint.Style.FILL);

        //初始化数据
        data = new double[]{1, 2, 3, 4, 5, 6};
        maxValue = 6;
    }

具体实现代码:

    private void drawRegion(Canvas canvas) {
        Path path = new Path();

        valuePaint.setAlpha(127);

        for (int i = 0; i < count; i++) {
            float percent = (float) data[i] / maxValue;

            tempR = radius * percent;//按比例归一化取值

            float x = (float) (centerX + tempR * Math.cos(angle * i));
            float y = (float) (centerY + tempR * Math.sin(angle * i));

            if (i == 0) {
                path.moveTo(x, centerY);
            }else{
                path.lineTo(x, y);
            }

            //绘制小圆点
            canvas.drawCircle(x, y, 10, valuePaint);
        }
        //绘制填充区域
        valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawPath(path, valuePaint);
    }

效果如下:

调节网图大小,增加末端标题文本

    private void drawTexts(Canvas canvas) {
        for (int i = 0; i < count; i++) {

            tempR = radius * 1.1f;//按比例归一化取值

            float x = (float) (centerX + tempR * Math.cos(angle * i));
            float y = (float) (centerY + tempR * Math.sin(angle * i));

            if (i == 0) {
                canvas.drawText(titles[i], x - 0.1f*tempR , centerY, textPaint);
            }else{
                canvas.drawText(titles[i], x , y, textPaint);
            }
        }
    }
  • 定义与初始化变量这部分就不赘述了,文末附上全文代码,敬请小伙伴们指教观看

效果图:

附上全文代码:

public class SpiderView extends View {

    /*
     * radar   美 [ˈredɑr]  n.雷达
     */
    private Paint radarPaint;//网格画笔
    private Paint valuePaint;//结果点值画笔
    private Paint textPaint;//末端标题画笔

    private float radius;//网格最大半径
    private float tempR;//用于计算和设置UI的临时变量
    private int centerX;//中心X
    private int centerY;//中心Y

    private int count;
    private float angle;

    private String[] titles;//某端点标题文本
    private double[] data;//各角数据
    private float maxValue;//最大值

    public SpiderView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {

        //网格画笔,描边
        radarPaint = new Paint();
        radarPaint.setStyle(Paint.Style.STROKE);
        radarPaint.setColor(Color.RED);
        radarPaint.setAntiAlias(true);

        //结果点值画笔,填充
        valuePaint = new Paint();
        valuePaint.setColor(Color.BLUE);
        valuePaint.setStyle(Paint.Style.FILL);
        valuePaint.setAntiAlias(true);

        textPaint = new Paint();
        textPaint.setColor(Color.BLACK);
        textPaint.setTextSize(30);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setAntiAlias(true);

        //初始化数据
        data = new double[]{0.5, 1.5, 0.3, 6, 15, 6};
        maxValue = 6;
        titles = new String[]{"王者农药", "吃鸡", "剁手", "读书", "书法", "民乐"};
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        //计算多边形半径
        radius = (float) Math.min(w, h) / 2 * 0.7f;
        //计算中心坐标
        centerX = w / 2;
        centerY = h / 2;

        //边数与角度
        count = 6;
//        angle = 60; //The bad operation!!!!!!——别干傻事
        angle = (float) (Math.PI * 2 / count);

        postInvalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //绘制蜘蛛网状图
        drawPolygon(canvas);

        //绘制网格中线
        drawLines(canvas);

        //绘制数据
        drawRegion(canvas);

        //绘制末端文本
        drawTexts(canvas);
    }

    private void drawTexts(Canvas canvas) {
        for (int i = 0; i < count; i++) {

            tempR = radius * 1.1f;//按比例归一化取值

            float x = (float) (centerX + tempR * Math.cos(angle * i));
            float y = (float) (centerY + tempR * Math.sin(angle * i));

            if (i == 0) {
                canvas.drawText(titles[i], x - 0.1f*tempR , centerY, textPaint);
            }else{
                canvas.drawText(titles[i], x , y, textPaint);
            }
        }
    }


    private void drawRegion(Canvas canvas) {
        Path path = new Path();

        valuePaint.setAlpha(127);

        for (int i = 0; i < count; i++) {
            float percent = (float) data[i] / maxValue;

            tempR = radius * percent;//按比例归一化取值

            float x = (float) (centerX + tempR * Math.cos(angle * i));
            float y = (float) (centerY + tempR * Math.sin(angle * i));

            if (i == 0) {
                path.moveTo(x, centerY);
            }else{
                path.lineTo(x, y);
            }

            //绘制小圆点
            canvas.drawCircle(x, y, 10, valuePaint);
        }
        //绘制填充区域
        valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawPath(path, valuePaint);
    }

    private void drawLines(Canvas canvas) {
        Path path = new Path();

        for (int i = 0; i < count; i++) {
            //注意每次画完一条线段,需要重置一下路径
            path.reset();

            path.moveTo(centerX, centerY);//以中心点为线段开始

            //找到各个末端点的坐标
            float x = (float) (centerX + radius * Math.cos(angle * i));
            float y = (float) (centerY + radius * Math.sin(angle * i));

            path.lineTo(x, y);
            canvas.drawPath(path, radarPaint);
        }
    }

    //!!!!!!
    //排查之后发现问题不在这里,重点是angle的取值!!!!!!!!!!
    //!!!!!!
    private void drawPolygon(Canvas canvas) {

        Path path = new Path();

        float r = radius / count; //r 是网圈之间的间隔
        //逐个绘制网的单圈,从第1圈(一个r距离)开始画,直到count个,
        // 中心点(0个r距离)不用绘制
        for (int i = 1; i <= count; i++) {

            float curR = r * i;//当前 半径 / 距离中心的偏移量
            path.reset();//每一圈的开始,都要重置

            //从 0度 开始,绘制到  (count-1)* angle 度
            //  < count  ,即 (count-1)
            for (int j = 0; j < count; j++) {
                if (j == 0) {
                    //绘制 0度 的点 ,都是 0度 ,同一直线, 同在centerY
                    path.moveTo(centerX + curR, centerY);
                } else {
                    //根据半径,计算出蜘蛛网圈上的每一个点的坐标
                    float x = (float) (centerX + curR * Math.cos(angle * j));
                    float y = (float) (centerY + curR * Math.sin(angle * j));

                    path.lineTo(x, y);
                }
            }
            //画完一圈点之后
            path.close();
            canvas.drawPath(path, radarPaint);//落实绘制路径
        }

    }

    //设置标题
    public void setTitles(String[] titles) {
        this.titles = titles;
    }

    //设置数值
    public void setData(double[] data) {
        this.data = data;
    }

    //设置最大数值
    public void setMaxValue(float maxValue) {
        this.maxValue = maxValue;
    }

    //设置蜘蛛网颜色
    public void setMainPaintColor(int color) {
        radarPaint.setColor(color);
    }

    //设置覆盖局域颜色
    public void setValuePaintColor(int color) {
        valuePaint.setColor(color);
    }

    //设置边数
    public void setCount(int count) {
        this.count = count;
    }

    public void setRadarPaint(Paint radarPaint) {
        this.radarPaint = radarPaint;
    }

    public void setValuePaint(Paint valuePaint) {
        this.valuePaint = valuePaint;
    }

    public void setTextPaint(Paint textPaint) {
        this.textPaint = textPaint;
    }

    public void setRadius(float radius) {
        this.radius = radius;
    }

    public void setCenterX(int centerX) {
        this.centerX = centerX;
    }

    public void setCenterY(int centerY) {
        this.centerY = centerY;
    }

    public void setAngle(float angle) {
        this.angle = angle;
    }
}

相关文章
|
1月前
|
消息中间件 数据挖掘 Kafka
Apache Kafka流处理实战:构建实时数据分析应用
【10月更文挑战第24天】在当今这个数据爆炸的时代,能够快速准确地处理实时数据变得尤为重要。无论是金融交易监控、网络行为分析还是物联网设备的数据收集,实时数据处理技术都是不可或缺的一部分。Apache Kafka作为一款高性能的消息队列系统,不仅支持传统的消息传递模式,还提供了强大的流处理能力,能够帮助开发者构建高效、可扩展的实时数据分析应用。
77 5
|
3月前
|
数据可视化 数据挖掘 Linux
震撼发布!Python数据分析师必学,Matplotlib与Seaborn数据可视化实战全攻略!
在数据科学领域,数据可视化是连接数据与洞察的桥梁,能让复杂的关系变得直观。本文通过实战案例,介绍Python数据分析师必备的Matplotlib与Seaborn两大可视化工具。首先,通过Matplotlib绘制基本折线图;接着,使用Seaborn绘制统计分布图;最后,结合两者在同一图表中展示数据分布与趋势,帮助你提升数据可视化技能,更好地讲述数据故事。
54 1
|
2月前
|
数据采集 数据可视化 数据挖掘
基于Python的数据分析与可视化实战
本文将引导读者通过Python进行数据分析和可视化,从基础的数据操作到高级的数据可视化技巧。我们将使用Pandas库处理数据,并利用Matplotlib和Seaborn库创建直观的图表。文章不仅提供代码示例,还将解释每个步骤的重要性和目的,帮助读者理解背后的逻辑。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供有价值的见解和技能。
140 0
|
4月前
|
数据采集 存储 数据挖掘
【优秀python数据分析案例】基于Python书旗网小说网站数据采集与分析的设计与实现
本文介绍了一个基于Python的书旗网小说网站数据采集与分析系统,通过自动化爬虫收集小说数据,利用Pandas进行数据处理,并通过Matplotlib和Seaborn等库进行数据可视化,旨在揭示用户喜好和市场趋势,为图书出版行业提供决策支持。
340 6
【优秀python数据分析案例】基于Python书旗网小说网站数据采集与分析的设计与实现
|
2月前
|
SQL 数据采集 数据可视化
深入 Python 数据分析:高级技术与实战应用
本文系统地介绍了Python在高级数据分析中的应用,涵盖数据读取、预处理、探索及可视化等关键环节,并详细展示了聚类分析、PCA、时间序列分析等高级技术。通过实际案例,帮助读者掌握解决复杂问题的方法,提升数据分析技能。使用pandas、matplotlib、seaborn及sklearn等库,提供了丰富的代码示例,便于实践操作。
166 64
|
20天前
|
并行计算 数据挖掘 大数据
Python数据分析实战:利用Pandas处理大数据集
Python数据分析实战:利用Pandas处理大数据集
|
3月前
|
数据挖掘 Python
Pandas实战(1):电商购物用户行为数据分析
Pandas实战(1):电商购物用户行为数据分析
103 1
|
3月前
|
数据挖掘 Python
Pandas实战(3):电商购物用户行为数据分析
Pandas实战(3):电商购物用户行为数据分析
116 1
|
3月前
|
数据挖掘 Python
Pandas实战(2):电商购物用户行为数据分析
Pandas实战(2):电商购物用户行为数据分析
66 1
|
2月前
|
数据采集 数据可视化 数据挖掘
Python 数据分析实战:使用 Pandas 进行数据清洗与可视化
【10月更文挑战第3天】Python 数据分析实战:使用 Pandas 进行数据清洗与可视化
107 0