自定义蜘蛛网状图

运行效果：
自定义蜘蛛网状图

绘制分为三步：
1、绘制蜘蛛网格线
2、绘制格中线
3、绘制数据

获取中心点想x，y坐标和半径：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    radius = Math.min(w, h) / 2 * 0.9f;
    centerX = w / 2;
    centerY = h / 2;
    postInvalidate();

    super.onSizeChanged(w, h, oldw, oldh);
}

onDraw()方法：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //绘制蜘蛛网格线
    drawPolygon(canvas);
    //绘制格中线
    drawLine(canvas);
    //绘制数据
    drawRegion(canvas);
}

绘制蜘蛛网格线：

/**
 * 绘制蜘蛛网格线
 * @param canvas
 */
private void drawPolygon(Canvas canvas) {
    Path path = new Path();
    //每一圈之间的间距
  float r = radius / (count);
    for (int i = 1; i <= count; i++) {
        //当前圈半径
    float curR = r * i;
        path.reset();
        for (int j = 0; j < count; j++) {
            if (j == 0) {
                //第一个点
        path.moveTo(centerX + curR, centerY);
            } else {
                //根据半径算出六边形下一个点坐标
         float x = (float) (centerX + curR * Math.cos(angle * j));
                float y = (float) (centerY + curR * Math.sin(angle * j));
                path.lineTo(x, y);
            }
        }
        path.close();
        canvas.drawPath(path, radarPaint);
    }
}

第一个点的坐标为：（centerX+radius,centerY）,下一个点的坐标为：(centerX+radiuscos(α)，centerY+radiussin(α))，第三个点是：(centerX+radiuscos(α2)，centerY+radiussin(α2))。
通过path.lineTo(x，y)连接路径。循环增加半径绘制。
自定义蜘蛛网状图
绘制格中线：

/**
 * 绘制格中线
 * @param canvas
 */
private void drawLine(Canvas canvas) {
    Path path = new Path();
    for (int i = 0; i < count; i++) {
        path.reset();
        path.moveTo(centerX, centerY);
        float x = (float) (centerX + radius * Math.cos(angle * i));
        float y = (float) (centerY + radius * Math.sin(angle * i));
        path.lineTo(x, y);

        canvas.drawPath(path, radarPaint);
    }
}

绘制数据：

/**
 * 绘制数据
 * @param canvas
 */
private void drawRegion(Canvas canvas) {
    Path path = new Path();
    valuePaint.setAlpha(127);
    for (int i = 0; i < count; i++) {
        double percent = data[i] / maxValue;
        float x = (float) (centerX + radius * Math.cos(angle * i) * percent);
        float y = (float) (centerY + radius * Math.sin(angle * i) * percent);
        if (i == 0) {
            path.moveTo(x, centerY);
        } else {
            path.lineTo(x, y);
        }
        //绘制圆点
        canvas.drawCircle(x, y, 10, valuePaint);
    }
    valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawPath(path, valuePaint);
}

自定义蜘蛛网状图

相关推荐