先上效果:
small_demo.gif
如何实现
毛玻璃效果
如果只是通过已有的widget实现这个效果, 并不麻烦, 下面的代码足够了
.....
child:BackdropFilter(
filter: ImageFilter.blur(
sigmaX: widget.blurLevel,
sigmaY: widget.blurLevel,
),
child: const Text(' '),
),
随收拾清除毛玻璃效果
这个有点难度, 思路是自定义CustomPaint, 然后在paint函数中绘制手势Path, 再这个过程中, 通过反向选择Path, 绘制毛玻璃效果. 也就是手指touch绘制的地方都不绘制毛玻璃效果, 只有手指没有触摸过的地方才绘制, 这样就实现了这个效果.
这里只贴出主要的代码
先计算出所有手势触摸过的Path总和
var unionDrawPath = Path();
for (final path in paths) {
canvas.drawPath(path, gesturePathPaint);
unionDrawPath = Path.combine(PathOperation.union, unionDrawPath, path);
}
然后是从整体Rect中提出这个unionDrawPath :
final rect = Rect.fromLTWH(0, 0, size.width, size.height);
final imagePath = Path.combine(
PathOperation.difference,
Path()..addRect(rect),
unionDrawPath,
);
最后就是绘制这个imagePath , 也就是要显示毛玻璃效果的区域
canvas.drawImageRect(image!, ....);
