接下来是初始化函数，在此处我们获取到自定义的颜色及文字参数，并初始化各种画笔，代码比较简单，看注释内容即可

1. private void init(Context context, AttributeSet attrs) {
2. //获取自定义参数值
3. TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.Wave);
4. //自定义颜色和文字
5. color = array.getColor(R.styleable.Wave_color, Color.rgb(41, 163, 254));
6. text = array.getString(R.styleable.Wave_text);
7. array.recycle();
8. //图形及路径填充画笔（抗锯齿、填充、防抖动）
9. mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
10. mPaint.setStyle(Paint.Style.FILL);
11. mPaint.setColor(color);
12. mPaint.setDither(true);
13. //文字画笔（抗锯齿、白色、粗体）
14. textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
15. textPaint.setColor(Color.WHITE);
16. textPaint.setTypeface(Typeface.DEFAULT_BOLD);
17. //闭合波浪路径
18. path = new Path();
19. }

　　接下来是生成波浪线的方法，示意图如下：

波浪生成原理

　　将Path起点移动到最左边粉色点处，然后绘制两个周期的长度的波形(一上一下是一个周期)，每个周期在x轴的跨度为此控件的宽度控制点距波形的轴线的绝对高度是整个控件的3/20，当然想让波形波动幅度大的话这个比例可以随意调整，接下来就用前边讲到的rQuadTo( )来生成闭合的波浪图形，其中mWidth为控件的宽度，mHeight为控件的高度

1. private Path getActionPath(float percent) {
2. Path path = new Path();
3. int x = -mWidth;
4. //当前x点坐标（根据动画进度水平推移，一个动画周期推移的距离为一个周期的波长）
5. x += percent * mWidth;
6. //波形的起点
7. path.moveTo(x, mHeight / 2);
8. //控制点的相对宽度
9. int quadWidth = mWidth / 4;
10. //控制点的相对高度
11. int quadHeight = mHeight / 20 * 3;
12. //第一个周期波形
13. path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
14. path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);
15. //第二个周期波形
16. path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
17. path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);
18. //右侧的直线
19. path.lineTo(x + mWidth * 2, mHeight);
20. //下边的直线
21. path.lineTo(x, mHeight);
22. //自动闭合补出左边的直线
23. path.close();
24. return path;
25. }

　　上边代码所表示的闭合路径如下图

闭合的波浪图形

　　接下来就是重头戏onDraw了

1. @Override
2. protected void onDraw(Canvas canvas) {
3. //底部的字
4. textPaint.setColor(color);
5. drawCenterText(canvas, textPaint, text);
6. //上层的字
7. textPaint.setColor(Color.WHITE);
8. //生成闭合波浪路径
9. path = getActionPath(currentPercent);
10. canvas.clipPath(path);
11. //裁剪成圆形
12. canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mPaint);
13. drawCenterText(canvas, textPaint, text);
14. }

　　这里绘制思路是：在canvas上绘制蓝色的文字 ——>将画布裁剪成波浪形 ——>在波浪形画布上绘制圆 ——>在波浪形画布上绘制文字，这里一定要注意绘制顺序，先绘制的在下部，后绘制的在上部。

　　细心的朋友一定看到了一个函数drawCenterText(canvas, textPaint, text)没错，这个函数就是讲文字绘于控件正中心的方法。有的读者可能一直在使用Canvas.drawText( String text, float x, float y, Paint paint) 这个方法，但是参数中的(x,y)到底是哪个坐标呢，是文字左上角的点的坐标吗?不是的，接下来我们用代码验证一下这个(x,y)到底在文字的哪个部位