您的位置: 首页  >  文章  >  自定义控件---图层，画布和canvas

自定义控件---图层，画布和canvas

分类: 文章 • 2024-08-02 11:20:16

一： 概念

图层(Layer)：

        每一次调用canvas.drawXXX系列函数时，都会生成一个新的透明图层来专门来画这个图形，然后按照绘制的顺序覆盖到画布上。调用完方法就覆盖到画布上了。如果我们连续调用五个draw函数，那么就会生成五个透明图层，画完之后依次盖在画布上显示。 

画布(bitmap)：

        每一个画布都是一个bitmap，所有的图像都是画在bitmap上的！

        画布有两种，第一种是view的原始画布，是通过onDraw（Canvas canvas）函数传进来的，其中参数中的canvas就对应的是view的原始画布。 默认只有一个画布。

       另一种是人造画布，通过saveLayer()、new Canvas(bitmap)这些方法来人为新建一个画布。

       一旦调用saveLayer()新建一个画布以后，以后的所有draw函数所画的图像都是画在这个画布上的，只有当调用restore()、resoreToCount()函数以后，才会返回到原始画布上绘制。 

      双缓冲就是创建了新的画布。

Canvas:

      我们可以把Canvas理解成画板，Bitmap理解成透明画纸，而Layer则理解成图层

     每一个draw函数都对应一个图层，在一个图形画完以后，就放在画纸上显示。而一张张透明的画纸则一层层地叠加在画板上显示出来。我们知道画板和画纸都是用夹子夹在一起的，所以当我们旋转画板时，所有画纸都会跟着旋转！当我们把整个画板裁小时，所以的画纸也都会变小了！ 这一点非常重要，当我们利用saveLayer来生成多个画纸时，然后最上层的画纸调用canvas.rotate(30)是把画板给旋转了，所有的画纸也都被旋转30度！这一点非常注意 另外，如果最上层的画纸调用canvas.clipRect()将画板裁剪了，那么所有的画纸也都会被裁剪。唯一能够恢复的操作是调用canvas.revert()把上一次的动作给取消掉！ 但在利用canvas绘图与画板不一样的是，画布的影响只体现在以后的操作上，以前画上去的图像已经显示在屏幕上是不会受到影响的。 

 关系：

一个canvas可以创建多个画布。一个画布又对应多个图层。图层的内容都是绘制到画布上的。

二：saveLayer()
saveLayer()有两个函数：

[java] view plain copy
  1. /** 
  2.  * 保存指定矩形区域的canvas内容 
  3.  */  
  4. public int saveLayer(RectF bounds, Paint paint, int saveFlags)  
  5. public int saveLayer(float left, float top, float right, float bottom,Paint paint, int saveFlags)  
  • RectF bounds：要保存的区域的矩形。
  • int saveFlags：取值有：ALL_SAVE_FLAG、MATRIX_SAVE_FLAG、CLIP_SAVE_FLAG、HAS_ALPHA_LAYER_SAVE_FLAG、FULL_COLOR_LAYER_SAVE_FLAG、CLIP_TO_LAYER_SAVE_FLAG总共有这六个，其中ALL_SAVE_FLAG表示保存全部内容，这些标识的具体意义在其他章节介绍；
第二个构造函数实际与第一个是一样的，只不过是根据四个点来构造一个矩形。 
下面我们来看一下例子，拿xfermode来做下试验，来看看saveLayer都干了什么：

[java] view plain copy
  1. public class XfermodeView extends View {  
  2.     private int width = 400;  
  3.     private int height = 400;  
  4.     private Bitmap dstBmp;  
  5.     private Bitmap srcBmp;  
  6.     private Paint mPaint;  
  7.   
  8.     public XfermodeView(Context context, AttributeSet attrs) {  
  9.         super(context, attrs);  
  10.   
  11.         setLayerType(View.LAYER_TYPE_SOFTWARE, null);  
  12.         srcBmp = makeSrc(width, height);  
  13.         dstBmp = makeDst(width, height);  
  14.         mPaint = new Paint();  
  15.     }  
  16.   
  17.     @Override  
  18.     protected void onDraw(Canvas canvas) {  
  19.         super.onDraw(canvas);  
  20.         canvas.drawColor(Color.GREEN);  
  21.         //创建了一个新的画布，大小就是矩形大小
  22.         int layerID = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);  
  23.         //创建新的图层
  24.         canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  25.         mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));      
  26.         //创建新的图层
  27.         canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  
  28.         mPaint.setXfermode(null); 
  29.         //这之前的绘制都是画在新画布上的
  30.         canvas.restoreToCount(layerID); 
  31.         //恢复到原始画布上绘制 
  32.     }  
  33.   
  34.     // create a bitmap with a circle, used for the "dst" image  
  35.     static Bitmap makeDst(int w, int h) {  
  36.         Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  
  37.         Canvas c = new Canvas(bm);  
  38.         Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);  
  39.   
  40.         p.setColor(0xFFFFCC44);  
  41.         c.drawOval(new RectF(0, 0, w, h), p);  
  42.         return bm;  
  43.     }  
  44.   
  45.     // create a bitmap with a rect, used for the "src" image  
  46.     static Bitmap makeSrc(int w, int h) {  
  47.         Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  
  48.         Canvas c = new Canvas(bm);  
  49.         Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);  
  50.   
  51.         p.setColor(0xFF66AAFF);  
  52.         c.drawRect(0, 0, w, h, p);  
  53.         return bm;  
  54.     }  
  55. }  
