自定义View绘制雷达图

最新推荐文章于 2021-07-09 09:55:10 发布
最新推荐文章于 2021-07-09 09:55:10 发布
阅读量576 收藏
点赞数
分类专栏： Android 文章标签： app 雷达图 自定义 view
就直接上代码啦，注释都写的很详细了的 
package com.mvp.viewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

/**
 * <h3>Description</h3>
 * <p>
 * 雷达图
 * <p>
 * <h3>Author</h3> cgc
 * <h3>Date</h3> 2016/11/17 13:53
 * <h3>Copyright</h3> Copyright (c)2016 Shenzhen JJshome Technology Co., Ltd. Inc. All rights reserved.
 */
public class RadarView extends View {

    public RadarView(Context context) {
        this(context, null);
    }

    public RadarView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }

    /** 绘制连线画笔 */
    private Paint mLienPaint;
    /** 绘制数据点画笔 */
    private Paint mDataPaint;
    /** 绘制文本画笔 */
    private Paint mTextPaint;
    /** 中心点 x */
    private int centreX;
    /** 中心点y */
    private int centreY;
    /** 半径 */
    private float radius = 0;
    /** 数据点半径 */
    private float dataRadius = 10;
    /** 数据区透明值 最大255 不透明 */
    private int dataAlpha = 127;
    /** 字体大小 */
    private int textSize = 38;
    /** 连线颜色 */
    private int lienColor = Color.GRAY;
    /** 数据点颜色 */
    private int dataColor = Color.GREEN;
    /** 数据区颜色 */
    private int dataAreaColor = Color.YELLOW;
    /** 数据点之间的连线颜色 */
    private int dataPointLienColor = Color.RED;
    /** 文本颜色 */
    private int textColor = Color.BLACK;
    /** 雷达图占界面的比例 默认0.8 */
    private float occupyRatio = 0.8f;
    /** 根据数据设置纬度 */
    private boolean isValuesToCount = false;

    /** 纬度数 */
    private int count = 8;
    /** 计算角度 */
    private float angle = (float) (Math.PI * 2 / count);
    /** 最大值 */
    private int maxValue = 100;
    /** 数值 */
    private double[] values = null;


    private void init() {
        //初始化绘制连接的画笔
        mLienPaint = new Paint();
        mLienPaint.setAntiAlias(true);
        mLienPaint.setStyle(Paint.Style.STROKE);
        mLienPaint.setColor(lienColor);
        //初始化绘制数据的画笔
        mDataPaint = new Paint();
        mDataPaint.setAntiAlias(true);
        mDataPaint.setStyle(Paint.Style.STROKE);
        mDataPaint.setColor(dataColor);
        //初始化绘制文字的画笔
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStyle(Paint.Style.STROKE);
        mTextPaint.setColor(textColor);
        mTextPaint.setTextSize(textSize);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        radius = Math.min(w, h) / 2 * occupyRatio;
        centreX = w / 2;
        centreY = h / 2;
//        postInvalidate();
    }

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

        drawLien(canvas);
        drawToLien(canvas);
        drawText(canvas);
        if (values != null && values.length > 0) {
            drawValue(canvas);
        }
    }

    /**
     * 绘制数据区
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,16:40
     * <h3>UpdateTime</h3> 2016/11/17,16:40
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param canvas
     */
    private void drawValue(Canvas canvas) {
        Path path = new Path();
        for (int i = 0; i < count; i++) {
            //计算数据值所占的比例
            double percent = values[i] / maxValue;
            //计算坐标
            float x = (float) (centreX + radius * Math.cos(angle * i) * percent);
            float y = (float) (centreY + radius * Math.sin(angle * i) * percent);
            if (i == 0) {//设置起点
                path.moveTo(x, centreY);
            } else {
                //记录数据点
                if (values[i] != 0) {
                    path.lineTo(x, y);
                }
            }
            //绘制数据点
            if (values[i] != 0) {
                mDataPaint.setStyle(Paint.Style.FILL);
                mDataPaint.setColor(dataColor);
                canvas.drawCircle(x, y, dataRadius, mDataPaint);
            }
        }
        //闭合路径，连接数据点
        path.close();
        mDataPaint.setColor(dataPointLienColor);
        mDataPaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path, mDataPaint);
        //绘制数据点之间区域的面积
        mDataPaint.setColor(dataAreaColor);
        mDataPaint.setAlpha(dataAlpha);
        mDataPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawPath(path, mDataPaint);
    }

    /**
     * 数据点的半径
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,16:56
     * <h3>UpdateTime</h3> 2016/11/17,16:56
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param dataRadius
     */
    public void setDataRadius(float dataRadius) {
        this.dataRadius = dataRadius;
    }

    /**
     * 数据区域的透明值
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,16:56
     * <h3>UpdateTime</h3> 2016/11/17,16:56
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param dataAlpha 1-255 1为全透明，255未透明
     */
    public void setDataAlpha(int dataAlpha) {
        this.dataAlpha = dataAlpha;
    }

    /**
     * 设置字体大小
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:32
     * <h3>UpdateTime</h3> 2016/11/17,17:32
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param textSize
     */
    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }

    /**
     * 设置雷达图连接颜色
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:33
     * <h3>UpdateTime</h3> 2016/11/17,17:33
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param lienColor
     */
    public void setLienColor(int lienColor) {
        mLienPaint.setColor(lienColor);
    }

    /**
     * 设置数据点颜色
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:33
     * <h3>UpdateTime</h3> 2016/11/17,17:33
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param dataColor
     */
    public void setDataColor(int dataColor) {
        this.dataColor = dataColor;
    }

    /**
     * 设置数据区颜色
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:34
     * <h3>UpdateTime</h3> 2016/11/17,17:34
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param dataAreaColor
     */
    public void setDataAreaColor(int dataAreaColor) {
        this.dataAreaColor = dataAreaColor;
    }

    /**
     * 设置数据点颜色
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:34
     * <h3>UpdateTime</h3> 2016/11/17,17:34
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param dataPointLienColor
     */
    public void setDataPointLienColor(int dataPointLienColor) {
        this.dataPointLienColor = dataPointLienColor;
    }

    /**
     * 设置字体颜色
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:34
     * <h3>UpdateTime</h3> 2016/11/17,17:34
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param textColor
     */
    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    /**
     * 雷达图占界面的比例 默认0.8
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:34
     * <h3>UpdateTime</h3> 2016/11/17,17:34
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param occupyRatio
     */
    public void setOccupyRatio(float occupyRatio) {
        this.occupyRatio = occupyRatio;
    }

    /**
     * 设置纬度值
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:35
     * <h3>UpdateTime</h3> 2016/11/17,17:35
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param count
     */
    public void setCount(int count) {
        if (!isValuesToCount) {
            this.count = count;
        }
    }

    /**
     * 设置最大值
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:35
     * <h3>UpdateTime</h3> 2016/11/17,17:35
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param maxValue
     */
    public void setMaxValue(int maxValue) {
        this.maxValue = maxValue;
    }

    /**
     * 数值
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:35
     * <h3>UpdateTime</h3> 2016/11/17,17:35
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param values
     */
    public void setValues(double[] values) {
        this.values = values;
        this.count = values.length;
    }

    /**
     * 是否根据数值设置纬度
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:39
     * <h3>UpdateTime</h3> 2016/11/17,17:39
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param values          数据值
     * @param isValuesToCount 是否根据数据值数量设置纬度数 true是(如果是true setCount 设置纬度将失效) false 不是
     */
    public void setValues(double[] values, boolean isValuesToCount) {
        this.values = values;
        if (isValuesToCount) {
            this.count = values.length;
        }
        this.isValuesToCount = isValuesToCount;
    }

    /**
     * 绘制雷达图
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,17:36
     * <h3>UpdateTime</h3> 2016/11/17,17:36
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     */
    public void startInvalidate() {
        angle = (float) (Math.PI * 2 / count);
        invalidate();
    }

    /**
     * 绘制文本
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,16:42
     * <h3>UpdateTime</h3> 2016/11/17,16:42
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        //获取画笔的适量
        Paint.FontMetrics fm = mTextPaint.getFontMetrics();
        //计算文本的高度
        float fontHeight = fm.descent - fm.ascent;
        for (int i = 0; i < count; i++) {
            //计算坐标
            float x = (float) (centreX + (radius + fontHeight / 2) * Math.cos(angle * i));
            float y = (float) (centreY + (radius + fontHeight / 2) * Math.sin(angle * i));
            if (i == 0) {//绘制第一项
                canvas.drawText(i + "", x, y + (fontHeight / 2) / 2, mTextPaint);
            } else if (i == 3) {//绘制第三项
                canvas.drawText(i + "", x - 20, y + (fontHeight / 2) / 2, mTextPaint);
            } else if (i == 2 || i == 1) {//绘制第二，一项
                canvas.drawText(i + "", x, y + (fontHeight / 2), mTextPaint);
            } else {
                canvas.drawText(i + "", x, y, mTextPaint);
            }
        }
    }

    /**
     * 绘制雷达图的层次
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,16:44
     * <h3>UpdateTime</h3> 2016/11/17,16:44
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param canvas
     */
    private void drawLien(Canvas canvas) {
        //层次之间的距离
        float r = radius / (count - 1);
        //绘制路径
        Path path = new Path();
        for (int i = 1; i < count; i++) {
            //层次的半径
            float newRadius = r * i;
            path.reset();
            for (int j = 0; j < count; j++) {
                if (j == 0) {//绘制起点
                    path.moveTo(centreX + newRadius, centreY);
                } else {
                    //计算角度的坐标
                    float x = (float) (centreX + newRadius * Math.cos(angle * j));
                    float y = (float) (centreY + newRadius * Math.sin(angle * j));
                    //进行连线
                    path.lineTo(x, y);
                }
            }
            //闭合路径
            path.close();
            canvas.drawPath(path, mLienPaint);
        }
    }

    /**
     * 绘制中心点到纬度点的连接
     * <p>
     * <h3>Version</h3> 1.0
     * <h3>CreateTime</h3> 2016/11/17,16:44
     * <h3>UpdateTime</h3> 2016/11/17,16:44
     * <h3>CreateAuthor</h3> cgc
     * <h3>UpdateAuthor</h3> cgc
     * <h3>UpdateInfo</h3> (此处输入修改内容,若无修改可不写.)
     *
     * @param canvas
     */
    private void drawToLien(Canvas canvas) {
        Path path = new Path();
        for (int i = 0; i < count; i++) {
            path.reset();
            path.moveTo(centreX, centreY);
            float x = (float) (centreX + radius * Math.cos(angle * i));
            float y = (float) (centreY + radius * Math.sin(angle * i));
            path.lineTo(x, y);
            path.close();
            canvas.drawPath(path, mLienPaint);
        }
    }
}

