Android之玩转View（六）：Canvas基础使用和Region模式

请尊重原创，转载请注明出处【tianyl】的博客

关于的Android之玩转View目录

前言

之前说了Android中的Paint，当然，在Android的图像绘制中，除了Paint这个重要的工具类之后，还有一个同样重要的工具类Canvas

从字面意思上理解，Paint是画笔，而Canvas则是画布，一般来讲，我们使用Canvas都是通过onDraw方法里的参数传入的，当然我们也可以自己new一个这样的对象

1 Canvas的基础使用

一般Canvas的使用，需要我们准备Paint对象和Canvas对象

Paint对象处理颜色，粗细，效果等
Canvas对象处理具体绘制的形状（根据面向对象的思想，将绘制方式封装到了Canvas中）

Canvas可以绘制的形状非常多，包含点、线、面（图片，矩形等）

1.1

如下，就是一个画出一条直线的例子

Paint paint = new Paint();paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(10);canvas.drawLine(100, 100, 400, 400, paint);

Android之玩转View（六）：Canvas基础使用和Region模式_第1张图片

1.2

画圆角矩形

Paint paint = new Paint();paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(10);RectF r = new RectF(100, 100, 400, 500);canvas.drawRoundRect(r, 30, 30, paint);

Android之玩转View（六）：Canvas基础使用和Region模式_第2张图片

canvas可绘制的形状还有很多，这里就不一一演示了

2 Region

上面介绍了Canvas中比较基础用法，接着再说说Canvas中一个比较有意思的用法——Region

2.1 Region的基本用法

Region的字面意思是区域的意思，要字面解释这个类的效果比较难，下面通过一个例子说明

//初始化画笔Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);//初始化圆角矩形路径RectF r = new RectF(100, 100, 600, 800);Path path = new Path();float radii[] = {10,10,10,10,10,10,50,60};path.addRoundRect(r, radii, Path.Direction.CCW);//创建一块矩形的区域Region region = new Region(100, 100, 600, 800);//创建一个新的区域，它是上述区域和矩形的交集Region region1 = new Region();region1.setPath(path, region);//区域不能直接绘制，需要使用迭代器RegionIterator iterator = new RegionIterator(region1);Rect rect = new Rect();while (iterator.next(rect)) {    canvas.drawRect(rect, paint);}

效果如下

Android之玩转View（六）：Canvas基础使用和Region模式_第3张图片

下面来对这段代码进行解释

首先初始化画笔和圆角矩形
创建一个矩形区域
获取矩形区域和圆角矩形区域的交集
绘制这个新获得的区域

关于区域的绘制，有点微积分的思想，它是首先将这个区域分割出一个足够大的矩形，然后不断的分割出相对较小的矩形进行绘制

所以我们看到的就是最中间的矩形最大，边缘因为有圆角，所以矩形相对较小，最终达到图中的效果，这就可以实现多张图片叠加的效果

2.2 Region的模式

说到模式，是不是就想到了Xfermode的18种模式？其实Region也有类似的模式，只不过这里没有18种，只有6种

Android之玩转View（六）：Canvas基础使用和Region模式_第4张图片

下面就通过一组图片说明这些模式的含义

首先，我们准备两张图片，左边是src，右边是dst

然后我们将这两张图片进行重叠，原图如下

Android之玩转View（六）：Canvas基础使用和Region模式_第5张图片

然后使用Op中的6种模式绘制出来，效果如下（颜色统一用绿色，线是额外画出来的，真实效果不存在此线）

代码如下

//初始化2个矩形Rect rect1 = new Rect(200,200,500,500);Rect rect2 = new Rect(300,300,600,600);//设置画笔画出提示用的边框线paint.setColor(Color.GREEN);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(2);//绘制二个边框canvas.drawRect(rect1, paint);paint.setColor(Color.BLUE);canvas.drawRect(rect2, paint);//构造两个RegionRegion region1 = new Region(rect1);Region region2= new Region(rect2);region1.op(region2, Region.Op.REPLACE);//修改画笔属性，填充内部paint.setStyle(Paint.Style.FILL);//绘制出对应的效果 RegionIterator it = new RegionIterator(region1);Rect rect = new Rect();while (it.next(rect)) {    canvas.drawRect(rect, paint);}