簡介

最近因為項目需求，要實現一款雷達圖來表示用戶的各種成就值
雷達圖的繪制很簡單，只要思路清晰按部就班的繪制就可以了，其中使用得最多，是路徑path類的使用，使用這個類可以讓我們更加方便地繪制出正多邊形等效果。
效果圖如下：

使用方式

使用方式很簡單，只要在布局文件裡面，直接使用這個控件就好了，記得給它設置一個合適的具體的大小。
另外可以控制繪制的是多少邊形，通過提供的一些public方法，可以設置畫筆顏色等。
當然大家也可以按照自己的需求去修改啦。

    //設置標題
    public void setTitles(String[] titles) {
        this.titles = titles;
    }

    //設置數值
    public void setData(double[] data) {
        this.data = data;
    }

    //設置最大數值
    public void setMaxValue(float maxValue) {
        this.maxValue = maxValue;
    }

    //設置蜘蛛網顏色
    public void setMainPaintColor(int color){
        mainPaint.setColor(color);
    }

    //設置標題顏色
    public void setTextPaintColor(int color){
        textPaint.setColor(color);
    }

    //設置覆蓋局域顏色
    public void setValuePaintColor(int color){
        valuePaint.setColor(color);
    }

具體實現

1、獲得布局中心

我們在onSizeChanged(int w, int h, int oldw, int oldh)方法裡面，根據View的長寬，獲取整個布局的中心坐標，因為整個雷達都是以整個中心開始繪制的。

public class RadarView extends View {
    private int count = 6;                //數據個數  
    private float angle = (float) (Math.PI*2/count);     
    private float radius;                   //網格最大半徑  
    private int centerX;                  //中心X  
    private int centerY;                  //中心Y  
    private String[] titles = {a,b,c,d,e,f};
    private double[] data = {100,60,60,60,100,50,10,20}; //各維度分值  
    private float maxValue = 100;             //數據最大值
    private Paint mainPaint;                //雷達區畫筆  
    private Paint valuePaint;               //數據區畫筆  
    private Paint textPaint;                //文本畫筆      
    ...
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        radius = Math.min(h, w)/2*0.9f;
        //中心坐標
        centerX = w/2;
        centerY = h/2;
        postInvalidate();
        super.onSizeChanged(w, h, oldw, oldh);
    }
    ...
}

2、繪制蜘蛛網絡

/**
     * 繪制正多邊形
     */
    private void drawPolygon(Canvas canvas){
        Path path = new Path();
        float r = radius/(count-1);//r是蜘蛛絲之間的間距
        for(int i=1;i

3、繪制從中心到末端的直線

同樣根據半徑，計算出每個末端坐標

/**
     * 繪制直線
     */
    private void drawLines(Canvas canvas){
        Path path = new Path();
        for(int i=0;i

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMiBpZD0="4繪制文本">4、繪制文本

對於文本的繪制，首先要找到末端的坐標，由於末端和文本有一定距離，給每個末端加上這個距離以後，再繪制文本。
另外，當文本在左邊時，由於不希望文本和蜘蛛網交叉，我們可以先計算出文本的長度，然後使起始繪制坐標向左偏移這個長度。

/**
     * 繪制文字
     * @param canvas
     */
    private void drawText(Canvas canvas){
        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float fontHeight = fontMetrics.descent - fontMetrics.ascent;
        for(int i=0;i=0&&angle*i<=Math.PI/2){//第4象限
                canvas.drawText(titles[i], x,y,textPaint);
            }else if(angle*i>=3*Math.PI/2&&angle*i<=Math.PI*2){//第3象限
                canvas.drawText(titles[i], x,y,textPaint);
            }else if(angle*i>Math.PI/2&&angle*i<=Math.PI){//第2象限
                float dis = textPaint.measureText(titles[i]);//文本長度
                canvas.drawText(titles[i], x-dis,y,textPaint);
            }else if(angle*i>=Math.PI&&angle*i<3*Math.PI/2){//第1象限
                float dis = textPaint.measureText(titles[i]);//文本長度
                canvas.drawText(titles[i], x-dis,y,textPaint);
            }
        }
    }

5、繪制覆蓋區域

覆蓋區域，只要使用path記錄下坐標點，然後設

valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);

使path包圍區域被填充

/**
     * 繪制區域
     * @param canvas
     */
    private void drawRegion(Canvas canvas){
        Path path = new Path();
        valuePaint.setAlpha(255);
        for(int i=0;i

寫在最後

控件很簡單，有需要的朋友可以下載源碼直接使用或者修改
本篇文章主要是path類的使用
另外這個控件沒有做較好的屏幕適配，大家可以根據自己的需要修改