Flutter實(shí)現(xiàn)支付寶集五福手畫福字功能

更新時(shí)間：2022年01月23日 08:33:21 作者：?jiǎn)慰偛粫?huì)虧待你

支付寶一年一度的集五?；顒?dòng)又開始了，其中包含了一個(gè)功能就是手寫福字，還包括撤銷一筆，清除重寫，保存相冊(cè)等。本文將介紹如何使用Flutter實(shí)現(xiàn)這些功能，感興趣的可以了解一下

需求

包含需求的具體有：

界面隨著用戶手指的滑動(dòng)顯示走過軌跡，也就是對(duì)應(yīng)的筆畫。

點(diǎn)擊清空按鈕可以清除所有的筆畫。

點(diǎn)擊撤銷按鈕可以清除上一步畫過的筆畫。

保存所寫的文字樣式到相冊(cè)。

實(shí)現(xiàn)思路

顯示筆畫軌跡

使用Listener組件對(duì)用戶手指落下、滑動(dòng)和收起的動(dòng)作進(jìn)行監(jiān)聽，在onPointerDown,onPointerMove,onPointerUp3個(gè)監(jiān)聽方法中返回的PointerMoveEvent對(duì)象包含了手指所在的位置坐標(biāo)偏移量localPosition，用戶每次滑動(dòng)時(shí)都會(huì)記錄下軌跡經(jīng)過的坐標(biāo)點(diǎn)，這些坐標(biāo)點(diǎn)連接起來就是一條線。其次，再配合使用CustomPainter進(jìn)行畫布自繪，將所有劃過的點(diǎn)的連接成線使用畫筆繪制在界面上即可。

搜集坐標(biāo)點(diǎn)：

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);
        }
      }
    }
  }
}

撤銷與清空

看到上面的代碼有的人可能會(huì)比較疑惑，繪制時(shí)為什么這么復(fù)雜，還出現(xiàn)了雙重循環(huán)。這就和撤銷功能有關(guān)了，先假設(shè)不需要撤銷功能，其實(shí)我們就可以直接把所有筆畫的點(diǎn)連接到一起進(jìn)行繪制就可以了，但是一旦引入了撤銷功能，就要記錄每一筆筆畫，福字筆畫是13畫，那么理論上是需要記錄13個(gè)筆畫的，才能保證每次撤銷時(shí)都能正常退回上一次畫過的筆跡，所以第一反應(yīng)就是使用集合將每一次筆畫記錄下來。而上面也說了每一個(gè)筆畫其實(shí)也是多個(gè)坐標(biāo)點(diǎn)的集合，所以所有筆畫就是一個(gè)坐標(biāo)點(diǎn)集合的集合，即：

/// 所有筆畫劃線集合
List<List<Offset>> _lines = [];

另外，也不難想到，我們可以輕易通過手指按下和手指手指的方法回調(diào)來區(qū)分筆畫開始和結(jié)束。在兩個(gè)方法中進(jìn)行筆畫的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 = [];
},

而前面說的雙重遍歷這時(shí)也比較好理解了：

第一層循環(huán)是遍歷所有的筆畫，遍歷次數(shù)就是福字的筆畫數(shù)。
第二層循環(huán)是每一個(gè)筆畫包括的好多個(gè)坐標(biāo)點(diǎn)，遍歷出來使用drawLine方法繪制到界面上形成一條線。

這樣在進(jìn)行撤銷操作時(shí),調(diào)用list的removeLast方法移除最后一項(xiàng)再刷新界面就能實(shí)現(xiàn)退回一筆的效果了，清空就是清空筆畫集合。

保存到相冊(cè)

保存相冊(cè)主要是引入了兩個(gè)插件庫：permission_handler和image_gallery_saver，一個(gè)用來獲取存儲(chǔ)權(quán)限，一個(gè)用來保存到相冊(cè)。使用RepaintBoundary組件將畫布包裹起來，并指定key，在點(diǎn)擊保存時(shí)按順序調(diào)用如下方法先獲取截圖后保存即可：

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!);