Flutter 实现手写签名效果-拓冰企业网站定制

如何使用Flutter实现手写签名的效果思路需要监听用户触摸的起始点和结束点并记录途经点这里我使用了StreamController将途经点从起始位置到结束位置绘制出来这里用到CustomPainter绘制流程获取触摸点作为画笔的起始点手机途经点绘制途径路线结束触摸点重置画笔具体实现需要一个Listener用来监听用户行为并将这些行为的点添加到StreamController中两个变量final List _points []; //承载对应的点final StreamController _controller StreamController(); //数据通信Widget _buildWriteWidget() { return Stack( children: [ Listener( //用来监听用户的触摸行为 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]); //添加途经点 }, onPointerUp: (PointerUpEvent event) { _points.add(Offset.zero); //结束的标记 }, ), StreamBuilder( stream: _controller.stream, builder: (BuildContext context, AsyncSnapshot snapshot) { return snapshot.hasData ? CustomPaint(painter: LinePainter(snapshot.data)) //关联数据到Painter : const SizedBox(); }), Positioned( bottom: 50, right: 50, child: FloatingActionButton( onPressed: () { _clear(); }, child: const Icon(Icons.cleaning_services), )) ], ); }清除StreamController的内容重置数据void _clear() { _points.clear(); _controller.add(null); }dispose时释放StreamControlleroverride void dispose() { _controller.close(); super.dispose(); }画笔Painterclass LinePainter extends CustomPainter { final ListListOffset 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); //绘制相应的点 } } } } } override bool shouldRepaint(covariant CustomPainter oldDelegate) true; }作者Jerry815链接https://juejin.cn/post/7180186082489663547最后如果想要成为架构师或想突破20~30K薪资范畴那就不要局限在编码业务要会选型、扩展提升编程思维。此外良好的职业规划也很重要学习的习惯很重要但是最重要的还是要能持之以恒任何不能坚持落实的计划都是空谈。如果你没有方向这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》帮大家将杂乱、零散、碎片化的知识进行体系化的整理让大家系统而高效地掌握Android开发的各个知识点。相对于我们平时看的碎片化内容这份笔记的知识点更系统化更容易理解和记忆是严格按照知识体系编排的。全套视频资料一、面试合集二、源码解析合集三、开源框架合集欢迎大家一键三连支持若需要文中资料直接点击文末CSDN官方认证微信卡片免费领取↓↓↓

资讯详情

Flutter 实现手写签名效果