前言
继续我们绘图相关篇章,这次我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果。毛玻璃背景图其实就是将图片进行一定程度的模糊,背景图经过模糊后更加虚幻,使得前景和后景就会有层次感。相比直接加蒙层的效果来说,毛玻璃看起来更加好看一些。下面是背景图处理前后的对比,我们的前景图片的透明度并没有改变,但是背景图模糊虚化后,感觉前景更加显眼了一样。
- 使用 canvas 绘制图片。
- 绘制图片时如何更改图片的填充范围。
- 使用 ImageFilter 模糊图片,实现毛玻璃效果。
使用 canvas 绘制图片
Flutter 为 canvas
提供了drawImage
方法用于绘制图片,方法定义如下:
void drawImage(Image image, Offset offset, Paint paint)
其中各个参数说明如下:
image
:da