用Flutter实现一个涂鸦和加水印功能

【公众号回复“1024”，送你一个特别推送】

本文涉及的知识点：截图、图片保存、根据用户手势实时绘制canvas

作者：吉原拉面 |链接：

https://www.jianshu.com/p/01d254fc882b

先上效果图：

需求分析

这次的想法是移植自项目中的一个小功能：截屏当前页面，添加涂鸦功能后，分享给第三方APP。分享功能我们暂不讨论，使用插件可以轻松完成，重点是截屏+涂鸦+图片保存。

具体实现思路是：截取当前屏幕内容，保存至APP缓存目录，涂鸦页面再去读取文件，依然是使用CustomerPaint实现根据用户手势实时绘制，最后将用户涂鸦部分与原图片组合保存至本地。给图片加水印的实现其实就是截屏，因为截取当前屏幕内容实际上也是将Widget转化为byteData再转化为File的过程。

截屏并保存

Flutter提供了一个RepaintBoundaryWidget来实现截图的功能，用RepaintBoundary包裹需要截取的部分，RenderRepaintBoundary可以将RepaintBoundary包裹的部分截取出来；然后通过boundary.toImage()方法转化为ui.Image对象，再使用image.toByteData()将image转化为byteData；最后通过File().writeAsBytes()存储为文件对象：

RepaintBoundary(
                      key: _repaintKey,
                      child: Stack(
                        alignment: Alignment.bottomRight,
                        children: <Widget>[
                          Image.asset(
                                'images/food01.jpeg',
                                fit: BoxFit.cover,
                          ),
                          Icon(Icons.translate,),
                        ],
   ),
                )

RenderRepaintBoundary boundary = _repaintKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
File(tempPath).writeAsBytes(pngBytes);

需要注意的地方：

• 记住给RepaintBoundary添加一个key，因为我们需要通过这个key来找到当前的RenderObject，生成一个RenderRepaintBoundary对象；

• image.toByteData(format: format)可以自定义存储格式，一般图片为png格式，但是要注意，如果你的RepaintBoundary包裹的部分没有设置背景色，那么存储出来的图片可能会有背景色缺失的问题，boundary.toImage()并不会自动添加一个你想要的白色背景，这种情况在截取Text的时候会尤其明显。

• toImage({double pixelRatio = 1.0})中的pixelRatio参数是可以表面上提高图片清晰度的。为什么说是表面上呢？因为这个参数是纯px为单位的，和你的屏幕密度并没有关系。以安卓为例，屏幕基础宽高为360px480px， 默认输出也是360px480px的图片文件；如果你将pixelRatio设置为10，那么你输出的图片文件大小将是3600px*4800px，但是展示这张图的手机屏幕大小并不会改变，图变大了，自然看起来“清晰”了。因此，这个值我建议取window.devicePixelRatio。

Flutter中获取存储路径

我们可以通过官方插件path_provider来获取APP的内部和外部存储路径：

• Directory tempDir = await getTemporaryDirectory()，等同于iOS中的NSCachesDirectoryAPI和Android中的getCacheDirAPI；

• Directory externalDir = await getExternalStorageDirectory()，不支持iOS（会抛出UnsupportedError），等同于Android中的getExternalStorageDirectoryAPI；

• Directory

  applicationDir = await getApplicationDocumentsDirectory()，等同于iOS中的NSDocumentsDirectoryAPI和Android中的AppData目录；

要注意的是getExternalStorageDirectory()方法，大多数情况下是访问SDCard路径，因此即使在Android中调用，也要注意权限问题，推荐使用permission_handler插件。   还有就是存储文件的时候要养成一个好习惯，先判断下父目录是否存在：

void _saveImage(Uint8List uint8List, Directory dir, String fileName) async {
  bool isDirExist = await Directory(dir.path).exists();
  if (!isDirExist) Directory(dir.path).create();
  ······
  File(tempPath).writeAsBytes(uint8List);
}

涂鸦

通过GestureDetector包裹需要绘制的区域，收集用户的手势路径信息，通过canvas.drawLine()方法来绘制路径：

List<Offset> points = [];

GestureDetector(
          onPanStart: (details) {
          },
          onPanUpdate: (details) {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
                referenceBox.globalToLocal(details.globalPosition);
            state(() {
              points.add(localPosition);
            });
          },
          onPanEnd: (details) {
          },
        )

for (int i = 0; i < points.length - 1; i++) {
        if (points[i] != null && points[i + 1] != null)
          canvas.drawLine(points[i], points[i + 1], _linePaint);
      }

为什么不直接用canvas.drawPoints()方法呢？
即使将PointMode设置为PointMode.lines，你会发现，绘制出来的点集合并不是无缝连接在一起的，看起来就像是虚线一样：

如果使用PointMode.polygon，确实可以绘制连续的曲线，但是有两个缺点：一是绘制不如drawLine流畅，延迟会大一点，因为暂时的实现方式是用户手指每动一次都会重绘一次，消耗比较大；二是绘制出来的线条不如直接绘制line来得圆润。我之前没有深度考虑drawPoints的一个原因就是延迟太大。以后如果能找到更好的刷新机制，我会尝试使用drawPoints来绘制的。
  
因此我们还是使用drawLine()强行将所有点连接起来。用户绘制完成后，依然是使用RepaintBoundary来保存图片就可以啦～～～

GitHub地址：
https://github.com/yumi0629/FlutterUI/tree/master/lib/scrawl

阅读更多

相信自己，没有做不到的，只有想不到的

在这里获得的不仅仅是技术！

挖掘“好看”的职场逻辑 ☟  ☟ ☟