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);

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);

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);
}

效果如下

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

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

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

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

2.2 Region的模式

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

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

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

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

然后使用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);
//构造两个Region
Region 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);
}

补集（DIFFERENCE）
交集（INTERSECT）

并集（UNION）
异或集（XOR）

反转补集（REVERSE_DIFFERENCE）

替换（REPLACE）

3 结尾

关于Canvas的内容还有很多，因为篇幅原因只能放后面补充了

最后编辑于：2019.04.16 23:13:42