Android自定义控件开发入门与实战（12）Canvas

2401_84149368

于 2024-05-12 12:16:38 发布

阅读量378

点赞数 3

分类专栏：程序员文章标签： android java javascript

本文链接：https://blog.csdn.net/2401_84149368/article/details/138751557

版权

程序员专栏收录该内容

291 篇文章 0 订阅

订阅专栏

在使用SurfaceView时，当调用SurfaceHolder.lockCanvas()函数时，也会创建Canvas对象，有关SurfaceView的知识可以参考第十章。

图层与画布

前面讲过Canvas的save()和restore()函数，除了这两个函数以外，还有其他一些函数用来保存和回复画布状态。

saveLayer()函数

saveLayer有两个构造函数：

public int saveLayer(RectF bounds,Paint paint,int saveFlags)

public int saveLayer(float left,float top,float right,float bottom,Paint paint,int saveFlags)

RectF bounds：要保存的区域所对应的举行对象
int saveFlags：取值ALL_SAVE_FLAG表示保存全部内容。别的值之后再讲述。

第二个构造函数其实和第一个一样，只不过它是根据4个点来构造一个矩形的。

下面我们接下来以Xfermode为例，看看saveLayer()函数都做了什么。

我们先使用Xfermode来做一个SRC_IN的效果：

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawColor(Color.GREEN);

int layerId = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);

canvas.drawBitmap(dstBmp, 0, 0, mPaint);

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);

mPaint.setXfermode(null);

canvas.restoreToCount(layerId);

}

在saveLayer之前就用绿色画笔填充了背景，效果如下：

在这里插入图片描述

那么如果这个时候我们把saveLayer函数去掉，会发生什么呢？

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawColor(Color.GREEN);

canvas.drawBitmap(dstBmp, 0, 0, mPaint);

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);

mPaint.setXfermode(null);

}

效果如下：

在这里插入图片描述

这个时候，区域二居然显示出来了，这完全不符合SRC_IN的算法规则呀，为什么会出现这种情况呢？

1、调用saveLayer的绘图流程：

在调用saveLayer()函数时，会生成一块全新的画布，这块画布的大小就是我们所指定的所要保存区域的大小。新生成的画布是完全透明的，在调用saveLayer函数后所有的绘图都在这上面进行。

在利用Xfermode绘图时，会把之前画布上所有的内容都作为目标图像，而在调用saveLayer函数新生成的画布上，只有dstBmp对应的圆形，所以，除与圆形相交之外的位置都是空白像素。

对于Xfermode而言，在绘图完成之后，会把调用saveLayer函数所产生的透明画布覆盖在原来的画布上面，以形成最终的显示结果。

Xfermode的合成过程如下：

在这里插入图片描述

中间的透明画布就是saverLayer()函数自动生成的，最上面的透明图层是通过调用drawBitmap()函数生成的。我们知道，**每次调用canvas.drawXXX系列函数，都会生成一个透明图层来专门绘制这个图形，而每次生成的图层都会叠加到最近的画布上面。**因为我们这里对源图像应用了Xfermode算法，所以在叠加到就近的调用saveLayer()函数生成的画布上时，会进行计算。

正是因为咋使用Xfermode计算时，目标图像是绘制在新建的透明画布上的，所以除图形以外的区域全部都是透明像素，最终显示的结果是正确的。

2、没有saveLayer()函数时的绘图流程

去掉saveLayer后，就不会新建透明画布了，所有的绘图操作就都在原始画布上进行了。

由于先把图形染绿，再绘制了一个圆形，在使用Xfermode时来画源图像的时候，在目标画布上是没有透明像素的，如下所示：

在这里插入图片描述

结论为：

调用saveLayer()函数会产生一块全新的透明画布，大小与指定保存区域大小一致，后面的绘图操作都放在这个画布上进行。绘制结束后，会直接覆盖在原始画布上显示。

画布与图层

下面讲述关于画布(Bitmap)、图层(Layer)和Canvas的概念

