自定义控件之雷达图
2017-03-23 本文已影响333人
ac噜噜噜
雷达图，城里人管她叫戴布拉图
某杀的个人信息那里有个。一看就是稳如狗
某度的个人图谱
一看就是不热爱生活，不关心政治，没有文艺细胞，不爱学习，偶尔八卦的技术宅。
用andorid的自定义控件实现以下。最终做出的效果是这样的
准备
-
为了重用性，有一些参数需要用户可以自定义。比如：数据，雷达图半径，半径长度和实际值的比例，雷达图的层数，角的数量（和数据相关）
-
根据（1）的数据，运用简单三角函数知识，绘制出基本雷达图。
-
同样运用三角函数知识，绘制出数据区域
-
注意绘制过程中的一些细节
开始撸代码
1.让SpiderView继承View类，在构造方法中调用init()初始化画笔等信息
//初始化画笔 正式使用的时候可以在这里获取一些 用户自定义的attrs参数
private void init() {
mSpiderPaint = new Paint();
mSpiderPaint.setAntiAlias(true);
mSpiderPaint.setColor(Color.GRAY);
mSpiderPaint.setStyle(Paint.Style.STROKE);
mDataPaint = new Paint();
mDataPaint.setAntiAlias(true);
mDataPaint.setColor(Color.BLUE);
mDataPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mTextPaint = new Paint();
mTextPaint.setTextSize(20);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setColor(Color.BLACK);
}
2.在onMeasure中简单处理view默认大小
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//可以在这里处理View自身的测量情况 wrap
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
if(widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode ==MeasureSpec.AT_MOST){
heightSpecSize = widthSpecSize = DEFAULTSIZE;
}else{
heightSpecSize = widthSpecSize = Math.min(heightSpecSize,widthSpecSize);
}
setMeasuredDimension(widthSpecSize,heightSpecSize);
}
3.onSizeChandged方法中确定中心位置，方便后面的平移
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mCenterW = w/2;
mCenterH = h/2;
mDefaultMaxR = Math.min(w,h)/2f-30;//随便计算一下 最大值
Log.e("SpiderView",String.format("控件默认的最大的R为%f",mDefaultMaxR));
//防止用户设置的值 突破天际
if(mMaxR >0f){
mMaxR = Math.min(mDefaultMaxR,mMaxR);
}else{
mMaxR = mDefaultMaxR;
}
}
4.在onDraw方法中利用用户设置参数，画出雷达图
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(spiders==null||spiders.size()<3) return; //没有值或者值小于3 直接不画
mSizeCount = spiders.size();
mR = mMaxR / (mCount-1);
mAngle = (float) Math.PI*2/mSizeCount;
canvas.translate(mCenterW,mCenterH); //将原点移动至中心
//分别绘制
drawSpiderBase(canvas);
drawSpiderSupport(canvas);
drawSpiderData(canvas);
drawSpiderText(canvas);
}
5.分别绘制 基本上注释已经很清楚了
/**
* 画出蛛网
* @param canvas
*/
private void drawSpiderBase(Canvas canvas) {
Path path = new Path();
for (int i = 1;i<mCount;i++){ //最中心的点不用画出
path.reset();
for(int j=0;j<mSizeCount;j++){
if(j==0){
path.moveTo(mR*i,0);
}else{
//利用三角函数计算 坐标x, y的值
path.lineTo((float) (mR*i*Math.cos(mAngle*j)),(float) (mR*i*Math.sin(mAngle*j)));
//Log.e("SpiderView",String.format("x,y的坐标分别为：%f,%f",(float) (mR*i*Math.cos(mAngel*j)),(float) (mR*i*Math.sin(mAngel*j))));
}
}
path.close();
canvas.drawPath(path,mSpiderPaint);
}
}
层数循环中嵌套角数循环，通过角数的循环，运用三角函数知识通过弧度和伪半径确定多边形各个顶点的位置，然后使用path链接，最后通过canvas绘制出
/**
* 链接蛛网的线
* @param canvas
*/
private void drawSpiderSupport(Canvas canvas) {
for(int i=0;i<mSizeCount;i++){
canvas.drawLine(0f,0f,(float)( mMaxR*Math.cos(mAngle*i)),(float) (mMaxR*Math.sin(mAngle*i)),mSpiderPaint);
}
}
运用三角函数知识确定顶点位置，然后使用canvas绘制中心点和顶点的连线
/**
* 为每一个点增加名字说明
* @param canvas
*/
private void drawSpiderText(Canvas canvas){
Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
float fontHeight = fontMetrics.descent - fontMetrics.ascent;
mTextPaint.setTextSize(10);
for(int i=0;i<mSizeCount;i++){
//计算说明文字的坐标
float x = (float)( (mMaxR + fontHeight /2)*Math.cos(mAngle*i));
float y = (float) ((mMaxR + fontHeight /2)*Math.sin(mAngle*i));
//记录画布位置
canvas.save();
canvas.translate(x,y);
float curAngle = mAngle * i;
//Log.e("SpiderView","curAngle"+curAngle);
//旋转角度 摆正说明文字的位置
canvas.rotate(-curAngle);
float dis = mTextPaint.measureText(spiders.get(i).name);//文本长度
//在第三象限 android上面的坐标系是顺时针计算角度和弧度。 数学的坐标系是逆时针计算角度和弧度
if(Math.PI/2f < curAngle && curAngle < Math.PI){
canvas.drawText(spiders.get(i).name,-dis,0,mTextPaint);
//在第二象限
}else if(Math.PI < curAngle &&curAngle < 3f / 2f* Math.PI){
canvas.drawText(spiders.get(i).name,-dis,0,mTextPaint);
}else{
canvas.drawText(spiders.get(i).name,0,0,mTextPaint);
}
//恢复画布
canvas.restore();
}
}
这里要注意：android上面的坐标系是顺时针计算角度和弧度。 数学的坐标系是逆时针计算角度和弧度
为了摆正文字，需要将canvas（画布）平移后在旋转相应的角度。并且在第二三象限的时候，文字会和雷达图重合，所以需要增加相应的长度单位
同样注意：canvas的平移和旋转是影响后面操作并且连续的。所以使用了 canvas 的save和restore方法。
/**
* 绘制数据区域
* @param canvas
*/
private void drawSpiderData(Canvas canvas){
//防止用户设置的值太小 数据区域大于雷达区
for(Spider spider:spiders){
mMaxNumber = Math.max(spider.val,mMaxNumber);
}
Path path = new Path();
//连接整个数据区域
for(int i=0; i<mSizeCount; i++){
float curR = spiders.get(i).val/mMaxNumber*mMaxR ;
float x = (float) (curR*Math.cos(mAngle*i));
float y = (float) (curR*Math.sin(mAngle*i));
if(i==0){
path.moveTo(curR,0);
}else{
path.lineTo(x,y);
}
//绘制小圆点
canvas.drawCircle(x,y,2,mDataPaint);
}
path.close();
mDataPaint.setStyle(Paint.Style.STROKE);
canvas.drawPath(path, mDataPaint);
mDataPaint.setAlpha(127);
mDataPaint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawPath(path,mDataPaint);
}
待完善的地方
onDraw方法里面处理padding参数
