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

最近闲来无事，就仿着王者荣耀和英雄联盟助手的战力七星图自定义了一个战力雷达图，又叫蜘蛛网图。雷达图的绘制比较简单，主要用到路径类Path的Path.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