图层(Layer)：每次调用canvas.drawXXX系列函数，都会生成一个透明图层专门来绘制这个图形
画布(Bitmap)：每块画布都是一个Bitmap，所有的图像都是画在Bitmap上的。每次调用drawXXX()就会产生一个透明图层来绘制这个图形，绘制完成以后，就覆盖在画布上。这里要注意一点，如果出现人造画布，比如通过new Canvas、saveLayer产生的新图层，尤其是saveLayer，draw的绘制都会在这层新画布上进行，直到最后调用了restore()、restoreToCount()函数以后，才会返回原始画布上进行绘制。
Canvas：Canvas是画布的表现形式，我们所要绘制的任何东西都是利用Canvas来实现的。在代码中，Canvas的生成方式只有一种 new Canvas(Bitmap)，即只能通过Bitmap来生成。无论是原始画布还是人造画布，最后都是通过Canvas画到Bitmap上的，可以把Canvas理解成绘图工具，利用它所封装的绘图函数来绘图。而所要绘制的内容最后是画在Bitmap上的。所以我们利用Canvas.clipXXX系列函数将画布进行裁剪，其实就是把它对应的Bitmap进行裁剪。

saveLayer()和saveLayerAlpha()函数的用法

1、saveLayer()函数的用法

前面的基本都讲了，这边就讲一个问题：新建画布其实是会占一定的内存，比如在1024_768像素的手机，新建一个和手机屏幕一样大的ARGB_8888（每个像素占8bit）画布，占用的存储空间为1024_768*8 = 6.2MB。如果和手机一半大那也有3.1MB，已经很大了，所以这方面一定要选择合适的大小去绘制。

2、saveLayerAlpha()函数

构造函数为：

public int saveLayerAlpha(RectF bounds,Paint paint,int saveFlags)

public int saveLayerAlpha(float left,float top,float right,float bottom,Paint paint,int saveFlags)

相比于saveLayer多了一个alpha参数。

这个函数就是产生一个有透明度的画布咯。也没什么太大的区别，这里就不展示了。

Flag的具体含义

Canvas中有如下几个save系列的函数：

public int save()

public int save(int saveFlag)

public int saveLayer(…)

public int saveLayerAlpha(…)

可以看到flag在很多函数都有用，我们先关注save的两个构造函数和saveLayer的两个构造函数。

我们知道二者的不同之处在于，saveLayer()函数会新建一块画布，而save()函数则不会新建画布。它们都具有Flag，Flag的含义都如下面所示：

在这里插入图片描述

可以看到前三个(ALL_SAVE_FLAG MATRIX_SAVE_FLAG CLIP_SAVE_FLAG)是给save()和saveLayer()用的，其他都是saveLayer专用的。

其实我们在保存前，应该缕清一下我们要保存什么图层信息，一般来说第一个是位置，第二个是大小，在Flag中，MATRIX_SAVE_FLAG对应的是位置信息，CLIP_SAVE_FLAG对应的是大小信息。这是save()和saveLayer()函数所公用的标识。而saveLayer()函数专用的三个标识用于指定saveLayer()函数新建的画布具有哪种特性，而不是保存画布的范畴。

FLAG之MATRIX_SAVE_FLAG

我们知道，canvas.translate(平移)、canvas.rotate(旋转)、canvas.scale(缩放)、canvas.skew(扭曲)，其实都是利用位置矩阵Matrix实现的，而MATRIX_SAVE_FLAG标识仅保存这个位置矩阵，除此之外的其他内容都不会被保存。

有与我在的API 28的 canvas.save()已经是无参函数了，所以就没有示例演示了。

大概就是用save()保存一个画布，然后将该画布旋转个度数画一个矩形，再restore()，画一个矩形，最后就是出现两个矩形并有一定的夹角。

例二是我们在save()对画布进行了裁减并画了颜色，restore()后再画黑色，发现黑色覆盖了原来裁减部分的颜色，这说明了裁减后画布没有恢复，也说明了 MATRIX_SAVE_FLAG只保存位置信息。

