蛛網(wǎng)雷達圖

蛛網(wǎng)雷達圖

知識點：

1 數(shù)學(xué)：角度和弧度的關(guān)系。

角度和弧度的區(qū)別：
        角度：兩條射線從圓心向圓周射出，形成一個夾角和夾角正對的一段弧。當(dāng)這段弧長正好等于圓周長的360分之一時，兩條射線的夾角的大小為1度。
        弧度：兩條射線從圓心向圓周射出，形成一個夾角和夾角正對的一段弧。當(dāng)這段弧長正好等于圓的半徑時，兩條射線的夾角大小為1弧度。   
  由定義可知：圓所對應(yīng)的弧長是半徑的幾倍，那么角的大小就是幾弧度。
         周角(360度)= 2π弧度
         平角(180度)= π弧度
      在Java中Math類的三角函數(shù)接收的參數(shù)是弧度，不是角度。
      所以2 * Math.PI即表示360°

2 正弦、余弦定理

三角形

x = cos(∠AOB) * OA
y = sin(∠AOB) * OA

3 Path的基本用法

moveTo(x,y):移動到坐標(biāo)點
lineTo(x,y)：目前坐標(biāo)與坐標(biāo)連線，繪制出一條直線

實現(xiàn)步驟如下：

1 繪制單個多邊形
      使用canvas.drawPath()繪制多邊形
2 繪制多個多邊形
3 連線中心到末端
4 繪制分值區(qū)域
    色值加透明度

1 繪制單個多邊形

繪制單個多邊形

2 繪制多個多邊形

繪制多邊形

3 連線中心到末端

連線中心到末端

4 繪制分值區(qū)域

繪制分值區(qū)域

整理代碼如下：

public class SpiderWebView extends View {
//多邊形變數(shù)
private int BORDER_COUNT = 8;

//角度：在java中Math類的三角函數(shù)接收的參數(shù)并不角度，而是弧度，所以需要用2 * Math.PI表示360°
private float mAngel = (float) (2 * Math.PI / BORDER_COUNT);
private int width, height;
//三種Paint：多邊形Paint、直線Paint、分值區(qū)Paint
private Paint mPaintShape, mPaintLine, mPaintRegion;
//三種Path：圖形Path、直線Path,分值區(qū)域Path
private Path pathShape, pathLine, pathRegion;
//多邊形起始半徑
private int radiu = 0;
//中心點坐標(biāo)
private int centerX, centerY;

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

public SpiderWebView(Context context) {
    super(context);
    init(context);
}

public void init(Context context) {
    //多邊形繪制初始化
    mPaintShape = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintShape.setColor(getResources().getColor(R.color.black));
    mPaintShape.setStyle(Paint.Style.STROKE);
    mPaintShape.setStrokeWidth(3);

    pathShape = new Path();

    //繪制直線初始化
    mPaintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintLine.setColor(getResources().getColor(R.color.red));
    mPaintLine.setStyle(Paint.Style.STROKE);
    mPaintLine.setStrokeWidth(3);

    pathLine = new Path();

    //繪制域值初始化
    mPaintRegion = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaintRegion.setColor(Color.parseColor("#7f33b5e5"));//透明度
    mPaintRegion.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaintRegion.setStrokeWidth(3);

    pathRegion = new Path();

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    Log.d("lincoln", "onSizeChanged");
    width = w;
    height = h;
    centerX = width / 2;
    centerY = height / 2;
    radiu = Math.min(width, height) / 2;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(getResources().getColor(R.color.azure));

    //TODO OnDraw()被調(diào)用2次，問題待查找


    drawMutilShape(canvas);

    drawLine(canvas);

    drawRegion(canvas);
}

//1 繪制單個多邊形
private void drawSingleShape(Canvas canvas) {
    pathShape.moveTo(centerX + radiu, centerX);
    for (int index = 0; index < BORDER_COUNT; index++) {
        float x = (float) (centerX + Math.cos(index * mAngel) * radiu);
        float y = (float) (centerY + Math.sin(index * mAngel) * radiu);
        Log.d("lincoln", "drawSingleShape:" + " x:" + x + " y:" + y);
        pathShape.lineTo(x, y);
    }
    pathShape.close();
    canvas.drawPath(pathShape, mPaintShape);
}

//2 繪制多個多邊形
public void drawMutilShape(Canvas canvas){
    //每一份的值
    int each = radiu / 5;
    //2 繪制多個多邊形
    for (int index = 0; index < 5; index++) {
        Log.d("lincoln", "radiu:" + radiu + " each:" + each);
        radiu = radiu - each;
        drawSingleShape(canvas);
    }

}


//3 多邊形對角線相連
private void drawLine(Canvas canvas) {

    radiu = Math.min(width, height) / 2;
    int each = radiu / 5;
    radiu = radiu - each;

    for (int index = 0; index < BORDER_COUNT; index++) {
        pathLine.moveTo(centerX, centerX);
        float x = (float) (centerX + Math.cos(index * mAngel) * radiu);
        float y = (float) (centerY + Math.sin(index * mAngel) * radiu);
        Log.d("lincoln", "drawLine:" + " x:" + x + " y:" + y);
        pathLine.lineTo(x, y);
        canvas.drawPath(pathLine, mPaintLine);
    }
    //TODO 解決2次繪制的bug
    radiu = Math.min(width, height) / 2;
}

//4 繪制分值區(qū)域
float[] percents = new float[]{
        0.2F,
        0.6F,
        0.8F,
        0.5F,
        0.6F,
        0.9F,
        0.2F,
        0.8F,
        0.3F,
        0.7F,
};
public void drawRegion(Canvas canvas) {
    radiu = Math.min(width, height) / 2;
    int each = radiu / 5;
    radiu = radiu - each;
    for (int index = 0; index < BORDER_COUNT; index++) {
        float x = (float) ( Math.cos(index * mAngel) * radiu * percents[index]);
        float y = (float) ( Math.sin(index * mAngel) * radiu * percents[index]);
        Log.d("lincoln", "drawRegion:" + " x:" + x + " y:" + y);
        if (index == 0) {
            pathRegion.moveTo( centerX+x, centerY);
        } else {
            pathRegion.lineTo(centerX+x, centerY+y);
        }
    }
    pathRegion.close();
    canvas.drawPath(pathRegion, mPaintRegion);
    radiu = Math.min(width, height) / 2;

}
}

Demo源碼：

Github源碼

參考文章

簡書當(dāng)前Markdown語法與效果
安卓自定義View教程目錄

簡單造輪子系列 - 自定義支持手勢旋轉(zhuǎn)的Android Radar Chart(蛛網(wǎng)雷達圖)

自定義View——畫一個雷達圖