使用clipRect()优化OverDraw

之前我们已经详细的分析过clipRect函数了
Android画布剪裁函数clipRect详解
今天我们主要的是针对自定义控件的OverDraw做优化，下面直接上demo，先直观感受一下：

public class OverdrawDemo extends View {
    private Bitmap[] mCards = new Bitmap[3];
    private int[] mIngId = new int[]{R.drawable.icon_a, R.drawable.icon_k, R.drawable.icon_q};
    public OverdrawDemo(Context context) {
        super(context);
        initBitmap();
    }
    public OverdrawDemo(Context context, AttributeSet attrs) {
        super(context, attrs);
        initBitmap();
    }
    public OverdrawDemo(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initBitmap();
    }
    private void initBitmap() {
        Bitmap bitmap = null;
        for (int i = 0; i < mCards.length; i++) {
            bitmap = BitmapFactory.decodeResource(getResources(), mIngId[i]);
//            创建缩放图
            mCards[i] = Bitmap.createScaledBitmap(bitmap, 400, 600, false);
            mCards[i] = bitmap;
        }
        setBackgroundColor(0xffffffff);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        canvas.translate(120, 0);
        for (Bitmap bm : mCards) {
            canvas.translate(120, 0);
            canvas.drawBitmap(bm, 0, 0, null);
        } 
        canvas.restore();
    }
}

从上面的大概知道我们要做的事情，就是将三张图片重叠展示（Activity里面的代码，只是将上面的自定义View展示出来）。其实我们就是模仿扑克游戏里面的扑克牌摆放。那么我们现在将demo运行起来并来看看是否存在过度绘制的情况。
什么是过度绘制以及怎么调试过度绘制

优化前

在上图中，出现了大片的粉丝，甚至还有小片的红色的红色区域。这会直接导致我们应用卡顿。这不是我们想要的，是时候用clipRect来改变这一切了。只是在onDraw的时候稍作改动，就会产生不一样的结果，具体代码如下：

@Override    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        canvas.translate(120, 0);

        for (int i = 0; i < mCards.length; i++) {
            canvas.translate(120, 0);
            canvas.save();
            if (i < mCards.length - 1) {
                canvas.clipRect(0, 0, 120, mCards[i].getHeight());
            }
            canvas.drawBitmap(mCards[i], 0, 0, null);
            canvas.restore();
        }
        canvas.restore();
    }

优化后

其实clipRect函数就是通过巧妙的剪裁和拼接画布，将自定义控件中重叠的部分，做优化处理。
更多关于clipRect的使用技巧