Android贝塞尔曲线运用-圆形水波进度

上此讲了用贝塞尔曲线去做水波显示动画，在最后说了要实现一个圆形水波进度条，那这一篇就说下怎么实现一个圆形水波进度条，先上个图看看效果

要是想这个效果需要掌握上篇说的那些东西外，还需要知道canvas的裁剪知识

范围裁剪

canvas.clipRect()；裁剪出来一个矩形范围

 canvas.clipRect(getWidth()/2-200,getHeight()/2-200,getWidth()/2+200,getHeight()/2+200);
 canvas.drawColor(0xffff0000);

裁剪出来的图如下：

那这时我想在写一段文字上去，代码如下

canvas.clipRect(getWidth()/2-200,getHeight()/2-200,getWidth()/2+200,getHeight()/2+200);
canvas.drawColor(0xffff0000);
canvas.drawText("裁剪矩形区域",100,350,paint);

运行之后发现根本没有这个文字，这是什么原因呢？因为这时候画布只是你裁剪的那段区域，这个字的坐标不在红色区域上所以就显示不出来了，那怎么做才能解决问题呢，看下面：

canvas.save()：保存下画布
canvas.restore()：还原画布

这两个通常配合使用，换句话说就是我们看到的屏幕可以看成一个桌子，canvas是桌子上的画布，我先用在一张画布上裁剪裁剪之后在换一张画布在屏幕上，之后的操作都是在新画布上做的操作。可以看下代码：

 canvas.save();
 canvas.clipRect(getWidth()/2-200,getHeight()/2-200,getWidth()/2+200,getHeight()/2+200);
 canvas.drawColor(0xffff0000);
 canvas.restore();

 canvas.drawText("裁剪矩形区域",100,350,paint);

效果图如下

圆形水波进度的实现

看了上面说的，那接下来的就好理解了，上面裁剪的是矩形，那我只要裁剪出来一个圆形不就行了吗，注意的是，没有直接裁剪一个cycle的api，可以用下面的：

canvas.clipPath()

这个裁剪的形状就多样了，可以用path画出一个圆后进行裁剪，看代码

        canvas.save();
        pathRed.reset();
        pathRed.addCircle(getWidth()/2,getHeight()/2,100, Path.Direction.CW);
        canvas.clipPath(pathRed);
        drawMyPath(15,pathRed,-100);
        canvas.drawPath(pathRed,paintRed);
        canvas.restore();
        canvas.drawCircle(getWidth()/2,getHeight()/2,100,paintRed);

这样就做到了开头说的那个效果了