自定义View03 - Canvas

save/savelayer

Canvas里面牵扯两种坐标系:Canvas自己的坐标系、绘图坐标系,当Canvas画布被创建时,Canvas的坐标系就被创建了,并且此坐标系是固定不变的,就是(0,0)到Canvas的宽高,而我们使用Canvas的平移,旋转等方法时实际上操作的是绘图坐标系
Canvas的坐标系
它就在View的左上角,做坐标原点往右是X轴正半轴,往下是Y轴的正半轴,有且只有一个,唯一不变

绘图坐标系
它不是唯一不变的,它与Canvas的Matrix有关系,当Matrix发生改变的时候,绘图坐标系对应的进行改变,同时这个过程是不可逆的(save和restore方法来保存和还原变化操作),Matrix又是通过我们设置translate、rotate、scale、skew来进行改变的

由于绘图坐标系中Matrix的改变是不可逆的,所以产生了状态栈和Layer栈,它们分别运用于save方法和saveLayer方法,使得绘图坐标系恢复到保存时的状态
状态栈
save、 restore方法来保存和还原变换操作Matrix以及Clip剪裁
也可以通过restoretoCount直接还原到对应栈的保存状态

Layer栈
saveLayer的时候都会新建一个透明的图层(离屏Bitmap-离屏缓冲),并且会将saveLayer之前的一些Canvas操作延续过来
后续的绘图操作都在新建的layer上面进行
当我们调用restore 或者 restoreToCount 时 更新到对应的图层和画布上

正因为save方法不会创建图层,所以当我们使用Xfermode,ColorFilter,Alpha时应当使用saveLayer(刮刮卡效果)

Canvas

  @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        initShader();
        mWidth = getWidth();
        mHeight = getHeight();
    }

    //渐变颜色
    private int[] mGradientColors = {0xffffffff, 0x00000000};
    //渐变位置
    private float[] mGradientPosition = new float[]{0, 1};

//初始化画笔 透明渐变
    private void initShader() {
        mPaint.setShader(new LinearGradient(0, 0, 0, drawSize, mGradientColors, mGradientPosition, Shader.TileMode.CLAMP));
    }


@Override
    protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
    
    //重新开一层,这样不打扰子view的绘制
        int layerSave = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        //因为不能抢夺了子view的绘制,所以上面的canvas.saveLayer新开了一层绘制,然后super.drawChild(canvas, child, drawingTime);可以继续绘制子view
        boolean drawChild = super.drawChild(canvas, child, drawingTime);
        
        //画上部分的透明渐变
        if (position == 0 || (position & topMask) != 0) {
            canvas.drawRect(0, 0, mWidth, drawSize, mPaint);
        }
        //旋转180度,圆心是中间
        //这样不用关心drawRect的上下左右,跟上面的一致就行,
        //画下部分的透明渐变
        if (position == 0 || (position & bottomMask) != 0) {
            int save = canvas.save();
            canvas.rotate(180, mWidth / 2f, mHeight / 2f);
            canvas.drawRect(0, 0, mWidth, drawSize, mPaint);
            //返回原状态了,180度旋转无效
            canvas.restoreToCount(save);
        }

        //旋转270度,圆心是中间
        //这样不用关心drawRect的上下左右,跟上面的一致就行,
        //画左部分的透明渐变
        //注意这里的270是从初始状态上是上下是下开始旋转的
        //也就是
        float offset = (mHeight - mWidth) / 2f;
        if (position == 0 || (position & leftMask) != 0) {
            int saveCount = canvas.save();
            canvas.rotate(270, mWidth / 2f, mHeight / 2f);
            canvas.translate(0, offset);
            canvas.drawRect(0 - offset, 0, mWidth + offset, drawSize, mPaint);
              //返回原状态了
            canvas.restoreToCount(saveCount);
        }

        if (position == 0 || (position & rightMask) != 0) {
            int saveCount = canvas.save();
            canvas.rotate(90, mWidth / 2f, mHeight / 2f);
            canvas.translate(0, offset);
            canvas.drawRect(0 - offset, 0, mWidth + offset, drawSize, mPaint);
             //返回原状态了
            canvas.restoreToCount(saveCount);
        }


        //还原layerSave
        canvas.restoreToCount(layerSave);
        return drawChild;
    }

save

Save函数会保存当前canvas的matrix和Clip信息到stack中,save之后调用 translate,scale,rotate,skew,concat or clipRect,clipPath都会作用于当前Canvas,当调用restore函数时这些操作将被遗忘,会恢复save之前的canvas状态。

