前言#

之前说要整合一下我们做出来的效果，我已经弄完了，首先别的不说，工程量比我预想的要多的多，而且踩了不少的坑，尤其是canvas.clipRect的使用上出现了一点问题，所以想趁着下班前简单的写一下对这个api新的理解和使用心得。

正文#

拿出之前的代码：

 @Override
    protected void onDraw(Canvas canvas) {
        if (mRectF == null) {
            mRectF = new RectF();
        }
        // 判断宽高
        int width = getWidth();
        int height = getHeight();

        int paddingLR = width - mCurrentPadding * 2 < minSize ? (width - minSize) / 2 : mCurrentPadding;
        int paddingTB = height - mCurrentPadding * 2 < minSize ? (height - minSize) / 2 : mCurrentPadding;

        mRectF.set(paddingLR, paddingTB, getWidth() - paddingLR, getHeight() - paddingTB);
        // 开始画后面的背景
        mPaint.setColor(mPaintColor);
        // 这里我们使用了clipRect
        canvas.clipRect(mRectF);
        canvas.drawRoundRect(mRectF, mRadius, mRadius, mPaint);
        // 这里是画文字的部分，我们不管
        super.onDraw(canvas);
    }

这个canvas.clipRect()真的有作用吗？在我整合效果的时候，我突然产生了怀疑：

我已经设置了我想要的绘制的RectF区域，我再去裁剪这个区域，有意义吗？明显是多此一举啊。

带着怀疑我注释掉了这行代码，果然效果没有发生一点变化。

但是我们的理解肯定是没有问题的，应该是使用场景发生了问题，于是我又写了一个非常简单的demo：

public class TestView extends View {

    private Paint mPaint;

    public TestView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        RectF rectF = new RectF(50, 50, getWidth() - 50, getHeight() - 50);
        canvas.clipRect(rectF);
        canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher), 0, 0, mPaint);
    }
}

我设置要裁剪的区域是从边缘伸缩50个像素，之后图片从left=0， top = 0，开始画，那么猜测可能会是两种效果：

1、left=0， top=0是根据canvas的大小算的，所以只会画出Bitmap的中间部分。

2、left=0， top=0是根据裁剪后的区域算的，那么Bitmap应该会发生偏移。

看运行的效果图：

这里写图片描述

结果是画出了中心部分。

那么我们就可以得出了结论：

概念
canvas.clipRect 的确是裁剪了我们想要的绘制区域，我们之前的理解正确。

使用
裁剪了区域以后，绘制的left和top仍然是以canvas的大小为准，这样就能实现只绘制图片的某一部分的需求，有点类似ps里面的遮罩效果。

总结#

踩坑了之后对canvas.clipRect的使用场景有了更深的了解，这样就可以实现一个效果了：

一张图片从中心开始，慢慢出现到完整的图片。

大家抽出点时间，自己练习练习吧。