手動擼個Android雷達圖（蜘蛛網圖）RadarView

標籤：com   半徑   方法   else   tco   邊框   mat   []   ring   

公司產品需要一個雷達圖來展示各維度比重，網上找了一波，學到不少，直接自己上手來擼一記

無圖言虛空

簡單分析一波，確定雷達圖正幾邊形的--正五邊形 int count=5，分為幾個層數--4 層 int layerCount=4

    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        drawPolygon(canvas);//畫邊        drawLines(canvas);//畫線        drawText(canvas);//描繪文字        drawRegion(canvas);//覆蓋地區    }

主要這幾步，開擼！

自訂RadarView繼承View

確定需要使用的變數，初始化paint，計算圓心角

private int count = 5; //幾邊形    private int layerCount = 4; //層數    privatefloatangle; //每條邊對應的圓心角   private int centerX; //圓心x    private int centerY; //圓心y    privatefloatradius; //半徑    private Paint polygonPaint; //邊框paint    private Paint linePaint; //連線paint    private Paint txtPaint; //文字paint    private Paint circlePaint; //圓點paint    private Paint regionColorPaint; //覆蓋地區paint    private Double[] percents = {0.91, 0.35, 0.12, 0.8, 0.5}; //覆蓋地區百分比    private String[] titles = {"dota","鬥地主","大吉大利，晚上吃雞","爐石傳說","跳一跳"};//文字

    public RadarView(Context context) {        this(context, null, 0);    }    public RadarView(Context context, @Nullable AttributeSet attrs) {        this(context, attrs, 0);    }    public RadarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //計算圓心角        angle = (float) (Math.PI * 2 / count);        polygonPaint = new Paint();        polygonPaint.setColor(ContextCompat.getColor(context, R.color.radarPolygonColor));        polygonPaint.setAntiAlias(true);        polygonPaint.setStyle(Paint.Style.STROKE);        polygonPaint.setStrokeWidth(4f);        linePaint = new Paint();        linePaint.setColor(ContextCompat.getColor(context, R.color.radarLineColor));        linePaint.setAntiAlias(true);        linePaint.setStyle(Paint.Style.STROKE);        linePaint.setStrokeWidth(2f);        txtPaint = new Paint();        txtPaint.setColor(ContextCompat.getColor(context, R.color.radarTxtColor));        txtPaint.setAntiAlias(true);        txtPaint.setStyle(Paint.Style.STROKE);        txtPaint.setTextSize(DensityUtil.dpToPx(context, 12));        circlePaint = new Paint();        circlePaint.setColor(ContextCompat.getColor(context, R.color.radarCircleColor));        circlePaint.setAntiAlias(true);        regionColorPaint = new Paint();        regionColorPaint.setColor(ContextCompat.getColor(context, R.color.radarRegionColor));        regionColorPaint.setStyle(Paint.Style.FILL);        regionColorPaint.setAntiAlias(true);    }

確定中心點

需要正五邊形得有一個圓，圓內接正五邊形，在onSizeChanged方法裡擷取圓心，確定半徑

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        radius = Math.min(h, w) / 2 * 0.7f;
        centerX = w / 2;
        centerY = h / 2;
    }

繪製正五邊形