但是注意,像drawXXX这种不能被遗忘的,简要的说,就是操作canvas变形的操作可以,但是画的是不行的

saveLayer

翻译:saveLayer函数类似save函数的作用,但调用了saveLayer函数会分配并生成一个屏幕以外的bitmap(意思就是不在原来的bitmap上),之后的所有操作都是在这个新的offscreen bitmap上。
savelayer这是一个非常耗费性能的方法,会导致绘制相同的内容渲染时耗费两倍多的资源。当需要的形状很大时(超屏幕)禁止使用这个方法。当应用一个xfermode ,color filter或者alpha是推荐使用硬件加速会表现更好。

观点1
从上面的这些注释可以推断的是新生成了bitmap,而一个Canvas只能对应一个bitmap(推断),所以调用saveLayer相当于新生成了一个Canvas,新的Canvas有一个默认连接的Bitmap。新生成的Canvas会修改函数中canvas的指向,所以再次利用Canvas调用函数时将作用于新生成的canvas上。(ps:这里描述新生成Canvas只是猜测,也可能是改变了Canvas对Bitmap的引用,说了会新生成一个bitmap,并且所有的操作类似clip都不会影响原来的canvas,clip本来就是对canvas的操作。所以最终很有可能是调用saveLayer改变了Canvas对Bitmap的引用)

调用drawXXX函数生成新的layer最终都会绘制到新生成的bitmap,直到调用restore()函数,新的bitmap会被绘制到原始Canvas的连接的目标上)(可能是bitmap,也可能是前一个Layer)。

这里总结一下:
所有的东西都是绘制在bitmap上的,canvas是一个虚拟的概念,它连接着一个bitmap,东西都绘制在bitmap上,每次调用drawxx函数都生成一个透明图层(layer),最终都会覆盖绘制在bitmap上,经过渲染才显示在屏幕上,Canvas可以比屏幕大很多,但是超出屏幕范围的图像是不会显示出来的,我们也就看不到。
SaveLayer中提到了图层,什么是layer呢?
Canvas 的setBitmap函数上有一段注释:
Specify a bitmap for the canvas to draw into. All canvas state such as layers, filters, and the save/restore stack are reset.
调用setBitmap时,会为canvas连接一个bitmap,所有的canvas的状态类似layers,filters和save/restore 栈都将重置。所以layer是canvas的一种状态,可以保存,它可以承载clip,matrix,图形,颜色等信息,所以每次调用draw方法都会生成一个新的图层layer。调用draw生成的图层最终会覆盖在它所依附的bitmap上。调用restore()、resoreToCount()函数以后,将恢复到Canvas对应的最原始的bitmap上进行绘制。

我们对layer和canvas对应的bitmap有了理解,bitmap可以看成我们平时说的画布,最终的东西都是绘制在这上面的,每次调用drawXXX方法会生成一个新的透明layer,东西被绘制在layer上,然后最终会被绘制在bitmap上。
调用savelayer函数会生成新的Bitmap,所以我认为调用saveLayer会生成一个新的Canvas连接一个新的Bitmap(或者改变了原来Canvas的bitmap的引用指向),然后再调用drawXX函数也会生成新的layer,但这个layer会被绘制到新生成的Bitmap上,其他所有的rotate,clip等操作,都会作用在新的Canvas上(或者新指向的bitmap上),不会影响原始的Canvas(原始bitmap),直到调用restore函数,才会被最终绘制到原始Canvas连接的bitmap上。所以canvas是一个包含了多种状态(clip,matrix等)的类,它有点类似坐标系(规定绘制图形的位置),所有的操作都不会影响已经绘制在上面的图形,会连接一个Bitmap,所有的东西最终都会被绘制在Bitmap上。

讲解了save和savelayer,saveLayerAlpha函数,这里进行canvas状态保存和恢复的详细讲解。

Canvas 调用了translate,scale,rotate,skew,concat or clipRect等变换后,后续的操作都是基于变换后的Canvas,都会受到影响,对于后续的操作很不方便。

Canvas提供了save,saveLayer,saveLayerAlpha,restore,restoreToCount来保存和恢复状态,有了这些函数,我们就可以随时恢复canvas以前的状态,不必担心当前操作对画布造成的影响。

2 保存和恢复状态函数
注意:
Canvas提供的save,saveLayer等保存状态函数还提供了很多flag,类似MATRIX_SAVE_FLAG,CLIP_SAVE_FLAG, ALL_SAVE_FLAG等,默认如果调用没有flag的函数flag默认为 ALL_SAVE_FLAG就是所有的状态都保存,而且新的api把
带有flag的函数都标记成了deprecated,推荐使用不带flag的函数,进行全部特性的保存。

