iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >如何使用Flutter实现手写签名效果
  • 443
分享到

如何使用Flutter实现手写签名效果

flutter 手写签名flutter 签名flutter手写签名效果 2022-12-24 18:12:29 443人浏览 独家记忆
摘要

目录思路绘制流程具体实现画笔Painter总结思路 需要监听用户触摸的起始点和结束点,并记录途经点,这里我使用了StreamController将途经点从起始位置到结束位置绘制出来,

思路

  • 需要监听用户触摸的起始点和结束点,并记录途经点,这里我使用了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时释放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);  //绘制相应的点
          }
        }
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

总结

到此这篇关于如何使用Flutter实现手写签名效果的文章就介绍到这了,更多相关Flutter手写签名效果内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何使用Flutter实现手写签名效果

本文链接: https://www.lsjlt.com/news/175749.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用Flutter实现手写签名效果
    目录思路绘制流程具体实现画笔Painter总结思路 需要监听用户触摸的起始点和结束点,并记录途经点,这里我使用了StreamController将途经点从起始位置到结束位置绘制出来,...
    99+
    2022-12-24
    flutter 手写签名 flutter 签名 flutter手写签名效果
  • 使用canvas怎么实现一个手写签名效果
    这期内容当中小编将会给大家带来有关使用canvas怎么实现一个手写签名效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。HTML代码:<!--手写区-->   &...
    99+
    2023-06-09
  • 如何使用vue实现手写签名功能
    本篇内容介绍了“如何使用vue实现手写签名功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 个人实现截图:安装:npm inst...
    99+
    2023-06-20
  • Unity使用LineRender实现签名效果
    本文为大家分享了Unity制作签名功能的具体代码,供大家参考,具体内容如下 前言:项目中需要做一个签名的功能,同时需要两个两个屏幕进行显示,但是都是在UI上,从网上查了大量资料。 找...
    99+
    2024-04-02
  • 使用vue实现手写签名功能
     个人实现截图: 安装: npm install vue-esign --save 使用: 1.在main.js中引入 import vueEsign from ...
    99+
    2024-04-02
  • 微信小程序如何实现手写签名
    这篇文章主要介绍了微信小程序如何实现手写签名的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何实现手写签名文章都会有所收获,下面我们一起来看看吧。效果wxml<view class=&...
    99+
    2023-07-02
  • 小程序实现手写签名
    本文实例为大家分享了小程序实现手写签名的具体代码,供大家参考,具体内容如下 方法不是我自己写的,但是也忘记最初的原版出自于哪里了,不过搜索下来就是大同小异,我就附上自己实测有效的!可...
    99+
    2024-04-02
  • Vue使用sign-canvas实现在线手写签名的实例
    目录更新日志安装全局方式局部方式效果图: sign-canvas 一个基于 canvas 开发,封装于 Vue 组件的通用手写签名板(电子签名板),支持 pc 端和移动端。 更新...
    99+
    2024-04-02
  • 小程序实现手写板签名
    本文实例为大家分享了小程序实现手写板签名的具体代码,供大家参考,具体内容如下 1.wxss代码 page {     background: #F8F8F8; } .qianmin...
    99+
    2024-04-02
  • Vue怎么使用sign-canvas实现在线手写签名
    这篇文章主要讲解了“Vue怎么使用sign-canvas实现在线手写签名”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue怎么使用sign-canvas实现在线手写签名”吧!效果图:sig...
    99+
    2023-06-30
  • 怎么用JavaScript实现电子签名效果
    本篇内容主要讲解“怎么用JavaScript实现电子签名效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用JavaScript实现电子签名效果”吧!步骤一:创建HTML和CSS首先,我们需...
    99+
    2023-07-05
  • Android Flutter如何实现3D动画效果
    这篇文章主要讲解了“Android Flutter如何实现3D动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android Flutter如何实现3D动画效果”吧...
    99+
    2023-06-29
  • flutter如何实现底部抽屉效果
    小编给大家分享一下flutter如何实现底部抽屉效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下安卓:showModalBottomSheetIOS...
    99+
    2023-06-29
  • 微信小程序实现手写签名
    本文实例为大家分享了微信小程序实现手写签名的具体代码,供大家参考,具体内容如下 本示例具备的功能: 1、笔迹绘制 2、笔迹清空 以下是js代码: var content = null...
    99+
    2024-04-02
  • 小程序实现手写签名功能
    小程序利用canvas实现手写签名,供大家参考,具体内容如下 设置小程序横屏 在page.json或对应页面 .json文件中设置landscape代表固定横屏 "pageOrie...
    99+
    2024-04-02
  • Flutter StaggeredGridView如何实现瀑布流效果
    这篇文章将为大家详细讲解有关Flutter StaggeredGridView如何实现瀑布流效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下在根目录pubspec.yaml文件中添...
    99+
    2023-06-29
  • 微信小程序实现手写签名(签字版)
    本文实例为大家分享了微信小程序实现手写签名的具体代码,供大家参考,具体内容如下 公司近期有个需要用户签名的功能,就用小程序canvas写了个 wxml <view class...
    99+
    2024-04-02
  • Flutter使用NetworkImage实现图像显示效果
    使用 NetworkImage 显示图像 在 GitHub 中,每个成员都有其头像的 URL。您的下一个改进是将该头像添加到Member课程中并在应用程序中显示这些头像。 更新Mem...
    99+
    2024-04-02
  • 怎么使用Android Flutter实现弹幕效果
    本篇内容介绍了“怎么使用Android Flutter实现弹幕效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言需求要点如下:...
    99+
    2023-07-02
  • 如何利用Flutter仿写微信搜索页效果
    目录效果图顶部搜索栏SearchBar 实现细节左边搜索框实现右边取消按钮实现内容的检索内容的传递内容的检索搜索列表实现总结效果图 如上图所示,我们用 Flutter 来仿写搜索页...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作