这段代码大家应该很熟悉，这是在讲解setXfermode()时的示例代码，但在saveLayer前把整个屏幕画成了绿色，效果图如下：
自定义控件---图层，画布和canvas

那么问题来了，如果我们把saveLayer给去掉，看看会怎样：

[java] view plain copy
  1. protected void onDraw(Canvas canvas) {  
  2.     super.onDraw(canvas);  
  3.     canvas.drawColor(Color.GREEN);  
  4.     canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  5.     mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  6.     canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  
  7.     mPaint.setXfermode(null);  
  8. }  
效果图就变这样了：
自定义控件---图层，画布和canvas

先回顾下Mode.SRC_IN的效果：

在处理源图像时，以显示源图像为主，在相交时利用目标图像的透明度来改变源图像的透明度和饱和度。

当目标图像透明度为0时，源图像就完全不显示。 
再回过来看结果，第一个结果是对的，因为不与圆相交以外的区域透明度都是0，而第二个图像怎么就变成了这屌样，源图像全部都显示出来了。 

（1）saveLayer的绘图流程

这是因为在调用saveLayer时，会生成了一个全新的透明的bitmap，这个bitmap的大小就是我们指定的保存区域的大小

在调用saveLayer后所有的draw操作都是在这个bitmap上进行的。 
所以：

[java] view plain copy
  1. int layerID = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);  
  2. canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  3. mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  4. canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  

saveLayer()

saveLayer()有两个函数：

[java] view plain copy
  1. /** 
  2.  * 保存指定矩形区域的canvas内容 
  3.  */  
  4. public int saveLayer(RectF bounds, Paint paint, int saveFlags)  
  5. public int saveLayer(float left, float top, float right, float bottom,Paint paint, int saveFlags)  
  • RectF bounds：要保存的区域的矩形。
  • int saveFlags：取值有：ALL_SAVE_FLAG、MATRIX_SAVE_FLAG、CLIP_SAVE_FLAG、HAS_ALPHA_LAYER_SAVE_FLAG、FULL_COLOR_LAYER_SAVE_FLAG、CLIP_TO_LAYER_SAVE_FLAG总共有这六个，其中ALL_SAVE_FLAG表示保存全部内容，这些标识的具体意义我们后面会具体讲；
第二个构造函数实际与第一个是一样的，只不过是根据四个点来构造一个矩形。 
下面我们来看一下例子，拿xfermode来做下试验，来看看saveLayer都干了什么：

[java] view plain copy
  1. public class XfermodeView extends View {  
  2.     private int width = 400;  
  3.     private int height = 400;  
  4.     private Bitmap dstBmp;  
  5.     private Bitmap srcBmp;  
  6.     private Paint mPaint;  
  7.   
  8.     public XfermodeView(Context context, AttributeSet attrs) {  
  9.         super(context, attrs);  
  10.   
  11.         setLayerType(View.LAYER_TYPE_SOFTWARE, null);  
  12.         srcBmp = makeSrc(width, height);  
  13.         dstBmp = makeDst(width, height);  
  14.         mPaint = new Paint();  
  15.     }  
  16.   
  17.     @Override  
  18.     protected void onDraw(Canvas canvas) {  
  19.         super.onDraw(canvas);  
  20.         canvas.drawColor(Color.GREEN);  
  21.   
  22.         int layerID = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);  
  23.         canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  24.         mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  25.         canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  
  26.         mPaint.setXfermode(null);  
  27.         canvas.restoreToCount(layerID);  
  28.     }  
  29.   
  30.     // create a bitmap with a circle, used for the "dst" image  
  31.     static Bitmap makeDst(int w, int h) {  
  32.         Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  
  33.         Canvas c = new Canvas(bm);  
  34.         Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);  
  35.   
  36.         p.setColor(0xFFFFCC44);  
  37.         c.drawOval(new RectF(0, 0, w, h), p);  
  38.         return bm;  
  39.     }  
  40.   
  41.     // create a bitmap with a rect, used for the "src" image  
  42.     static Bitmap makeSrc(int w, int h) {  
  43.         Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);  
  44.         Canvas c = new Canvas(bm);  
  45.         Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);  
  46.   
  47.         p.setColor(0xFF66AAFF);  
  48.         c.drawRect(0, 0, w, h, p);  
  49.         return bm;  
  50.     }  
  51. }  
