支付宝集五福手画福字功能（含撤销操作）用Flutter如何实现？

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

今早一觉醒来发现支付宝一年一度的集五福活动又开始了，其中包含了一个功能就是手写福字，还包括撤销一笔，清除重写，保存相册等，那么使用Flutter应该如何实现这些功能呢？

需求

包含需求的具体有：

界面随着用户手指的滑动显示走过轨迹，也就是对应的笔画。
点击清空按钮可以清除所有的笔画。
点击撤销按钮可以清除上一步画过的笔画。
保存所写的文字样式到相册。

实现思路

显示笔画轨迹

使用Listener组件对用户手指落下、滑动和收起的动作进行监听，在onPointerDown,onPointerMove,onPointerUp3个监听方法中返回的PointerMoveEvent对象包含了手指所在的位置坐标偏移量localPosition，用户每次滑动时都会记录下轨迹经过的坐标点，这些坐标点连接起来就是一条线。其次，再配合使用CustomPainter进行画布自绘，将所有划过的点的连接成线使用画笔绘制在界面上即可。

搜集坐标点：

Listener(
  child: Container(
    alignment: Alignment.center,
    color: Colors.transparent,
    width: double.infinity,
    height: MediaQuery.of(context).size.height,
  ),
  onPointerDown: (PointerDownEvent event) {
    setState(() {
      
    });
  },
  onPointerMove: (PointerMoveEvent event) {
    setState(() {
      
    });
  },
  onPointerUp: (PointerUpEvent event) {
    setState(() {
      
    })；
  },
),
复制代码

绘制：

@override
void paint(Canvas canvas, Size size) {
  myPaint.strokeCap = StrokeCap.round;
  myPaint.strokeWidth = 15.0;
  if (lines.isEmpty) {
    canvas.drawPoints(PointMode.polygon, [Offset.zero, Offset.zero], myPaint);
  } else {
    for (int k = 0; k < lines.length; k++) {
      for (int i = 0; i < lines[k].length - 1; i++) {
        if (lines[k][i] != Offset.zero && lines[k][i + 1] != Offset.zero) {
          canvas.drawLine(lines[k][i], lines[k][i + 1], myPaint);
        }
      }
    }
  }
}
复制代码

撤销与清空

看到上面的代码有的人可能会比较疑惑，绘制时为什么这么复杂，还出现了双重循环。这就和撤销功能有关了，先假设不需要撤销功能，其实我们就可以直接把所有笔画的点连接到一起进行绘制就可以了，但是一旦引入了撤销功能，就要记录每一笔笔画，福字笔画是13画，那么理论上是需要记录13个笔画的，才能保证每次撤销时都能正常退回上一次画过的笔迹，所以第一反应就是使用集合将每一次笔画记录下来。而上面也说了每一个笔画其实也是多个坐标点的集合，所以所有笔画就是一个坐标点集合的集合，即：

/// 所有笔画划线集合
List<List<Offset>> _lines = [];
复制代码

另外，也不难想到，我们可以轻易通过手指按下和手指手指的方法回调来区分笔画开始和结束。在两个方法中进行笔画的add和更新。

onPointerDown: (PointerDownEvent event) {
  setState(() {
    _event = event;
    _points.add(_event?.localPosition ?? Offset.zero);
    _lines.add(_points);
  });
},
onPointerMove: (PointerMoveEvent event) {
  setState(() {
    _event = event;
    _points.add(_event?.localPosition ?? Offset.zero);
    _lines.last = _points;
  });
},
onPointerUp: (PointerUpEvent event) {
  setState(() {
    _event = event;
    _points.add(Offset.zero);
    _lines.last = _points;
  });
  _points = [];
},
复制代码

而前面说的双重遍历这时也比较好理解了：

第一层循环是遍历所有的笔画，遍历次数就是福字的笔画数。
第二层循环是每一个笔画包括的好多个坐标点，遍历出来使用drawLine方法绘制到界面上形成一条线。

这样在进行撤销操作时,调用list的removeLast方法移除最后一项再刷新界面就能实现退回一笔的效果了，清空就是清空笔画集合。

保存到相册

保存相册主要是引入了两个插件库：permission_handler和image_gallery_saver，一个用来获取存储权限，一个用来保存到相册。使用RepaintBoundary组件将画布包裹起来，并指定key，在点击保存时按顺序调用如下方法先获取截图后保存即可：

RenderRepaintBoundary boundary =
    key.currentContext!.findRenderObject() as RenderRepaintBoundary;
var image = await boundary.toImage(pixelRatio: 3.0);
ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
_postBytes = byteData?.buffer.asUint8List();
var result = await ImageGallerySaver.saveImage(_postBytes!);
复制代码

完整代码与demo下载

github地址

安卓手机扫码下载