原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yumi0629/article/details/84382293

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

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

先上效果图:

 

 

需求分析

  这次的想法是移植自项目中的一个小功能:截屏当前页面,添加涂鸦功能后,分享给第三方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为单位的,和你的屏幕密度并没有关系。以安卓为例,屏幕基础宽高为360px*480px, 默认输出也是360px*480px的图片文件;如果你将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来保存图片就可以啦~~~

展开阅读全文

没有更多推荐了,返回首页