繪製正五邊形同時描繪最外圍的點，確定分為4層，半徑 / 層數 =每層之間的間距，從最裡層開始畫正五邊形，每層第一個點位於中心點正上方

  private void drawPolygon(Canvas canvas) {        Path path = new Path();        float r = radius / layerCount;        for (int i = 1; i <= layerCount; i++) {            float curR = r * i; //當前所在層的半徑            for (int j = 0; j < count; j++) {                if (j == 0) {                    //每一層第一個點座標                    path.moveTo(centerX, centerY - curR);                  } else {                    //順時針記錄其餘頂角的點座標                    float x = (float) (centerX + Math.sin(angle * j) * curR);                    float y = (float) (centerY - Math.cos(angle * j) * curR);                    path.lineTo(x, y);                }            }            //最外層的頂角外面的五個小圓點(圖中紅色部分)            if (i == layerCount) {                for (int j = 0; j < count; j++) {                    float x = (float) (centerX + Math.sin(angle * j) * (curR + 12));                    float y = (float) (centerY - Math.cos(angle * j) * (curR + 12));                    canvas.drawCircle(x, y, 4, circlePaint);                }            }            path.close();            canvas.drawPath(path, polygonPaint);        }    }

繪製連線

繪製最內層頂角到最外層頂角的連線

  private void drawLines(Canvas canvas) {        float r = radius / layerCount;        for (int i = 0; i < count; i++) {            //起始座標 從中心開始的話 startx=centerX , startY=centerY            float startX = (float) (centerX + Math.sin(angle * i) * r);            float startY = (float) (centerY - Math.cos(angle * i) * r);            //末端座標            float endX = (float) (centerX + Math.sin(angle * i) * radius);            float endY = (float) (centerY - Math.cos(angle * i) * radius);            canvas.drawLine(startX, startY, endX, endY, linePaint);        }    }

至此簡易雷達圖成型，可以修改正幾邊形，多少層數（後續繼續添加文字）

    //設定幾邊形，**注意：設定幾邊形需要重新計算圓心角**    public void setCount(int count){        this.count = count;        angle = (float) (Math.PI * 2 / count);        invalidate();    }    //設定層數    public void setLayerCount(int layerCount){        this.layerCount = layerCount;        invalidate();    }

設定正六邊形、六層

    radarView.setCount(6);
    radarView.setLayerCount(6);

對於以形的，可以設定第一個點座標位於中心點正右側(centerX+curR,centerY)，順時針計算其餘頂點座標x = (float) (centerX+curR*Math.cos(angle*j)), y = (float) (centerY+curR*Math.sin(angle*j))，同理連線等其餘座標相應改變...

描繪文字

由於各產品維度內容不同，所需雷達圖樣式不一，這裡只是描繪下不同位置的文文書處理情況，具體需求還得按產品來，因產品而異

    private void drawText(Canvas canvas) {        for (int i = 0; i < count; i++) {            //擷取到雷達圖最外邊的座標            float x = (float) (centerX + Math.sin(angle * i) * (radius + 12));            float y = (float) (centerY - Math.cos(angle * i) * (radius + 12));            if (angle * i == 0) {                //第一個文字位於頂角正上方                txtPaint.setTextAlign(Paint.Align.CENTER);                canvas.drawText(titles[i], x, y - 18, txtPaint);                txtPaint.setTextAlign(Paint.Align.LEFT);            } else if (angle * i > 0 && angle * i < Math.PI / 2) {                //微調                canvas.drawText(titles[i], x + 18, y + 10, txtPaint);            } else if (angle * i >= Math.PI / 2 && angle * i < Math.PI) {                //最右下的文字擷取到文字的長、寬，按文字長度百分比向左移                String txt = titles[i];                Rect bounds = new Rect();                txtPaint.getTextBounds(txt, 0, txt.length(), bounds);                float height = bounds.bottom - bounds.top;                float width = txtPaint.measureText(txt);                canvas.drawText(txt, x - width * 0.4f, y + height + 18, txtPaint);            } else if (angle * i >= Math.PI && angle * i < 3 * Math.PI / 2) {                //同理最左下的文字擷取到文字的長、寬，按文字長度百分比向左移                String txt = titles[i];                Rect bounds = new Rect();                txtPaint.getTextBounds(txt, 0, txt.length(), bounds);                float width = txtPaint.measureText(txt);                float height = bounds.bottom - bounds.top;                canvas.drawText(txt, x - width * 0.6f, y + height + 18, txtPaint);            } else if (angle * i >= 3 * Math.PI / 2 && angle * i < 2 * Math.PI) {                //文字向左移動                String txt = titles[i];                float width = txtPaint.measureText(txt);                canvas.drawText(txt, x - width - 18, y + 10, txtPaint);            }        }    }

繪製覆蓋地區

繪製覆蓋地區，百分比取連線長度的百分比(如果從中心點開始的連線，則是半徑的百分比)，此處用半徑radius減去間隔r即連線長度

   private void drawRegion(Canvas canvas) {        Path path = new Path();        float r = radius / layerCount;//每層的間距        for (int i = 0; i < count; i++) {            if (i == 0) {                path.moveTo(centerX, (float) (centerY - r - (radius - r) * percents[i]));            } else {                float x = (float) (centerX + Math.sin(angle * i) * (percents[i] * (radius - r) + r));                float y = (float) (centerY - Math.cos(angle * i) * (percents[i] * (radius - r) + r));                path.lineTo(x, y);            }        }        path.close();        canvas.drawPath(path, regionColorPaint);    }

至此，一個簡單的雷達圖完畢。同時歡迎關注公眾號

End

手動擼個Android雷達圖（蜘蛛網圖）RadarView