如何使用Flutter實現(xiàn)手寫簽名的效果
思路
- 需要監(jiān)聽用戶觸摸的起始點和結(jié)束點日戈，并記錄途經(jīng)點乘盖，這里我使用了
StreamController - 將途經(jīng)點從起始位置到結(jié)束位置繪制出來宣旱，這里用到
CustomPainter
繪制流程
- 獲取觸摸點作為畫筆的起始點
- 手機途經(jīng)點
- 繪制途徑路線
- 結(jié)束觸摸點重置畫筆
具體實現(xiàn)
需要一個Listener用來監(jiān)聽用戶行為，并將這些行為的點添加到StreamController中， 兩個變量
final List _points = []; //承載對應(yīng)的點
final StreamController _controller = StreamController(); //數(shù)據(jù)通信
Widget _buildWriteWidget() {
return Stack(
children: [
Listener( //用來監(jiān)聽用戶的觸摸行為
child: Container(
color: Colors.transparent,
),
onPointerDown: (PointerDownEvent event) {
_points.add(event.localPosition);
_controller.sink.add([_points]); //起始點的記錄
},
onPointerMove: (PointerMoveEvent event) {
_points.add(event.localPosition);
_controller.sink.add([_points]); //添加途經(jīng)點
},
onPointerUp: (PointerUpEvent event) {
_points.add(Offset.zero); //結(jié)束的標(biāo)記
},
),
StreamBuilder(
stream: _controller.stream,
builder: (BuildContext context, AsyncSnapshot snapshot) {
return snapshot.hasData
? CustomPaint(painter: LinePainter(snapshot.data)) //關(guān)聯(lián)數(shù)據(jù)到Painter
: const SizedBox();
}),
Positioned(
bottom: 50,
right: 50,
child: FloatingActionButton(
onPressed: () {
_clear();
},
child: const Icon(Icons.cleaning_services),
))
],
);
}
清除StreamController的內(nèi)容磕诊，重置數(shù)據(jù)
void _clear() {
_points.clear();
_controller.add(null);
}
dispose時釋放StreamController
@override
void dispose() {
_controller.close();
super.dispose();
}
畫筆Painter
class LinePainter extends CustomPainter {
final List<List<Offset>> lines;
final Color paintColor = Colors.black;
final Paint _paint = Paint();
LinePainter(this.lines);
@override
void paint(Canvas canvas, Size size) {
_paint.strokeCap = StrokeCap.round;
_paint.strokeWidth = 5.0;
if (lines.isEmpty) {
canvas.drawPoints(PointMode.polygon, [Offset.zero, Offset.zero], _paint);
} else {
for (int i = 0; i < lines.length; i++) {
for (int j = 0; j < lines[i].length - 1; j++) {
if (lines[i][j] != Offset.zero && lines[i][j + 1] != Offset.zero) {
canvas.drawLine(lines[i][j], lines[i][j + 1], _paint); //繪制相應(yīng)的點
}
}
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
最后
如果想要成為架構(gòu)師或想突破20~30K薪資范疇嗦篱，那就不要局限在編碼冰单，業(yè)務(wù)，要會選型灸促、擴展诫欠，提升編程思維涵卵。此外，良好的職業(yè)規(guī)劃也很重要荒叼，學(xué)習(xí)的習(xí)慣很重要轿偎，但是最重要的還是要能持之以恒，任何不能堅持落實的計劃都是空談被廓。
如果你沒有方向坏晦，這里給大家分享一套由阿里高級架構(gòu)師編寫的《Android八大模塊進階筆記》，幫大家將雜亂嫁乘、零散昆婿、碎片化的知識進行體系化的整理，讓大家系統(tǒng)而高效地掌握Android開發(fā)的各個知識點亦渗。
更多Android可以查看我的個人介紹Ｍ谥睢！法精！
