View绘制系列(12)-Canvas填充绘制

原创
10/26 08:30
阅读数 2.1K

Canvas填充绘制

在前例中我们使用canvas.drawXXX方法绘制填充图形的时候,填充的都是单一颜色,有同学们可能要提出问题啦,你看那个其他绘制软件里面都可以填充图片,我们能不能也填充图片啊?

当然可以,这里就需要介绍下Paint.setShader(Shader shader),通过这个函数我们就可以为画笔设置一个图片填充了,在绘制时利用它就可以绘制图片填充图形了。那么Shader是什么呢?

Shader is the based class for objects that return horizontal spans of colors during drawing. A subclass of Shader is installed in a Paint calling paint.setShader(shader). After that any object (other than a bitmap) that is drawn with that paint will get its color(s) from the shader.

从上述引用我们可以看出,Shader是一个控制绘制期间画笔颜色变化的基类,通常我们可以通过Paint.setShader方法为画笔设置Shader子类对象,这样在绘制过程中画笔就会从Shader子类中取色进行绘制。

要使得画笔使用图片作为填充背景,我们就需要使用Shader的子类-BitmapShader,其用于将Bitmap作为纹理绘制。

一起看下怎么使用吧,定义画笔对象:

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);

res资源中读取图片对象,并对其进行压缩,代码如下:

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.photo);
Bitmap scaledBitmap = scaleBitmap(bitmap,0.2f);

声明BitmapShader对象并设置到画笔内部,代码如下:

BitmapShader bitmapShader = new BitmapShader(scaledBitmap, TileMode.MIRROR, TileMode.MIRROR);
paint.setShader(bitmapShader);

这里BitmapShader的构造函数BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)中,bitmap为要作为纹理的Bitmap对象,tileX为当X轴方向绘制宽度不等于图片宽度时的重复方式,tileYY轴方向绘制高度不等于图片高度的重复方案,tileXtileY的可选取值有:

  • TileMode.CLAMP:超过部分裁剪掉,采用边界外色值绘制

  • TileMode.REPEAT:使用平铺方式填充

  • TileMode.MIRROR:使用对称镜像方式填充

继续上面代码部分,使用canvas绘制一个图形,这里图形宽高均采用放缩后图片宽高,代码如下:

canvas.drawOval(0,0,scaledBitmap.getWidth(),scaledBitmap.getHeight(),paint);

运行效果如下:

呦吼,一不小心发生了圆形头像的一种实现方式。接下来我们来试下TileMode的其他几种填充方式。

TileMode.CLAMP

修改图形宽高为400,400后运行,效果如下:

BitmapShader bitmapShader = new BitmapShader(scaledBitmap, TileMode.CLAMP, TileMode.CLAMP);
canvas.drawOval(0,0,400,400,paint);

TileMode.REPEAT

修改图形宽高为getWidth()getHeight()后运行,效果如下:

BitmapShader bitmapShader = new BitmapShader(scaledBitmap, TileMode.REPEAT, TileMode.REPEAT);
canvas.drawRect(0,0,getWidth(),getHeight(),paint);

TileMode.MIRROR

修改图形宽高为getWidth()getHeight()后运行,效果如下:

BitmapShader bitmapShader = new BitmapShader(scaledBitmap, TileMode.MIRROR, TileMode.MIRROR);
paint.setShader(bitmapShader);
canvas.drawRect(0,0,getWidth(),getHeight(),paint);


本文分享自微信公众号 - 小海编码日记(gh_1f87b8c00ede)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
ede
打赏
1
0 收藏
分享
加载中
您好,请问view绘制是什么原理?是调用openGL的接口画的吗?这样会出现杂牌硬件不绘的问题吗?
10/26 15:28
回复
举报
从调用角度看,View里面调用Canvas接口方法去绘制,进而调用到JNI函数。这里就是调用open gl es进行render的。硬件不绘制这种情况不太了解
10/26 16:05
回复
举报
更多评论
打赏
2 评论
0 收藏
1
分享
返回顶部
顶部