自定义多边形统计图(雷达图)

自定义雷达图 根据项目需求在图中画多条线

/**
 * 自定义多边形统计
 *
 * @author roc
 */
public class PolygonCustomeView extends View {
    int width, height;
    // 最大半径
    float maxRadius;

    // 外层点位置
    List<Point> maxPointList;

    // 边数
    int sideCount;
    // 角度
    float angle;
    // 层数
    int loopCount;

    // 绘制边的Paint
    private Paint sidePaint;
    // 绘制内容的Paint
    private Paint areaPaint;
    // 绘制文字的Paint
    private Paint textPaint;

    // private List<Float> pointValue;
    private List<List<Float>> pointValue;
    private List<String> pointName;

    public PolygonCustomeView(Context context) {
        super(context);
    }

    public PolygonCustomeView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public PolygonCustomeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);

    }

    private void init(Context context, AttributeSet attrs) {
        initPaint();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Polygon);
        // 设置文字颜色
        setTextColor(typedArray.getColor(R.styleable.Polygon_ptitleColor, Color.BLACK));
        // 设置文字大小
        setTextSize(typedArray.getInteger(R.styleable.Polygon_titleSize, 15));
        // 设置绘制数据线的颜色
        // setAreaColor(typedArray.getColor(R.styleable.Polygon_areaColor,
        // Color.BLACK));
        // 设置边颜色
        // setSideColor(typedArray.getColor(R.styleable.Polygon_sideColor,
        // Color.BLACK));
        // 设置层数
        setLoopCount(typedArray.getInteger(R.styleable.Polygon_loopCount, 0));
        // 设置边数
        // setSideCount(typedArray.getInteger(R.styleable.Polygon_sideCount,
        // 0));
        typedArray.recycle();

    }

    private void initPaint() {
        sidePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        areaPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        sidePaint.setStyle(Paint.Style.STROKE);

        areaPaint.setStyle(Paint.Style.STROKE);
        areaPaint.setStrokeWidth(3);

        textPaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (!canDraw()) {
            return;
        } else {
            canvas.translate(width / 2, height / 2);
            computeMaxPoint();
            drawPolygon(canvas);
            drawLine(canvas);
            drawArea(canvas);
            drawText(canvas);
        }

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = w;
        height = h;
        maxRadius = (float) ((height / 2) * 0.8);
        postInvalidate();
    }

    /**
     * 获取外层点坐标
     */
    public void computeMaxPoint() {
        maxPointList = new ArrayList<>();

        for (int i = 0; i < sideCount; i++) {

            // 按照android的坐标系,如果不减去90度直接乘上cos的话,第一个顶点会默认在中心的右侧,
            // 而一般的认知是第一个点在正上方,所以减去90度
            float currentAngle = i * angle - 90;
            if (sideCount < 3)
                currentAngle = i * angle - 120;

            float currentX = (float) (maxRadius * Math.cos((currentAngle / 180) * Math.PI));
            float currentY = (float) (maxRadius * Math.sin((currentAngle / 180) * Math.PI));

            Point point = new Point();
            point.setX(currentX);
            point.setY(currentY);
            maxPointList.add(point);
        }
    }

    /**
     * 绘制多边形的每一层
     *
     * @param canvas
     */
    private void drawPolygon(Canvas canvas) {
        Path path = new Path();
        for (int i = loopCount; i > 0; i--) {

            if (i == loopCount) {
                if (pointName == null || pointName.size() == 0) {
                    sidePaint.setStyle(Paint.Style.STROKE);
                    sidePaint.setColor(Color.parseColor("#9f9f9f"));
                } else {
                    sidePaint.setStyle(Paint.Style.FILL);
                    sidePaint.setColor(Color.parseColor("#e5e5e5"));
                }
            } else {
                sidePaint.setStyle(Paint.Style.STROKE);
                sidePaint.setColor(Color.parseColor("#aeaeae"));
            }
            path.reset();
            float rate = computeRate(i, loopCount);
            for (int j = 0; j < sideCount; j++) {
                float currentX = maxPointList.get(j).getX() * rate;
                float currentY = maxPointList.get(j).getY() * rate;

                // 如果是第一个点,移动到该位置
                if (j == 0) {
                    path.moveTo(currentX, currentY);
                } else {// 否则连接上一个点
                    path.lineTo(currentX, currentY);
                }
            }

            path.close();
            canvas.drawPath(path, sidePaint);

        }
    }

    /**
     * 跟具层数判断位于最大半径的位置
     *
     * @param value
     *            第几层
     * @param max
     *            最大层数
     * @return
     */
    private float computeRate(float value, float max) {
        return value / max;
    }

    /*
     * 画出从中心向各顶点的连线
     */
    private void drawLine(Canvas canvas) {
        Path path = new Path();
        for (int i = 0; i < sideCount; i++) {
            path.reset();
            path.lineTo(maxPointList.get(i).getX(), maxPointList.get(i).getY());
            canvas.drawPath(path, sidePaint);
        }
    }

    /**
     * 绘制传入的数值对应的覆盖区域
     *
     * @param canvas
     */
    private void drawArea(Canvas canvas) {
        if (pointValue == null || pointValue.size() == 0)
            return;
        Path path = new Path();
        for (int i = 0; i < pointValue.size(); i++) {
            if (i == 0) {
                areaPaint.setColor(Color.parseColor("#30b4b8"));
            } else if (i == 1) {
                areaPaint.setColor(Color.parseColor("#60b32f"));
            } else if (i == 2) {
                areaPaint.setColor(Color.parseColor("#ef2a34"));
            }
            path.reset();

            // 如果小于三条边 就从中心点开始连线
            if (sideCount < 3) {
                for (int j = 0; j < sideCount; j++) {
                    float rate = pointValue.get(i).get(j);
                    float currentX = maxPointList.get(j).getX() * rate;
                    float currentY = maxPointList.get(j).getY() * rate;
                    path.moveTo(0, 0);
                    path.lineTo(currentX, currentY);
                }
            } else {// 否则连接各个科目成绩点
                for (int j = 0; j < sideCount; j++) {

                    float rate = pointValue.get(i).get(j);
                    float currentX = maxPointList.get(j).getX() * rate;
                    float currentY = maxPointList.get(j).getY() * rate;
                    if (j == 0) {
                        // 如果是第一个点,移动到该位置
                        path.moveTo(currentX, currentY);
                    } else {
                        // 否则连接这个点和上一个点
                        path.lineTo(currentX, currentY);
                    }
                }
            }

            path.close();
            canvas.drawPath(path, areaPaint);
        }

    }

    /**
     * 绘制文字
     *
     * @param canvas
     */
    private void drawText(Canvas canvas) {
        if (pointName == null || pointName.size() == 0) {
            return;
        }
        for (int i = 0; i < pointName.size(); i++) {
            float currentAngle = i * angle;
            if (currentAngle < 180) {
                float currentX = maxPointList.get(i).getX() * 1.1f;
                float currentY = maxPointList.get(i).getY() * 1.1f;
                canvas.drawText(pointName.get(i),
                        currentX - (textPaint.getTextSize() / 4) * (pointName.get(i).length()), currentY, textPaint);
            } else {// 如果大于180度 就让文字靠左
                float currentX = maxPointList.get(i).getX() * 1.2f;
                float currentY = maxPointList.get(i).getY() * 1.2f;
                canvas.drawText(pointName.get(i),
                        currentX - (textPaint.getTextSize() / 4) * (pointName.get(i).length()), currentY, textPaint);
            }
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
                getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
    }

    /**
     * 判断是否可以绘制 层数大于0,各边上的数值不能为null
     *
     * @return
     */
    private boolean canDraw() {
        if (loopCount <= 0) {
            return false;
        }
        return true;
    }

    public void setTextColor(int color) {
        textPaint.setColor(color);
    }

    public void setTextSize(int size) {
        textPaint.setTextSize(dpToPixel(size));
    }

    public void setAreaColor(int color) {
        areaPaint.setColor(color);
        areaPaint.setAlpha(150);
    }

    public void setSideColor(int color) {
        sidePaint.setColor(color);
    }

    public void setLoopCount(int loopCount) {
        this.loopCount = loopCount;
    }

    public void setSideCount(int sideCount) {
        if (sideCount <= 0)
            sideCount = 7;
        this.sideCount = sideCount;
        angle = 360 / sideCount;
    }

    public void setPointValue(List<List<Float>> pointValue) {
        this.pointValue = pointValue;
    }

    public void setPointName(List<String> pointName) {
        this.pointName = pointName;
    }

    public int getsideCount() {
        return sideCount;
    }

    public int getLoopCount() {
        return loopCount;
    }

    public List<List<Float>> getPointValue() {
        return pointValue;
    }

    public List<String> getPointName() {
        return pointName;
    }

    public static float dpToPixel(float dp) {
        DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
        return dp * metrics.density;
    }

}
attrs文件
<!-- 多边形 -->
    <declare-styleable name="Polygon">
        <attr name="ptitleColor" format="integer" />
        <attr name="titleSize" format="integer" />
        <attr name="sideCount" format="integer" />
        <attr name="loopCount" format="integer" />
    </declare-styleable>

Point类

public class Point {

    private float x;

    private float y;

    public float getX() {
        return x;
    }

    public void setX(float x) {
        this.x = x;
    }

    public float getY() {
        return y;
    }

    public void setY(float y) {
        this.y = y;
    }

    @Override
    public String toString() {
        return "Point{" +
                "x=" + x +
                ", y=" + y +
                '}';
    }

}

推荐阅读更多精彩内容