在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();
}到此爲止，整個技能板的繪製已經完成了。接下來的時間，我還會繼續學習自定義控件的使用。希望能夠越來越厲害，加油！！！！