android战力图、雷达图、七星图、蜘蛛网图自定义控件

本文介绍了如何仿照王者荣耀和英雄联盟助手的战力七星图,自定义一个Android雷达图(蜘蛛网图)。主要涉及路径类和贝塞尔曲线的相关知识,包括绘制雷达网格、文本以及覆盖图层。提供了最终的绘制效果图和源代码链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近闲来无事,就仿着王者荣耀和英雄联盟助手的战力七星图自定义了一个战力雷达图,又叫蜘蛛网图。雷达图的绘制比较简单,主要用到路径类PathPath.lineTo()Path.moveTo() 相关知识。

public void lineTo (float x, float y)

从命名上可以看出是从某个点到参数坐标点画一条线,具体某个点在哪,是指上次操作的结束点,如果没有进行操作默认为坐标原点。

public void moveTo (float x, float y)

移动下一次操作点的起始点

最终绘制效果图:

绘制雷达网格

   private void drawRadarBg(Canvas canvas) {
        //雷达网格间距
        float mSpc = mRadius / (mNum - 1);
        for (int i = 1; i < mNum; i++) {
            //计算当前半径
            float curRadius = mSpc * i;
            for (int j = 0; j < mCount; j++) {
                //根据半径,计算出每个点的坐标
                float x = (float) (curRadius * Math.sin(mAngle / 2 + mAngle * j));
                float y = (float) (curRadius * Math.cos(mAngle / 2 + mAngle * j));
                if (j == 0) {
                    mRadarPath.moveTo(x, y);
                } else {
                    mRadarPath.lineTo(x, y);
                }
                //绘制最后一环时绘制连线
                drawLine(canvas, i, x, y);
            }
            mRadarPath.close();
            canvas.drawPath(mRadarPath, mRadarPaint);
        }
    }

绘制文本

    private void drawText(Canvas canvas) {
        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        float fontHeight = fontMetrics.descent - fontMetrics.ascent;
        for (int i = 0; i < mCount; i++) {
            float x = (float) ((mRadius + fontHeight / 2) * Math.sin(mAngle / 2 + mAngle * i));
            float y = (float) ((mRadius + fontHeight / 2) * Math.cos(mAngle / 2 + mAngle * i));
            String text = mData.get(i).getTitle();
            float fontWidth = mTextPaint.measureText(text);
            canvas.drawText(text, x - fontWidth / 2, y, mTextPaint);
        }
    }

绘制覆盖图层

    private void drawLayer(Canvas canvas) {
        for (int i = 0; i < mCount; i++) {
            double percent = mData.get(i).getPercent() / mMaxValue;
            float x = (float) (mRadius * Math.sin(mAngle / 2 + mAngle * i) * percent);
            float y = (float) (mRadius * Math.cos(mAngle / 2 + mAngle * i) * percent);
            if (i == 0) {
                mLayerPath.moveTo(x, y);
            } else {
                mLayerPath.lineTo(x, y);
            }
            //画小圆点
            canvas.drawCircle(x, y, circleWidth, mCirclePaint);
        }
        mLayerPath.close();
        canvas.drawPath(mLayerPath, mLayerPaint);
    }

最后欢迎star和fork交流,有问题请提issues,

源代码

https://github.com/utouch/RadarView

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值