手動(dòng)擼個(gè)Android雷達(dá)圖（蜘蛛網(wǎng)圖）RadarView

forsigner 發(fā)布于2019-08-15 17:58 / 2961人閱讀

摘要：原文鏈接公司產(chǎn)品需要一個(gè)雷達(dá)圖來(lái)展示各維度的比重，網(wǎng)上找了一波，學(xué)到不少，直接自己上手來(lái)擼一記無(wú)圖言虛空簡(jiǎn)單分析一波，確定雷達(dá)圖正幾邊形的正五邊形，分為幾個(gè)層數(shù)層畫(huà)邊畫(huà)線描繪文字覆蓋區(qū)域主要這幾步，開(kāi)擼自定義繼承確定需要使用的變量，

原文鏈接 https://mp.weixin.qq.com/s/Ms...

公司產(chǎn)品需要一個(gè)雷達(dá)圖來(lái)展示各維度的比重，網(wǎng)上找了一波，學(xué)到不少，直接自己上手來(lái)擼一記

無(wú)圖言虛空

簡(jiǎn)單分析一波，確定雷達(dá)圖正幾邊形的--正五邊形 int count=5，分為幾個(gè)層數(shù)--4 層 int layerCount=4

? ? @Override

? ? protected void onDraw(Canvas canvas) {
? ? ? ? super.onDraw(canvas);
? ? ? ? drawPolygon(canvas);//畫(huà)邊
? ? ? ? drawLines(canvas);//畫(huà)線
? ? ? ? drawText(canvas);//描繪文字
? ? ? ? drawRegion(canvas);//覆蓋區(qū)域
? ? }

主要這幾步，開(kāi)擼！

自定義RadarView繼承View

確定需要使用的變量，初始化paint，計(jì)算圓心角

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

    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);
        //計(jì)算圓心角
        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);

    }

確定中心點(diǎn)

需要正五邊形得有一個(gè)圓，圓內(nèi)接正五邊形，在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;
? ? }

繪制正五邊形

繪制正五邊形同時(shí)描繪最外圍的點(diǎn)，確定分為4層，半徑 / 層數(shù) =每層之間的間距，從最里層開(kāi)始畫(huà)正五邊形，每層第一個(gè)點(diǎn)位于中心點(diǎn)正上方

  private void drawPolygon(Canvas canvas) {
        Path path = new Path();
        float r = radius / layerCount;
        for (int i = 1; i <= layerCount; i++) {
            float curR = r * i; //當(dāng)前所在層的半徑
            for (int j = 0; j < count; j++) {
                if (j == 0) {
                    //每一層第一個(gè)點(diǎn)坐標(biāo)
                    path.moveTo(centerX, centerY - curR);  
                } else {
                    //順時(shí)針記錄其余頂角的點(diǎn)坐標(biāo)
                    float x = (float) (centerX + Math.sin(angle * j) * curR);
                    float y = (float) (centerY - Math.cos(angle * j) * curR);
                    path.lineTo(x, y);
                }
            }
            //最外層的頂角外面的五個(gè)小圓點(diǎn)(圖中紅色部分)
            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);
        }
    }

繪制連線

繪制最內(nèi)層頂角到最外層頂角的連線

  private void drawLines(Canvas canvas) {
        float r = radius / layerCount;
        for (int i = 0; i < count; i++) {
            //起始坐標(biāo) 從中心開(kāi)始的話 startx=centerX , startY=centerY
            float startX = (float) (centerX + Math.sin(angle * i) * r);
            float startY = (float) (centerY - Math.cos(angle * i) * r);
            //末端坐標(biāo)
            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);
        }
    }

至此簡(jiǎn)易雷達(dá)圖成型，可以修改正幾邊形，多少層數(shù)（后續(xù)繼續(xù)添加文字）

    //設(shè)置幾邊形，**注意：設(shè)置幾邊形需要重新計(jì)算圓心角**
    public void setCount(int count){
        this.count = count;
        angle = (float) (Math.PI * 2 / count);
        invalidate();
    }

    //設(shè)置層數(shù)
    public void setLayerCount(int layerCount){
        this.layerCount = layerCount;
        invalidate();
    }

設(shè)置正六邊形、六層

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

對(duì)于以下圖形的，可以設(shè)置第一個(gè)點(diǎn)坐標(biāo)位于中心點(diǎn)正右側(cè)(centerX+curR,centerY)，順時(shí)針計(jì)算其余頂點(diǎn)坐標(biāo)x = (float) (centerX+curR*Math.cos(angle*j)), y = (float) (centerY+curR*Math.sin(angle*j))，同理連線等其余坐標(biāo)相應(yīng)改變...

