網站首頁 編程語言 正文
思路
- 需要監聽用戶觸摸的起始點和結束點,并記錄途經點,這里我使用了
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; }
總結
原文鏈接:https://juejin.cn/post/7180186082489663547
相關推薦
- 2022-10-25 Python中切片的詳細操作篇_python
- 2022-11-14 配置iOS?16?屏幕旋轉適配實例詳解_IOS
- 2022-04-08 python實現有效的括號判斷實例代碼_python
- 2023-01-18 pip?search報錯問題及解決_python
- 2022-08-26 Rust+React創建富文本編輯器_React
- 2022-12-29 Kotlin標準函數與靜態方法應用詳解_Android
- 2023-01-09 使用C#?11的靜態接口方法改進?面向約定?的設計方法_C#教程
- 2022-06-25 Python編程批量實現md5加密pdf文件_python
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支