android 自定义雷达图,Android自定义蛛网图(雷达图)
前言
纸上得来终觉浅,绝知此事要躬行。
直接上代码
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
public class SpiderView extends View{
private Paint radarPaint,valuePaint;
private float radius;
private int centerX;
private int centerY;
private int count = 6;
private int maxValue = 6;
double[] data = {2,5,1,6,4,5};
private int a = 360/6;
public SpiderView(Context context) {
super(context);
init();
}
public SpiderView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public SpiderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
radarPaint = new Paint();
radarPaint.setStyle(Paint.Style.STROKE);
radarPaint.setColor(Color.GREEN);
valuePaint = new Paint();
valuePaint.setStyle(Paint.Style.FILL);
valuePaint.setColor(Color.BLUE);
}
@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);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawPolygon(canvas);
drawLine(canvas);
drawRegion(canvas);
}
//画数据区域
private void drawRegion(Canvas canvas) {
Path path = new Path();
valuePaint.setAlpha(127);
for(int i=0;i
double percent = data[i]/maxValue;
float x = (float)(centerX + radius * percent * Math.cos(Math.toRadians(a)*i));
float y = (float)(centerY + radius * percent * Math.sin(Math.toRadians(a)*i));
if(i==0){
path.moveTo(x,y);
}else{
path.lineTo(x,y);
}
canvas.drawCircle(x,y,10,valuePaint);
}
valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawPath(path,valuePaint);
}
//画角线
private void drawLine(Canvas canvas) {
Path path = new Path();
for(int i=0;i
path.reset();
path.moveTo(centerX,centerY);
float x = (float)(centerX + radius * Math.cos(Math.toRadians(a)*i));
float y = (float)(centerY + radius * Math.sin(Math.toRadians(a)*i));
path.lineTo(x,y);
canvas.drawPath(path,radarPaint);
}
}
//画网格框
private void drawPolygon(Canvas canvas) {
Path path = new Path();
float r = radius/count;
for(int i=1;i<=count;i++){
float curR = r * i;
path.reset();
for(int j=0;j
if(j==0){
path.moveTo(centerX + curR, centerY);
}else{
float x = (float)(centerX + curR * Math.cos(Math.toRadians(a)*j));
float y = (float)(centerY + curR*Math.sin(Math.toRadians(a)*j));
path.lineTo(x,y);
}
}
// path.close();
canvas.drawPath(path,radarPaint);
}
}
}
效果图如下:
缺了一个口.jpg
本来就没有完美的事情,索性就让它缺一个口吧,代码中注释的那句就是解决的方案。
遇到的问题
三角函数的问题,里面一定要用弧度弧度弧度,Math.cos(Math.toRadians(a)i)和Math.sin(Math.toRadians(a)i),关于弧度还是角度看这里
android 自定义雷达图,Android自定义蛛网图(雷达图)相关推荐
- Android初学之自定义简单蛛网(雷达)图
因项目需要,需要加入蛛网图的显示,虽然GitHub上早已有很多大神的nb框架,但是还是想自己写写练练手. 项目中显示的蛛网图也比较简单,只需要控制四个进度值,这样就不需要考虑角度旋转的问题了 ,只需要 ...
- android 自定义五边形图片,Android自定义View-蜘蛛网属性图(五边形图)
首先看看效果图: 这里写图片描述 先简要说一下这里需要涉及到的知识点: 高中基本的三角函数 Sin,Cos. 参考的文章: 这里为了尊重上面这篇文章的作者,需要说明一下,下面的代码有部分是参考上面这篇 ...
- android 每个块半径不同的扇形图,自定义view
1.首先看效果图 2.自定义PieChartView,继承自View,下边为PieChartView代码 package com.yingjinbao.im.peach.customview; imp ...
- 【Android 内存优化】自定义组件长图组件 ( 自定义组件构造方法 )
文章目录 一.自定义组件构造方法简介 1.View(Context context) 构造函数 2.View(Context context, @Nullable AttributeSet attrs ...
- android自定义波浪图,Android自定义控件--波浪图控件
今天给大家分享一个android的波浪图控件制作.具体效果如下图所示: 上次有个app使用了这个控件,感觉特别酷炫.今天讲解一下这个控件的思路分析与代码编写. 思路分析: 1.绘制波浪图 2.移动波浪 ...
- Android显示九宫图(自定义圆角,仿微信九宫格图)
详细解析Android显示九宫图(自定义圆角,仿微信九宫格图) 这是一个自定义九宫格图片框架,里面有设置圆角大小,还有当图片一张的时候控件自定义的大小,图片的间隔,四张图片的时候图片自定义为两行两列等 ...
- Android开发之自定义SurfaceView绘制动效音波图 | 动效音阶图 | Android自定义View
老套路献上图: 第一张是通过播放歌曲拿到歌曲播放的数据进行动态展示的 第二张是通过定时器随机生成的数据动态展示的 先说下这个自定义view也不难很简单,就是绘制矩形,唯一的难点在于计算矩形的坐标 说下 ...
- android 炫酷的自定义轮播图,Android实现炫酷轮播图效果
轮播图的实现有很多种方式,早先我在网上看了下别人写的轮播图,感觉都比较的墨守成规,有的还有可能加载不了网络图片.所以我在这里自己重新写了下轮播图 ,方便日后的项目使用. 在下面的代码中,我也用voll ...
- android记账本折线图_Android自定义View - 仿支付宝月账单折线图
前言 支付宝有个查看月账单的功能,最近一直在学习自定义View,于是就尝试着自己实现了一个类似的折线图. 下面是支付宝消费分析功能截图和自己实现的折线效果截图: 支付宝消费分析折线图.jpg 效果1. ...
最新文章
- Espresso小试
- 体验Office 2013预览版
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。...
- C# 运算符及条件控制语句
- js 定时器的用法和清除
- go 数据添加元素和删除特定元素
- Linux 如何安装程序的源代码软件包/源码程序包/源码包?
- Discretized Streams (DStreams)离散化流
- 基于类和对象的高精度算法封装
- Eclipse打开目标文件夹
- delphi android 打印机,delphi中如何检测打印机状态?(在线等) ( 积分: 100 )
- VML实例-拖动效果
- 【工具】推荐一个轻量级视频播放器——MPC-HC
- 双系统(win10+ubuntu)引导页消失
- 芮城县县名由来 芮伯庙 古魏城 芮伯万 永乐县
- UOS 在桌面创建网页快捷方式
- 巴菲特:推荐给投资者的9本书(附下载链接)
- Reasoning with Sarcasm by Reading In-between读书笔记
- JSON 格式化和校验工具
- 赛维时代IPO过会:第一季净利降71% 出口跨境电商热度降温