描繪文字

由于各產(chǎn)品維度內(nèi)容不同，所需雷達(dá)圖樣式不一，這里只是描繪下不同位置的文字處理情況，具體需求還得按產(chǎn)品來(lái)，因產(chǎn)品而異

    private void drawText(Canvas canvas) {
        for (int i = 0; i < count; i++) {
            //獲取到雷達(dá)圖最外邊的坐標(biāo)
            float x = (float) (centerX + Math.sin(angle * i) * (radius + 12));
            float y = (float) (centerY - Math.cos(angle * i) * (radius + 12));
            if (angle * i == 0) {
                //第一個(gè)文字位于頂角正上方
                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) {
                //微調(diào)
                canvas.drawText(titles[i], x + 18, y + 10, txtPaint);
            } else if (angle * i >= Math.PI / 2 && angle * i < Math.PI) {
                //最右下的文字獲取到文字的長(zhǎng)、寬，按文字長(zhǎng)度百分比向左移
                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) {
                //同理最左下的文字獲取到文字的長(zhǎng)、寬，按文字長(zhǎng)度百分比向左移
                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) {
                //文字向左移動(dòng)
                String txt = titles[i];
                float width = txtPaint.measureText(txt);
                canvas.drawText(txt, x - width - 18, y + 10, txtPaint);
            }

        }
    }

繪制覆蓋區(qū)域

繪制覆蓋區(qū)域，百分比取連線長(zhǎng)度的百分比(如果從中心點(diǎn)開(kāi)始的連線，則是半徑的百分比)，此處用半徑radius減去間隔r即連線長(zhǎng)度

   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);
    }

至此，一個(gè)簡(jiǎn)單的雷達(dá)圖完畢。
歡迎關(guān)注我的博客：https://blog.manjiexiang.cn/
同時(shí)歡迎關(guān)注微信公眾號(hào)

云服務(wù)器 GPU云服務(wù)器雷達(dá)圖氣象雷達(dá)圖氣象雷達(dá)圖數(shù)據(jù) js雷達(dá)圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/69544.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

forsigner

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

??Python【文件操作】保姆式教程??，計(jì)算機(jī)那么多文件，你繞不過(guò)這一關(guān)的！

閱讀 3578·2021-09-24 09:48
三星 SmartThings Find 注冊(cè)節(jié)點(diǎn)超 1 億

閱讀 1105·2021-09-10 10:51
web前端教程《每日一題》（1-99）完結(jié)

閱讀 3283·2019-08-30 13:03
CSS裝飾加載失敗的圖片（譯）

閱讀 3331·2019-08-30 12:51
選擇器特殊性排名

閱讀 1399·2019-08-30 11:22
一次搞懂CSS字體單位：px、em、rem和%

閱讀 1074·2019-08-29 18:38
前端每日實(shí)戰(zhàn)：133# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作有多個(gè)關(guān)鍵幀的連續(xù)動(dòng)畫(huà)

閱讀 2045·2019-08-29 16:41
前端每日實(shí)戰(zhàn)：37# 視頻演示如何把握好 transition 和 animation 的時(shí)序，創(chuàng)作

閱讀 3216·2019-08-29 15:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

手動(dòng)擼個(gè)Android雷達(dá)圖（蜘蛛網(wǎng)圖）RadarView

相關(guān)文章

【自定義View】洋蔥數(shù)學(xué)同款雷達(dá)圖深入解析-RadarView

**[Android] View動(dòng)畫(huà)特效(二)**

發(fā)表評(píng)論

0條評(píng)論

forsigner

男|高級(jí)講師

TA的文章

??Python【文件操作】保姆式教程??，計(jì)算機(jī)那么多文件，你繞不過(guò)這一關(guān)的！

三星 SmartThings Find 注冊(cè)節(jié)點(diǎn)超 1 億

web前端教程《每日一題》（1-99）完結(jié)

CSS裝飾加載失敗的圖片（譯）

選擇器特殊性排名

一次搞懂CSS字體單位：px、em、rem和%

前端每日實(shí)戰(zhàn)：133# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作有多個(gè)關(guān)鍵幀的連續(xù)動(dòng)畫(huà)

前端每日實(shí)戰(zhàn)：37# 視頻演示如何把握好 transition 和 animation 的時(shí)序，創(chuàng)作

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

手動(dòng)擼個(gè)Android雷達(dá)圖（蜘蛛網(wǎng)圖）RadarView

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！