美文网首页
Android之玩转View(六):Canvas基础使用和Reg

Android之玩转View(六):Canvas基础使用和Reg

作者: tianyl | 来源:发表于2019-04-16 23:13 被阅读0次

请尊重原创,转载请注明出处【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);
}

效果如下


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

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

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

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

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的内容还有很多,因为篇幅原因只能放后面补充了

相关文章

网友评论

      本文标题:Android之玩转View(六):Canvas基础使用和Reg

      本文链接:https://www.haomeiwen.com/subject/ytdwwqtx.html