java 雷达图_Android雷达图(蜘蛛网图)，自定义view之雷达图，正五边雷达图，分数图...
weixin_33993891的博客
02-16 602
最近业务要做分数雷达图，到网上找了很大，原理都差不多，但是要适用自己的业务，还需要微调。下面是我微调后的效果图雷达图蜘蛛网.png原理很简单1，确定雷达图中心点的坐标2，用正三角sin，反三角函数cos计算五个类别的坐标点3，绘制蜘蛛网4，绘制直线5，绘制覆盖区域(包含红点)下面结合代码给大家讲解下-1, 下面是需要用到的一些属性public class RadarView extends Vie...
Qt OPengl 雷达余晖效果
09-06
这个只是一点简单的OPengl测试代码，不是正式开发的代码，主要就是使用OPengl绘制雷达，和是雷达扫描余晖效果 有需要的可以参考一下，或许将实现更多功能
自定义绘制五边形雷达图（类似芝麻信用分数）
03-29
自定义view实现五边形雷达图，包括各个点文字图片和雷达五边形
一步步实现自定义View之雷达图
ckwccc的博客
06-27 1153
之前在项目中需要用到雷达图，我就在github上挑了一个用于项目中实现了需求。但是作为一只有追求的程序猿，我还是想自己实现一下，忙里偷闲地实现了一个雷达图。下面看一下效果图吧： 接着详细地介绍一下我的实现思路吧 1.绘制背景图 首先这里需要注意的一点是，我需要将这个背景绘制在整个View的中间（从Gif图中可以看出），我需要先将整个画布平移 translateX = ( 整个View的...
自定义绘制雷达图报表（简单实用）
12-28
自定义雷达图报表纯JS代码，之前网络上找了很久用FusionCharts功能是实现了，但是用flash发现导出PDF文件不支持，后面改用这个方法比较简单，下载后直接用浏览器打开就可以看到效果。
LabVIEW超声波雷达界面模拟显示（雷达图界面）
最新发布
12-14
LabVIEW做的雷达图界面，运行时模拟雷达显示界面，可显示前方障碍物的实时距离，本程序内置随机数发生器模拟实时距离，实际运用时可替换至采集的距离数值。
仪表盘、雷达图多种表现形式控件
08-21
仪表盘、雷达图多种表现形式控件，多种表现形式，应用于asp.net2.0
Android 使用Kotlin来实现自定义View之雷达图
07-28
在`onDraw()`方法内，我们首先计算每个轴的起始和结束角度，然后使用`canvas.drawArc()`方法绘制雷达图的边框。接着，我们可以用`canvas.drawLine()`来连接各个点，形成多边形。为了填充颜色，可以使用`canvas....
自定义View绘制蜘蛛雷达图教程
3. 图形绘制：绘制雷达图的轴线、数据点、填充区域等。在自定义View中，通常会涉及到使用绘图API来画线、填充图形等操作。 4. 用户交互：为了让图表更加友好，一般会加入点击、滑动等交互操作，以允许用户放大缩小...
基于QT的雷达图绘制源代码
05-02
总之，"基于QT的雷达图绘制源代码"是一个很好的学习资源，它涵盖了QT GUI编程、自定义图形绘制、数据可视化和用户交互等多个方面的知识。对于想在QT环境中实现复杂图形界面或者对雷达图有特殊需求的开发者，这个项目...
Android自定义view--雷达扫描
王温暖的博客
04-26 723
雷达扫描view，先看下整体效果： 项目地址：https://github.com/buder-cp/CustomView/blob/master/buder_DN_view/buderdn03/src/main/java/com/test/buderdn03/RadarGradientView.java 准备两个画笔，一个是一圈圈的圆圈，另一个是扫描画笔； 动画实现 这里实现动画的...
Android 自定义View的简单应用（1） 雷达波效果
shion1986_0514的专栏
08-24 565
效果如下： 布局文件： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
Android自定义View实现雷达扫描动画
huang_wei_cai的专栏
09-08 1117
前言：类似社交软件的雷达搜索：MainActivity：public class MainActivity extends Activity { private RadarView radarView; private Button btn; private Thread radarSweepThread; private boolean startRadar = t
Android 自定义View --仿雷达扫瞄
Luckcat
03-05 476
先给出效果图：public class ScanView extends View { private Paint mCirclePaint; private Paint mSweepPaint; private int mSize = 800; private int mWidth; private int mHeight; private int m
自定义View——雷达涟漪效果图
APPLYB的博客
12-03 491
雷达涟漪效果图 话不多说直接上效果图 上面的效果图看着挺高大上的 其实实现起来很简单，下面就来一步步实现这个效果 第一步：分析 首先当我们看到一个效果并想要实现它的时候呢 第一步要做的工作就是分析他的原理， 可能你看到这个图的时候感觉无从下手，找不到切入点，不过没关心 认真的看下去 你会恍然大悟的感觉 仔细的观察后你会发现 这个图是由： 1.一个实心的圆慢慢的放大扩散并且放大过程中有慢慢的渐变直至消散 2.在第一个圆消散的过程中第二个圆从第一个圆的位置继续重复和第一个圆一样的动作 .
android 绘制坐标系（雷达探测界面）
浪克oo的博客
11-20 7519
简介 在android中会经常用到自定义view来实现一些效果的显示，今天就举个例子，绘制一个像探测雷达的界面。雷达界面一般就是下面这种样子，我们下面就大概来仿照着这个图片做一下。 最终我做出来的效果： 分析一下上述图片需要绘制哪些图形。 虚线的xy坐标轴 坐标轴上的距离刻度数和点 4个箭头符号，东南西北文字 5个虚线圆圈 目标点的虚线，以及文字距离显示 主要分为两步，1重...
手把手教你打造一个高仿雷达扫描效果和仿水波纹中心扩散效果
这个时代，作为程序员可能要学习小程序
07-08 3880
高仿雷达扫描效果和仿水波纹中心扩散效果，手把手教你撸一个炫酷的自定义view。 于亚豪的博客地址： http://blog.youkuaiyun.com/androidstarjack 我们先看效果图吧对于仿水波纹中心扩脉冲效果思路大家一看就应该知道，一张图片在不断的放大，且颜色渐变。那不就是自定义属性动画吗没错就是这么神奇。ScaleAnimation+AlphaAnimation 缩放动画：...
android仿微信雷达 头像效果 自定义view
weixin_39507786的博客
05-26 397
ScreeningRadarView public class ScreeningRadarView extends View { // 定义画笔 Paint paint; float radiusDifference; /** * 起始角度 */ private double bigCircleImageStartAngle = 45; private double centerCircleImageStartAngle =
高级分析图像--雷达图&强度图
业余程序员小徐的博客
07-09 1246
雷达图，360度强度显示，带颜色ColorBar，需要源码私聊，（提供C#,C++,Labview源码），并且提供开发支持 平面强度图，趋势图，伪彩图，带ColorBar，其他同上
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值