自定义控件之雷达图

雷达图，城里人管她叫戴布拉图

某杀的个人信息那里有个。一看就是稳如狗

某度的个人图谱

一看就是不热爱生活，不关心政治，没有文艺细胞，不爱学习，偶尔八卦的技术宅。

用andorid的自定义控件实现以下。最终做出的效果是这样的

准备

1. 为了重用性，有一些参数需要用户可以自定义。比如：数据，雷达图半径，半径长度和实际值的比例，雷达图的层数，角的数量（和数据相关）

2. 根据（1）的数据，运用简单三角函数知识，绘制出基本雷达图。

3. 同样运用三角函数知识，绘制出数据区域

4. 注意绘制过程中的一些细节

开始撸代码

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参数

下载查看全部代码