在介绍下列的自定义图表的时候，我们先说明一下绘图的三大要素，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，画笔）
