今早一覺醒來發(fā)現(xiàn)支付寶一年一度的集五福活動(dòng)又開始了攀芯，其中包含了一個(gè)功能就是手寫福字屯断，還包括撤銷一筆，清除重寫侣诺，保存相冊等殖演，那么使用Flutter應(yīng)該如何實(shí)現(xiàn)這些功能呢？
需求
包含需求的具體有：
- 界面隨著用戶手指的滑動(dòng)顯示走過軌跡紧武，也就是對應(yīng)的筆畫剃氧。
- 點(diǎn)擊清空按鈕可以清除所有的筆畫。
- 點(diǎn)擊撤銷按鈕可以清除上一步畫過的筆畫阻星。
- 保存所寫的文字樣式到相冊。
實(shí)現(xiàn)思路
顯示筆畫軌跡
使用Listener組件對用戶手指落下、滑動(dòng)和收起的動(dòng)作進(jìn)行監(jiān)聽妥箕，在onPointerDown,onPointerMove,onPointerUp3個(gè)監(jiān)聽方法中返回的PointerMoveEvent對象包含了手指所在的位置坐標(biāo)偏移量localPosition滥酥，用戶每次滑動(dòng)時(shí)都會記錄下軌跡經(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);
}
}
}
}
}
撤銷與清空
看到上面的代碼有的人可能會比較疑惑，繪制時(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)退回一筆的效果了汗菜，清空就是清空筆畫集合让禀。
保存到相冊
保存相冊主要是引入了兩個(gè)插件庫：permission_handler和image_gallery_saver，一個(gè)用來獲取存儲權(quán)限陨界，一個(gè)用來保存到相冊巡揍。
使用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!);
