在Android的学习之路上，有时看到别人能够轻易的画出漂亮的界面，顿时心生一股膜拜之感。然后就希望自己也能达到这种程度，但是在接下来的日子发现，这个目标似乎有点难实现，尤其是在没有大神带路的情况下，靠自己去摸索。因此，我只能慢慢去学习别人的东西，然后，把它变成自己的。
好了，说这么多废话，回到正题了。本偏博客接下来主要介绍lol手游版的技能熟练度分析板的绘制步骤详情。如下图所示。
要实现这样的一个自定义view，首先得知道其大致的绘制步骤，接下来咱们先来捋一捋。
1.首先把画布的默认原点(左上角)迁移到坐标为x坐标为屏幕宽度一半，y坐标可以自己定义，我这里定义为400.如下所示。
canvas.save();
//移动画布原点到这个位置
canvas.translate(getWidth()/2,400);
canvas.restore();2.绘制最外面那层的多边形。首先得知道这个七边形的七个角的坐标分别是多少，然后利用path.lineTo()方法，把它绘制成一个七边形。
a点坐标：
x坐标：由于是原点，因此其x坐标为0；
y坐标：这个可以自己定义，我这里定义的线条的长度是260。即
private float mLineWidth = 260;因此其坐标为-mLineWidth 。
ps：右下才是正坐标。
b点坐标：
x坐标：a与b之间的夹角弧度是double mAngle = Math.toRadians(360/7)，因此其坐标为Math.sin(mAngle)*mWidth。
y坐标：-Math.cos(mAngle)*mWidth。
c点坐标：
x坐标：c到x坐标线的夹角度数为(360*2/7-90),因此其弧度为double mAngle1 = Math.toRadians(360*2/7-90);坐标为Math.cos(mAngle1)*mWidth
y坐标：Math.sin(mAngle1)*mWidth
d点坐标：
x坐标：d到x坐标线的夹角度数为(360*3/7-90),因此其弧度为double mAngle2 = Math.toRadians(360*3/7-90);坐标为Math.cos(mAngle2)*mWidth
y坐标：Math.sin(mAngle2)*mWidth
ps：efg与dcb坐标对称
e点坐标：
x坐标：-Math.cos(mAngle2)*mWidth
y坐标：Math.sin(mAngle2)*mWidth
f点坐标：
x坐标：-Math.cos(mAngle1)*mWidth
y坐标：Math.sin(mAngle1)*mWidth
g点坐标：
x坐标：-Math.sin(mAngle)*mWidth
y坐标：-Math.cos(mAngle)*mWidth
到此为止，7个点的坐标已经明确了。接下来就是把它再界面上画出来了。初始化一支画笔。Paint mBorderPaint;
mBorderPaint = new Paint();
mBorderPaint.setColor(Color.parseColor("#CF8840"));
mBorderPaint.setAntiAlias(true);
mBorderPaint.setStyle(Paint.Style.FILL);要实现这四个七边形其实很简单，把它们的线长改变成不同长度就ok。然后画笔的颜色也跟着改变，其代码如下：
/**
* 画四个多边形边框
* @param canvas
*/
private void drawBorder(Canvas canvas) {
for(int i =0;i<4;i++){
Path path = new Path();
float mWidth = mLineWidth*(4-i)/4;
mBorderPaint.setColor(mColors[i]);
path.moveTo(0,-mWidth);
path.lineTo((float)Math.sin(mAngle)*mWidth,
-(float)Math.cos(mAngle)*mWidth);
path.lineTo((float)Math.cos(mAngle1)*mWidth,
(float)Math.sin(mAngle1)*mWidth);
path.lineTo((float)Math.cos(mAngle2)*mWidth,
(float)Math.sin(mAngle2)*mWidth);
path.lineTo(-(float)Math.cos(mAngle2)*mWidth,
(float)Math.sin(mAngle2)*mWidth);
path.lineTo(-(float)Math.cos(mAngle1)*mWidth,
(float)Math.sin(mAngle1)*mWidth);
path.lineTo(-(float)Math.sin(mAngle)*mWidth,
-(float)Math.cos(mAngle)*mWidth);
path.close();
canvas.drawPath(path,mBorderPaint);
}
}到这里的话，四个多边形就完全能够展示出来了。
3.画七条线。
画线的话，其实是比较简单的。首先画出第一条线就是原点到a坐标的线，然后旋转360/7角度的画布，重复旋转7次，就可以画出七条大小长度一致的线了。其具体代码如下：
/**
* 画线
* @param canvas
*/
private void drawLine(Canvas canvas) {
canvas.save();
for(int i = 0;i<7;i++){
canvas.drawLine(0,0,0,-mLineWidth,mCenterPaint);
canvas.rotate((float)360/7);
}
canvas.restore();
}4.描字
我这里为了追求方便，直接跟画线的方法一致。也是通过旋转画布的方式进行绘制文字。这样画出来的字，可能效果不是很好看。其代码如下：
/**
* 画字
*/
private void drawText(Canvas canvas) {
canvas.save();
for(int i =0;i<7;i++){
canvas.drawText(mTexts[i],-20,-(mLineWidth+30),mTextPaint);
//画布旋转的角度
canvas.rotate((float)360/7);
}
canvas.restore();
}5.绘制熟练等级进度
这个其实主要是改变mWidth的大小就可以实现这种效果。
//各个类型的不同进度,可以自己随便定义
float mKill = mLineWidth*3/4,mSave = mLineWidth*2/4,mHelp=mLineWidth*4/7,
mPhysisc=mLineWidth*4/9,mMagic=mLineWidth*3/10,mPlague=mLineWidth*5/6,mMoney=mLineWidth*6/7;
/**
* 绘制等级进度
*/
private void drawProcess(Canvas canvas) {
Path path = new Path();
path.moveTo(0,-mKill);
path.lineTo((float)Math.sin(mAngle)*mSave,
-(float)Math.cos(mAngle)*mSave);
path.lineTo((float)Math.cos(mAngle1)*mHelp,
(float)Math.sin(mAngle1)*mHelp);
path.lineTo((float)Math.cos(mAngle2)*mPhysisc,
(float)Math.sin(mAngle2)*mPhysisc);
path.lineTo(-(float)Math.cos(mAngle2)*mMagic,
(float)Math.sin(mAngle2)*mMagic);
path.lineTo(-(float)Math.cos(mAngle1)*mPlague,
(float)Math.sin(mAngle1)*mPlague);
path.lineTo(-(float)Math.sin(mAngle)*mMoney,
-(float)Math.cos(mAngle)*mMoney);
path.close();
canvas.drawPath(path,mProcessPaint);
}6.seekbar是我在主程序布局中的控件，用来控制“击杀”这一技能的熟练度。其实现的代码如下：
/**
* 击杀熟练度
* @param f
*/
public void setKillProcess(float f){
mKill = f*mLineWidth;
//刷新画布
invalidate();
}到此为止，整个技能板的绘制已经完成了。接下来的时间，我还会继续学习自定义控件的使用。希望能够越来越厉害，加油！！！！