【Android】自定义蜘蛛网图

步骤

步骤一：新建一个类继承自view
步骤二：重写onDraw()函数，需要绘制网格图，中位线以及数据的填充方法
简单思路:onDraw函数中，我们写了三个新的函数，分别用来绘制网格，中位线和数据 ，需要的用到三只画笔，可以自定义有几个方面，比如语数英政史地等六门课程的蜘蛛图，也可以是九门，以及最大值，应该有个统一的最大值，比如说都是150分满分，然后将你所有的成绩输入，绘制一个蜘蛛图。

实现

BaseView代码

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

public class BaseView extends View {
    private int CenterX;
    private int CenterY;
    private float Radius;
    private Paint drawpaint;
    private Paint datapaint;
    private Paint circlepaint;
    private int count;
    private int Max;
    private float angle;
    private double array[];
    public void setPaint(Paint drawpaint,Paint datapaint,Paint circlepaint){
    //用来设置画笔相关
        this.circlepaint=circlepaint;
        this.datapaint=datapaint;
        this.drawpaint=drawpaint;
    }
    public void setSpider(int count,int Max,double array[]){
    //设置数据相关
         this.count=count;
         this.Max=Max;
         angle= (float) (Math.PI*2/count);
         this.array=array;
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       drawPolygon(canvas);//绘制蜘蛛网格
       drawLine(canvas);//绘制中心线
       drawRegion(canvas);//绘制数据填充
    }

    private void drawRegion(Canvas canvas) {
       Path path=new Path();
       datapaint.setAlpha(127);
       for(int i=0;i<count;i++){
         double percent=array[i]/Max;//根据百分比来确定点的位置
         float x= (float) (CenterX+Radius*percent*Math.cos(angle*i));
         float y=(float)(CenterY+Radius*percent*Math.sin(angle*i));
         if(i==0){
             path.moveTo(x,CenterY);
         }else{
             path.lineTo(x,y);
         }
         //在终点出绘制了一个小圆
         canvas.drawCircle(x, y, 10f, circlepaint);
       }
       canvas.drawPath(path, datapaint);
    }

    private void drawLine(Canvas canvas) {
        Path path=new Path();
        //绘制中位线其实就是将中心与最外层的定点连接起来绘制一条线然后循环六次
        for(int i=0;i<6;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, drawpaint);
        }

    }

    private void drawPolygon(Canvas canvas) {
        //怎么绘制蜘蛛网格呢？根据中心，通过path绘制
        Path path=new Path();
        float r=Radius/(count);//有几层？有几个角？
        //注意，这里有几层表示需要绘制几层的蜘蛛网
        //几个角表示你有几门课程的成绩，一门课程一个角
        //这里我都用count表示，也就是两者相等，也可以自定义，从外面再传入一个值即可
        for(int i=1;i<=count;i++){
            float curR=r*i;
            //简单的数学三角函数知识
            path.reset();//为了不重复的new path，我们用reset方法清空之前绘制的路径
            for(int j=0;j<6;j++){
               if(j==0){
                   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,drawpaint);
        }

    }


//onSizeChanged函数主要在view大小被改变时调用，及时的更改该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);
    }
}

MainActivity

import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.example.yang.views.BaseView;
import com.example.yang.views.R;

public class MainActivity extends AppCompatActivity {
    private BaseView baseView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        baseView=findViewById(R.id.baseview);
        //简单的使用我们自定义的蜘蛛图
        Paint drawpaint=new Paint();
        Paint datapaint=new Paint();
        Paint circlepaint=new Paint();
        drawpaint.setStyle(Paint.Style.STROKE);
        drawpaint.setColor(Color.RED);
        datapaint.setStyle(Paint.Style.FILL);
        datapaint.setColor(Color.BLACK);
        circlepaint.setColor(Color.YELLOW);
        circlepaint.setStyle(Paint.Style.FILL);
        baseView.setPaint(drawpaint,datapaint ,circlepaint);
        double array[]={2,4,6,3,5,1};
        baseView.setSpider(6, 6, array);

    }
}