自定义view（画一个LOL能力图表）

在介绍下列的自定义图表的时候，我们先说明一下绘图的三大要素，canvas 翻译叫画布，paint叫画笔，Path对象叫路径，

一、canvas属性：

      ①：canvas画布本身是有一个坐标系的，它决定了view在Windows层的什么位置，其坐标原点在Windows层的左上角，不同于我们代数几何学中的笛卡尔坐标系，Windows层的向右向下移动是累加正数的也就是收，以屏幕左上角为原点，向右向下分别是Windows层的正X轴和正Y轴

绘图坐标系

Canvas的drawXXX方法中传入的各种坐标指的都是绘图坐标系中的坐标，而非Canvas坐标系中的坐标。默认情况下，绘图坐标系与Canvas坐标系完全重合，即初始状况下，绘图坐标系的坐标原点也在View的左上角，从原点向右为x轴正半轴，从原点向下为y轴正半轴。但不同于Canvas坐标系，绘图坐标系并不是一成不变的，可以通过调用Canvas的translate方法平移坐标系，可以通过Canvas的rotate方法旋转坐标系，还可以通过Canvas的scale方法缩放坐标系，而且需要注意的是，translate、rotate、scale的操作都是基于当前绘图坐标系的，而不是基于Canvas坐标系，一旦通过以上方法对坐标系进行了操作之后，当前绘图坐标系就变化了，以后绘图都是基于更新的绘图坐标系了。也就是说，真正对我们绘图有用的是绘图坐标系而非Canvas坐标系。canvas.drawXXX方法具体应该怎么使用，翻这篇博客：http://blog.csdn.net/iispring/article/details/49770651，大神写的很详细

我们要画一个LOL能力表，首先我们只在屏幕上画出这个图表，触摸交互动态更改这个图表上的点留在后续去做。如图所示：

分析一下，这个LOL能力表都有几部分组成：
①：明显的是X，Y横纵坐标；
②：这是一个正七边形，最外层是七组代表能力的汉字
③：其次的骨架是 四层正七边形，用线段围绕起来
④：四层 正七边形的顶点
⑤：七条从原点到正七边形顶点的线段
⑥：代表玩家能力值的红色不规则七边形

要在屏幕上画出一个我们需要的设计效果图，我们需要去做以下几步：

1、自定义一个class去继承view，初始化构造方法，在这里插一句题外话：每一个view的基本都有三个构造方法，
        ①：一个参数的构造方法适用于代码中new实例
        ②：两个参数的构造方法适用于在布局文件中引用这个自定义view
        ③：三个参数的构造方法其实在代码中我们基本不去调用它（简单说它就是指向style属性的id值），在自定义view属性中    这一章中再详细说明。
2、在构造方法中去初始化一些基本的参数

/**
     * 初始化一些固定的数据
     */
    private void initSize(Context context) {
        n = 7;//七边形
        R = Dp2PxF.dp2pxF(context, 100);//半径---dp转换为px TypedValue.applyDismension(TypedValue.COMPLEX_UNIT_DIP,dp参数值,context.getRersources().getDisPlayMetrics())
        intervalCount = 4;//4层
        angle = (float) ((2 * Math.PI) / n);//圆心角 360°除以 边的个数 = 顶点到圆心的对角线夹角 （必须是正几边形）
        //屏幕宽度 ，单位是像素
        intwidthPixels = getResources().getDisplayMetrics().widthPixels;
        //设置控件方向为正方向,初始化view的宽高
        viewWidth = widthPixels;
        viewHeight = widthPixels;
    }

    /**
     * 初始化多边形的所有点，每一圈n个点，共intervalCount圈
     */
    private void initPoints(Context context) {
        //一个集合中每个元素又是一个点集合，有几个多边形就有几个点集合
        pointsArrayList = new ArrayList<>();
        floatx;
        floaty;
        /**
         * 画LOL能力点的逻辑，一共设置了四个层次的能力等级，用for循环表示出来
         * */
        for (int i = 0; i < intervalCount; i++) {
        //创建一个存储点的集合
            ArrayList pointFs = new ArrayList<>();
        /**
         *TODO--每一个层次(每条边)有7个顶点，用for循环表示出来
         * */
            for (intj = 0; j < n; j++) {
                //TODO  每一圈的半径都要按比例减少，
                floatr = R * ((float) (intervalCount - i) / intervalCount);
                /**
                 * 有半径r，有弧度 angle ，用三角函数可以计算出对应这个点的横纵坐标
                 * x = r * cosθ;
                 * y = r * sinθ;
                 *TODO -- 源码要求这个弧度必须逆时针旋转90°，也就是说将弧度减去90°
                 * */
                x = (float) (r * Math.cos(j * angle - Math.PI / 2));
                y = (float) (r * Math.sin(j * angle - Math.PI / 2));
                pointFs.add(new PointF(x, y));
            }
            pointsArrayList.add(pointFs);
        }
    }

    /**
     * 初始化画笔
     */
    private void initPaint(Context context) {
        //画线的笔
        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置线条的宽度
        linePaint.setStrokeWidth(Dp2PxF.dp2px(context, 1f));
        //画文字的笔
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextAlign(Paint.Align.CENTER);//设置文字居中
        textPaint.setTextSize(Dp2PxF.dp2px(context, 14));
        textPaint.setColor(Color.BLACK);
    }
}

       这样呢准备工作就做好了，我们初始化了写文字的笔和画线段的笔，然后一共四层，每层七个顶点的坐标我们也都封装到集合中了，接下来就是画图的工作
首先是重写onMeasure方法，设置view的宽高，也就是调用 setMeasuredDismenSion（宽，高）;

然后就是重写onDraw方法，去画对应的图表：

①：为了展示更好的效果，我们先把画布的原点迁移到屏幕正中间
//把画布的原点移动到控件中心点
canvas.translate(viewWidth/2,viewHeight/2);
②：画多边形的边框，

这个方法中，首先是保存画布canvas在先前的修改部分，canvas.save()，然后设置画笔的类型为填充模式且描边然后实例化Path对象，将前边我们存储的点通过for循环设置给Path ，起点（第一个顶点）用Path.moveTo（x，y），后边的点用path.lineTo（x,y），然后将这条线段设置为闭合环，Path.close();调用画布画路径的方法，传入路径Path和画笔canvas.drawPath（Path，画笔对象），画完以后需要清除Path，Path.reset（）

③：画最外层多边形的框，和七条原点到多边形顶点的线段

④：画玩家能力值的不规则七边形

⑤：画玩家能力值文字说明

由此我们可以推测出，画闭合曲线，canvas.drawPath（Path，画笔）

画线段，canvas.drawLine（起点X，起点Y，终点X，终点Y，画笔）

画文字，canvas.drawText（文字数据，X，Y，画笔）