这段代码大家应该很熟悉，这是我们在讲解setXfermode()时的示例代码，但在saveLayer前把整个屏幕画成了绿色，效果图如下：
自定义控件---图层，画布和canvas

那么问题来了，如果我们把saveLayer给去掉，看看会怎样：

[java] view plain copy
  1. protected void onDraw(Canvas canvas) {  
  2.     super.onDraw(canvas);  
  3.     canvas.drawColor(Color.GREEN);  
  4.     canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  5.     mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  6.     canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  
  7.     mPaint.setXfermode(null);  
  8. }  
效果图就变这样了：
自定义控件---图层，画布和canvas

先回顾下Mode.SRC_IN的效果：在处理源图像时，以显示源图像为主，在相交时利用目标图像的透明度来改变源图像的透明度和饱和度。当目标图像透明度为0时，源图像就完全不显示。 
再回过来看结果，第一个结果是对的，因为不与圆相交以外的区域透明度都是0，而第二个图像怎么就变成了这屌样，源图像全部都显示出来了。 

（1）、saveLayer的绘图流程

这是因为在调用saveLayer时，会生成了一个全新的bitmap，这个bitmap的大小就是我们指定的保存区域的大小，新生成的bitmap是全透明的，在调用saveLayer后所有的绘图操作都是在这个bitmap上进行的。 
所以：
[java] view plain copy

  2. //生成新的画布
  3. int layerID = canvas.saveLayer(0, 0, width * 2, height * 2, mPaint, Canvas.ALL_SAVE_FLAG);  
  4. //新的图层绘制目的图像，然后覆盖到新的画布上
  5. canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  6. mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  7. //新的图层绘制原图像，然后覆盖到新的画布上
  8. canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  
在画源图像时，会把之前画布上所有的内容都做为目标图像，而在saveLayer新生成的bitmap上，只有dstBmp对应的圆形，所以除了与圆形相交之外的位置都是空像素。 
这2个绘制都是在新的画布上。然后调用restoreToCount的时候

会把saveLayer所生成的bitmap盖在原来的canvas上面。 
所以此时的xfermode的合成过程如下图所示：
自定义控件---图层，画布和canvas


（2）、没有saveLayer的绘图流程

然后我们再来看第二个示例，在第二个示例中，唯一的不同就是把saveLayer去掉了； 
在saveLayer去掉后，所有的绘图操作都放在了原始View的Canvas所对应的Bitmap上了

只有一个画布

[java] view plain copy
  1. protected void onDraw(Canvas canvas) {  
  2.     super.onDraw(canvas);  
  3.     canvas.drawColor(Color.GREEN);  
  4.     canvas.drawBitmap(dstBmp, 0, 0, mPaint);  
  5.     mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  6.     canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);  
  7.     mPaint.setXfermode(null);  
  8. }  
新图层染成了绿色，然后覆盖到原始画布上，画布就是绿色了

然后新图层再画目的图像上圆形，画完后也覆盖到了原始画布上

所以在应用xfermode来画源图像的时候，目标图像当前Bitmap上的所有图像，也就是整个绿色的屏幕和一个圆形了。

所以这时候源图像的相交区域是没有透明像素的，透明度全是100%，这也就不难解释结果是这样的原因了。 
此时的xfermode合成过程如下：
自定义控件---图层，画布和canvas

由于没有调用saveLayer，所以圆形是直接画在原始画布上的，而当矩形与其相交时，就是直接与原始画布上的所有图像做计算的。 只有一个画布，则每draw一个图像就直接覆盖到的当前画布上了。
所以有关saveLayer的结论来了：
saveLayer会创建一个全新透明的bitmap，大小与指定保存的区域一致，其后的绘图操作都放在这个bitmap上进行。

在绘制结束后，会直接盖在上一层的Bitmap上显示。

画布有多大就只能绘制多大的内容，超出画布的内容绘制不生效

创建新画布的时候，一定要选择适当的大小，屏幕大小的画布很浪费内存。很可能OOM。


相关推荐