2.1 save函数
Save函数保存当前画布的matrix,clip等信息到一个私有栈中,之后调用translate,scale,rotate,skew,concat or clipRect等操作,当调用restore或者resoreToCount()函数后,save之后对canvas做的操作将被抛弃,会从canvas状态栈中取出画布的状态信息进行恢复。返回getSaveCount的值,没有调用过一次save,getSaveCount值为1。

getSaveCount() ;
获取栈中保存的状态信息的个数,计算方式等于save()的次数减去restore的次数。

调用save函数之后会返回一个saveId,表示应该退栈的位置。

2.2 saveLayer
Save和saveLayer还有一些重载函数,save和savelayer的带saveFlag参数的函数都标注deprecated,所以就不像其他文章一样进行讲解了,用的也不多。

saveLayerAlpha(@Nullable RectF bounds, int alpha)
saveLayerAlpha(float left, float top, float right, float bottom, int alpha)
saveLayer(float left, float top, float right, float bottom, @Nullable Paint paint)
saveLayer(@Nullable RectF bounds, @Nullable Paint paint)
savelayer和saveLayerAlpha函数调用时会生成一个新的bitmap用于绘制,后续的操作都不会对原来的Canvas造成影响。调用restore或者resoreToCount()函数之后,新生成的bitmap最终会绘制到Canvas对应的原始Bitmap上,也会从canvas状态栈中获取状态信息,对canvas进行恢复。返回getSaveCount的值,没有调用过一次save,getSaveCount值为1。

saveLayerAlpha和saveLayer的区别只是saveLayerAlpha指定了新生成的bitmap的透明度,所以后面不会过多讲解saveLayerAlpha

2.3 restore,restoreToCount
restore函数:清除当前画布的matrix/clip状态信息,然后从栈顶取出保存的状态信息应用到画布,调用restore的次数不能超过save的次数。

Save(): 会把当前的画布的状态进行保存,然后放入Canvas状态栈中;
saveLayer()或者saveLayerAlpha: 会把当前画布状态保存放入栈中,会新建一个bitmap,后续的操作都会作用在这个bitmap上,同时可以指定新建bitmap的大小和透明度等。
restore()或restoreToCount: 就会把栈中最顶层的画布状态取出来,并按照这个状态恢复当前的画布,并在这个画布上做画。

saveLayer函数如果rectF为null,有一段注释:
May be null. The maximum size the offscreen render target needs to be (in local coordinates)
如果为null,生成的Bitmap的最大大小将和渲染目标需要大小一样,然而我去拿saveLayer后的canvas的大小是没有变化的,哪位同仁知道这个大小是多少。

推荐使用save,因为save不会新创建bitmap,saveLayer会创建新的bitmap,如果创建的bitmap过大会导致内存泄漏,这点在savelayer函数上有说明,如果一定要使用saveLayer一定要给出确定的大小,防止内存泄漏。

所有的save,saveLayer系列函数都有返回值,返回的是restoreToCount(),也就是调用了save次数。

没有调用任何一次save时的canvas.getSaveCount()的值为1。save,saveLayer,savelayeralpha保存画布信息共用一个栈,所以每次调用save函数getSaveCount函数都会加一,每次调用restore函数getSaveCount函数都会减一。调用restoreToCount(id)则会直接退栈到id标识的canvas状态,此时在其顶部保存的状态信息都已经被弹栈了。

多次调用save函数,可以多次进行restore恢复,restore之后进行绘制,会在当前状态canvas画布上进行绘制,受当前Canvas状态的影响。

重要:
调用save或者saveLayer系列函数是有返回值的,这个返回值就可以作为restoreToCount的函数实参,可以返回到保存之前的画布状态。

例如调用save或者saveLayer后返回saveId为2,那么现在getSaveCount的值应该为3,此时直接调用restoreToCount(2),就可以返回调用save或者saveLayer之前的状态,而且可以保存这个获取到的saveId值,在特定的位置利用restoreToCount(saveId),就可以回到生成这个saveId之前的状态。

总结:
restore ,restoreToCount两个函数都是用于恢复画布,restore直接取保存在栈中的栈顶的画布状态进行恢复,restoreToCount:是对restore的封装,可以直接弹栈直到目标位置的画布状态,当saveCount小于1时会报错。

posted on 2022-12-29 13:54  7m  阅读(29)  评论(0编辑  收藏  举报