Android 开发之自定义控件开发-05之蜘蛛网格的绘制

这里绘制的是8个角的蜘蛛网图：

首先我们想初始化一些数据：

/**
     * 初始化画笔
     */
    private void init(){
        /** 绘制网格 */
        radarPaint = new Paint();
        /** 设置为描边 */
        radarPaint.setStyle(Paint.Style.STROKE);
        radarPaint.setColor(Color.RED);

        /** 绘制图形 */
        valuePaint = new Paint();
        valuePaint.setColor(Color.BLUE);
        /** 设置为填充 */
        valuePaint.setStyle(Paint.Style.FILL);
    }

然后定制一些常量

 /** 画笔*/
    private  Paint radarPaint,valuePaint;
    /** 网格最大半径*/
    private float radius;
    /** 中心x */
    private int centerX;
    /** 中心y */
    private int centerY;
    /** */
    private int count=8;
    //计算出每个夹角的度数  angle  Math.PI   返回记录的圆周率π
    // Math.PI*2 直径为2的圆的周长
    private float angle = (float) (Math.PI*2/count);
    /** 数据 */
    private double[] data={2,5,1,6,4,5,3,7};
    /** 最大值 */
    private float maxValue=8;

然后我们开始绘制网格吧：

/**
     * 绘制正多边形
     */
    private void drawPolygon(Canvas canvas){
        Path path = new Path();
        /** 半径分为 设置的份数 这里count为6 ，r是蜘蛛丝之间的间距*/
        float r = radius/(count);
        /** 中心点不用绘制 */
        for(int i=1;i<=count;i++){
            /**当前绘制的半径，根据绘制的第几个来决定 r是radius/count得到的 */
            float curR = r*i;
            /** 重置路径 */
            path.reset();

            for(int j=0;j<count;j++){
                if(j==0){
                    path.moveTo(centerX+curR,centerY);
                }else{
                    //根据半径，计算出蜘蛛丝上每个点的坐标  angle角度  根据角度获取到余弦值Math.cos
                    // centerX 中心点 +
                    /**
                     * 这里记录一个公式  求圆上每个点的位置
                     *  x= centerX + Math.cos(2*Math.PI / 360) * r
                     *  y = centerY+ Math.cos(2*Math.PI / 360) * r;
                     *  centerX 和 centerY 为上面求出来的中心点   r为半径
                     * */
                    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);
        }
    }

然后我们需要对角画直线：

/**
     * 绘制直线
     */
    private void drawLines(Canvas canvas){
        Path path = new Path();
        for(int i=0;i<count;i++){
            path.reset();
            path.moveTo(centerX, centerY);
            /**
             * 这里记录一个公式  求圆上每个点的位置
             *  x= centerX + Math.cos(2*Math.PI / 360) * r
             *  y = centerY+ Math.cos(2*Math.PI / 360) * r;
             *  centerX 和 centerY 为上面求出来的中心点   r为半径
             * */
            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);
    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawPolygon(canvas);
        drawLines(canvas);
        drawRegion(canvas);
    }

下面重写的方法也很重要的：

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        /** 半径    根据View的宽高 获取中心点，设置占用View的90%*/
        radius = Math.min(h,w)/2*0.9f;
        centerX = w /2;
        centerY = h /2;
        super.onSizeChanged(w, h, oldw, oldh);
    }

就到这里了…