FLAG之CLIP_SAVE_FLAG

这个标识的含义是仅仅保存Canvas的裁减信息，对于位置则不管不问。

CLIP_SAVE_FLAG标识只会保存裁减信息，在恢复时也只会恢复画布的裁减信息，除此之外的任何信息（比如画布位置是不会恢复的）
saveLayer()函数在使用Canvas.CLIP_SAVE_FLAG标识时，需要与Canvas.HAS_ALPHA_LAYER_SAVE_FLAG标识一起使用，否则新建画布所在的区域原来的图像被清空。

Flag之FULL_COLOR_LAYER_SAVE_FLAG和HAS_ALPHA_LAYER_SAVE_FLAG

这两个标识都是saveLayer专用的，在使用时一定要关闭硬件加速，因为是API 21之后才支持saveLayer函数的。

HAS_ALPHA_LAYER_SAVE_FLAG 表示新建的画布与上一层画布合成时，不会将上一层画布的内容清空，而是直接覆盖在上一层画布上的。
FULL_COLOR_LAYER_SAVE_FALG 则表示新建的画布在与上一层画布合成时，先将上一层画布的对应的区域清空，再覆盖在上面。

但是两个标识已经：

在这里插入图片描述

被ignored了…所以这里就不再演示了，大致了解他们是什么样的就好了。

Flag之CLIP_TO_LAYER_SAVE_FLAG

这个标识也被弃用了。

大概是在新建Bitmap之前，对Canvas进行裁剪，在Canvas内部的画布被裁剪后，利用saveLayer()函数生成的画布大小与裁剪后的画布大小相同，而且利用canvas.restore()进行恢复时，只会把saveLayer()函数新建画布的内容叠加，而不会把裁剪的Canvas恢复。

在这里插入图片描述

Flag之ALL_SAVE_FLAG

我们一般也只用到这个，它能保存位置信息和裁剪信息。

新建画布在与上一层画布合成时，不清空原画布内容。

恢复画布

恢复画布有两个函数restore() 和 restoreToCount()

restoreToCount()

在保存画布后都会返回一个int型的画布Id值。这个ID值表示当前保存的画布信息的栈层索引。比如，保存在第三层，则返回2。

而restoreToCount()函数表示一直退栈，直到把指定索引的画布信息退出来，之后的栈最上层的画布信息将作为最新的画布。

下面来看一个例子：

我们先绘制4层：

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawColor(Color.GRAY);

int id1 = canvas.save();

canvas.clipRect(0, 0, 800, 800);

canvas.drawColor(Color.RED);

Log.d(TAG, “count:” + canvas.getSaveCount() + " id1:" + id1);

int id2 = canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);

canvas.clipRect(100, 100, 700, 700);

canvas.drawColor(Color.GREEN);

Log.d(TAG, “count:” + canvas.getSaveCount() + " id2:" + id2);

int id3 = (int) canvas.saveLayer(0, 0, getWidth(), getHeight(), mPaint, Canvas.ALL_SAVE_FLAG);

canvas.clipRect(200, 200, 600, 600);

canvas.drawColor(Color.YELLOW);

Log.d(TAG, “count:” + canvas.getSaveCount() + " id3:" + id3);

int id4 = canvas.save();

canvas.clipRect(300,300,500,500);

canvas.drawColor(Color.BLUE);

Log.d(TAG, “count:” + canvas.getSaveCount() + " id4:" + id4);

}

效果如下：

在这里插入图片描述

打印的log如下图：

在这里插入图片描述

可以看出最先绘制的图在栈低，后来的往栈顶走。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
87343616)]

[外链图片转存中…(img-I0UBEd85-1715487343617)]

[外链图片转存中…(img-dVTdFtAw-1715487343618)]

[外链图片转存中…(img-87U7ITQ7-1715487343619)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84149368

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android自定义控件开发入门与实战（12）Canvas

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