Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片


theme: cyanosis

前言

光阴似箭,《Flutter 绘制指南 - 妙笔生花》 转眼间已经发布两年半了,不知道各位练习得怎么样。有不少朋友问过如何将 Canvas 绘制的内容保存为图片,最近在做的东西刚好涉及了这块,通过本文来分享一下。

提到保存图片,很多人可能会想到 RepaintBoundary, 但它使用起来有点繁琐,同时也存在一些局限性。而且 Canvas 有更灵活的生成图片方式,没有必要使用 RepaintBoundary,下面一起来看看吧!


1. 自己创建 Canvas 对象

如果我问:

如何得到 Canvas 对象,来进行绘制操作?

可能绝大多数朋友都知道继承自 CustomPainter,在 paint 回调中获取 Canvas 对象,它是在 Flutter 框架中创建的。你有没有想过,我可不可以自己创建一个 Canvas 对象呢?

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第1张图片


实例化对象,最重要的是 构造方法,可以进入 Canvas 源码中瞄一眼。 可以看到它有一个构造方法,说明允许外界进行实例化。其中必须传入一个 PictureRecorder 对象;

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第2张图片

PictureRecorder 类有无参构造,这样就为我们自己创建 Canvas 对象提供了可能性,代码如下:

dart void createCanvas(){ PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); }


2. 得到 Picture 对象

可能很少人知道 Picture 对象,但它在框架层渲染机制中的出场率挺高,看过渲染小册的应该知道它。 通过PictureRecorder#endRecording 可以得到 Picture 对象,期间 Canvas 绘制的内容将被 记录Picture 中。比如下面绘制了 100*100 尺寸的蓝色盒子:

```dart import 'dart:ui' as ui;

void createCanvas(){ PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); Size boxSize = const Size(100, 100); canvas.drawRect(Offset.zero&boxSize, Paint()..color=Colors.blue); Picture picture = recorder.endRecording(); } ```


生成图片的核心方法是 PicturetoImage 方法,可以异步生成 ui.Image 对象:

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第3张图片


3. 存储图片

有了 ui.Image 对象,就可以得到图片的字节数组,存入到文件中即可:这里在 Windows 中测试的,其他平台也是类似。

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第4张图片

``` import 'dart:ui' as ui;

void createCanvas() async{ PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); Size boxSize = const Size(100, 100); canvas.drawRect(Offset.zero&boxSize, Paint()..color=Colors.blue); Picture picture = recorder.endRecording(); ui.Image image = await picture.toImage(boxSize.width.toInt(), boxSize.height.toInt()); // 获取字节,存入文件 ByteData? byteData = await image.toByteData(format:ImageByteFormat.png ); if(byteData!=null){ File file = File(r"E:\Temp\desk\box.png"); file.writeAsBytes(byteData.buffer.asUint8List()); } } ```


通过这种方式绘制生成图片,好处是可以自由操作 Canvas 的绘制内容,而且必依赖于组件,只要在任何需要的地方触发方法即可。如下所示,在 FloatingActionButton 中触发 createCanvas 方法即可保存图片。

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第5张图片

另外,这种方式还有另一个很大的优势,可以通过 canvas 的操作让图片放大,获得非常大尺寸的图片。比如将绘制内容放大 100 倍存储,这是 RepaintBoundary 无法做到的。还有 RepaintBoundary 无法获取到没有渲染到的内容,无法做到长屏图片的生成。而掌握 Canvas 我们可以控制一切。


4. CustomPainter 与 PictureRecorder

上面说了,可以在不显示的情况下将画板内容保存为图片。但很多时候,我们会通过 CustomPainter 先画出来,这时候如何通过保存 CustomPainter 类中绘制的内容呢?比如这里也就就有一个 ShapePainter,是一个 100*100 尺寸的蓝色盒子,上面放着半径 40 的红色边线圆:

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第6张图片

现在想要点击按钮,将 ShapePainter 的绘制内容保存起来,该怎么办呢?在生成图片的地方再写一遍绘制逻辑吗?

``` class ShapePainter extends CustomPainter {

@override void paint(Canvas canvas, Size size) { Paint paint = Paint()..color = Colors.blue; canvas.drawRect(Offset.zero & size,paint ); paint..style=PaintingStyle.stroke..color=Colors.redAccent..strokeWidth=2; canvas.drawCircle(Offset(size.width/2 , size.height/2),40, paint); }

@override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } } ```


其中仔细思考一下,上图红框的区域 canvas 的操作在 Picture 中留下 "痕迹",而 CustomPainter 正好有个方法,可以操作一个 canvas 对象,于是乎:将 ShapePainter 作为成员变量,可以通过 _painter#paint 方法去操作自己创建的 Canvas 对象,从而在 Picture 中留下对应的 "痕迹"

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第7张图片

```dart // 作为成员变量 ShapePainter _painter = ShapePainter();

void createCanvas() async { PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); Size boxSize = const Size(100, 100); // 通过 _painter 对象操作 canvas _painter.paint(canvas, boxSize); Picture picture = recorder.endRecording(); //略同... } ```

这里想说明一点: paint 虽然是 ShapePainter 类中覆写的方法,它会在框架中某些时机被触发(俗称回调)。但它本身仍是该对象的成员方法,可以通过对象来调用。不要固化思维,觉得回调的方法一定要等着被底层调用。

这样,任何的 CustomPainter 实现类都可以很容易地通过 PictureRecorder->Canvas->Picture 这套组合拳生成图片来保存:

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第8张图片


5. 绘制永无止境

绘制本身是一个创造过程,而创造是没有上限的。将 Canvas 保存为图片,可以让你创造的、在界面上的呈现物,转化为可传输的图片资源。让它可以脱离 Flutter 绘制体系,通过图片展示在任何设备屏幕上。通过 Canvas 绘制可以完成很多事:

比如,通过 绘制+手势 可以操作图片,进行裁剪图像,最终根据矩形区域使用上面的方式,将选取的局部图片绘制到自己创建的画板上,保存为图片。

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第9张图片

另外,截图、图片编辑器也少不了绘制的技能,箭头、基本图形、文字都是在图片之上绘制的内容。最终保存图片时也都可以使用上面的方式。

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第10张图片

最后,比如掘金的这种分享的卡片图片,也可以通过绘制来处理,分享时本质上是分享图片。保存图片也是上面 PictureRecorder->Canvas->Picture 这套组合拳。

Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片_第11张图片


总的来看, Canvas 保存成图片的过程非常简单,也就十几行代码。但对于很多人来说,不知道就做不出来,让更多人知道一些力所能及知识,这也是分享的意义所在。希望本文可以在你想要保存绘制成图片时,对你有所帮助。那本文就到这里,谢谢观看 ~

本文正在参加「金石计划」

你可能感兴趣的:(flutter,ui,android,ios)