持续创作，加速成长！这是我参与「日新方案 6 月更文应战」的第4天，点击查看活动概况

前语

持续咱们绘图相关华章，这次咱们来看看怎么运用 CustomPaint 完成毛玻璃背景图作用。毛玻璃背景图其实就是将图片源码1688进行必定程度源码编辑器下载的含糊，背景图经过含糊后愈加虚幻，使得前景和后景就会有层次感。比较直接加蒙层的作用像素生存者2来说，毛玻璃看起来愈加好看一些。下面是背景像素工厂图处理前后的比照，咱们的前景图片的透明度并没有改Canvas动，但是canvas下载背景图含糊虚化后，感觉前景愈加显眼了相同。

Flutter 完成背景图片毛玻璃作用
本篇涉及如下内容：

  • 运用 c像素勇士大创造攻略anvas 制作图片。
  • 制作图片时怎么更改图片的填充规模fluttershy。
  • 运用 ImageFilter 含糊图片，完成毛玻璃作用。

运用 canvas 制作图片

Flutter 为 canvas 供给了drawImage 办法用于制作图片，办法界说如下：

void drawImage(Image image, Offset offset, Paint paint)

其间各个参数阐明如下：

  • image：dart:ui 中的 Image 目标，留意不是Widget 中的 Ima像素生存者2ge，因而制作的时分需求将图片资源转化为 ui.Image 目标。下面是转化的示例代码，fillImage 即最终得到的 ui.Image 目标。留意转化需求必定的时间，因而需求运用异步flutter是什么意思 async / await 操作。
Future<void> init() async {
  final ByteData data = await rootBundle.load('images/island-coder.png');
  fillImage = await loadImage(Uint8List.view(data.buffer));
}
Future<ui.Image> loadImage(Uint8List img) async {
  final Completer<ui.Image> completer = Completer();
  ui.decodeImageFromList(img, (ui.Image img) {
    setState(() {
      isImageLoaded = true;
    });
    return completer.complete(img);
  });
  return completer.future;
}
  • offsetflutter是什么意思：制作图片的开始方位。
  • paint：绘图画笔目标，在像素工厂 paint 上能够运用各种处理作用，比如本篇要用到的图片像素画生成器含糊作用。

留意，drawImage 办法无法更改图片制作的区域大小，默认就是按图片的实践尺度制作的，所以如果要想保证全屏的背景图，咱们就需求运用canvas上交另一个制作图片的办法。

更改制作图片的制作规模

F像素勇士大创造攻略lutter 的 canvas 为制作图片供给了一个尺度转化办法，即能够经过指定原制作区域的矩形和方针区域的矩形，将图片某个区域映射到新的矩形框中制作。也就是咱们甚至能够完成制作图片的部分区域。该办法名为 drawImageRect，界说如下：

void drawImageRect(Image image, Rect src, Rect dst, Paint paint)

办法的参fluttershy数比较容易懂源码编程器，flutter开发的app有哪些咱flutter开发的app有哪些们来看看 Flutter 的文档阐明。

Draws the subset源码编程器 of the given image described by the src argument into the canvas in the aflutter翻译xis-aligned rectang像素画生成器lflutter框架e givfluttereden by the dst argument. 翻译：经过 src 参数将给定图片的部分（subset）制作到坐标轴对齐的方针矩形区域内。

下面是咱们将源矩形框设置为实践图片的尺度和一半宽高的比照图，能够看到取一半宽高的只制作了左上角的1/4区域。实践咱们能够定位开始方位来截取部分区域制作。

Flutter 完成背景图片毛玻璃作用

毛玻璃作用完成

毛玻璃作用完成和fluttershy咱们上两篇运用 paint 的flutter翻译 shader特点有点相似，Paint 类供给了一个imageFilte源码之家r特点专门用于图片处理，其间dart:ui 中canvas平台就供给了ui.ImageFilter.blur办法构建含糊作用处理的 ImageFilter目标。办法界说如下：

factory ImageFilter.blur({
  double sigmaX = 0.0, 
  double sigmaY = 0.0, 
  TileMode tileMode = TileMode.clamp 
})

这个办法实践调用的是一个高斯含糊处理器，高斯含糊其实就源码交易平台是运用一个办法将像素点周边指定规模的值进行处理，像素游戏进而完成含糊作用，有爱好的能够自行像素射击百度一下。下面的 sigmaX 和 sigmaY 散布代表横轴方向和纵轴方向的含糊程度，数值越大，含糊程度越凶猛。因而咱们像素冒险世界能够经过这两个参数操控含糊Canvas程度。

return _GaussianBlurImageFilter(
  sigmaX: sigmaX, 
  sigmaY: sigmaY, 
  tileMode: tileMode
);

**留意，这儿 sigmaX 和 sigmaY 不能一起为0，不然会报错！**这儿应该是如果一起为0会导致除0操作。 下面来看整体的制作完成canvas软件代码，如下所示：

class BlurImagePainter extends CustomPainter {
  final ui.Image bgImage;
  final double blur;
  BlurImagePainter({
    required this.bgImage,
    required this.blur,
  });
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    // 含糊的取值不能为0，为0会抛反常
    if (blur > 0) {
      paint.imageFilter = ui.ImageFilter.blur(
        sigmaX: blur,
        sigmaY: blur,
        tileMode: TileMode.mirror,
      );
    }
    canvas.drawImageRect(
      bgImage,
      Rect.fromLTRB(0, 0, bgImage.width.toDouble(), bgImage.height.toDouble()),
      Offset.zero & size,
      paint,
    );
  }

代码其实很短，就是在含糊值不为0的时分，运用 imageFilter 进行含糊处理，然后运用 drawImageRect 办法保证图源码时代片填充溢整个背景。完好代码已经提交至：绘图相关代码，文件名为：blurcanvas英语_image_demo.dart。改换含糊值的作用如下动图所示。

Flutter 完成背景图片毛玻璃作用

总结

本篇介绍了运用 CustomPaint 完成背景图含糊，毛玻璃的作用。要害点在flutter开发的app有哪些于 运用 Paint 目标的 imageFilter特点canvas下载，运用高斯含糊运用到图片上。以后碰到需求含糊背景图的地方就能够直接上canvas上交手用啦！

我是岛上码农，微信公众号同名，这是Flutter 入门与实战的专栏文章，供给体系化的 Flutter 学像素画习文章源码编辑器。对应源码请看这儿flutter翻译：Flutter 入门与实战专栏源码。如有flutter是什么意思问题能够加自己微信沟通，微信号：island-coder。

：觉得有收成请点个赞鼓舞一canvas网页版下！

：收藏文章，方便回看哦！

：谈论沟通，互相进步！