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

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

先上效果图：canvas

需求分析

此次的想法是移植自项目中的一个小功能：截屏当前页面，添加涂鸦功能后，分享给第三方APP。分享功能咱们暂不讨论，使用插件能够轻松完成，重点是截屏+涂鸦+图片保存。
具体实现思路是：截取当前屏幕内容，保存至APP缓存目录，涂鸦页面再去读取文件，依然是使用CustomerPaint实现根据用户手势实时绘制，最后将用户涂鸦部分与原图片组合保存至本地。给图片加水印的实现其实就是截屏，由于截取当前屏幕内容实际上也是将Widget转化为byteData再转化为File的过程。缓存

截屏并保存

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

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);
复制代码

须要注意的地方：markdown

记住给RepaintBoundary添加一个key，由于咱们须要经过这个key来找到当前的RenderObject，生成一个RenderRepaintBoundary对象；
image.toByteData(format: format)能够自定义存储格式，通常图片为png格式，可是要注意，若是你的RepaintBoundary包裹的部分没有设置背景色，那么存储出来的图片可能会有背景色缺失的问题，boundary.toImage()并不会自动添加一个你想要的白色背景，这种状况在截取Text的时候会尤为明显。
toImage({double pixelRatio = 1.0})中的pixelRatio参数是能够表面上提升图片清晰度的。为何说是表面上呢？由于这个参数是纯px为单位的，和你的屏幕密度并无关系。以安卓为例，屏幕基础宽高为360px*480px，默认输出也是360px*480px的图片文件；若是你将pixelRatio设置为10，那么你输出的图片文件大小将是3600px*4800px，可是展现这张图的手机屏幕大小并不会改变，图变大了，天然看起来“清晰”了。所以，这个值我建议取window.devicePixelRatio。

Flutter中获取存储路径

咱们能够经过官方插件path_provider来获取APP的内部和外部存储路径：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插件。还有就是存储文件的时候要养成一个好习惯，先判断下父目录是否存在：async

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()方法来绘制路径：ide

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，你会发现，绘制出来的点集合并非无缝链接在一块儿的，看起来就像是虚线同样：oop

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