flutter手写板2.0 橡皮擦

在实现手写的基础上增加橡皮擦功能
详情见代码

import 'dart:ui';import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as UI;class HandWrittenBoard extends StatefulWidget {///手写笔颜色final Color? painColor;///手写笔宽度final double? paintWidth;///橡皮final double? clearWidth;final double? clearDx;final double? clearDy;///手写笔控制器final HandWrittenBoardController boardController;const HandWrittenBoard({Key? key,this.painColor,this.clearWidth,this.paintWidth,required this.boardController,this.clearDx,this.clearDy}): super(key: key);@override_HandWrittenBoardState createState() => _HandWrittenBoardState();
}class HandWrittenBoardController extends ChangeNotifier {late BuildContext _context;late List<Stroke?> strokes = [];void bindContext(BuildContext context) {_context = context;}Future<UI.Image>? get uiImage {UI.PictureRecorder recorder = UI.PictureRecorder();Canvas canvas = Canvas(recorder);BoardPainter painter = BoardPainter();Size size = _context.size!;painter.paint(canvas, size);return recorder.endRecording().toImage(size.width.floor(), size.height.floor());}void refStrokes(List<Stroke> newValue) {if (strokes != newValue) {strokes = newValue;}notifyListeners();}void clearBoard() {strokes.clear();notifyListeners();}
}class _HandWrittenBoardState extends State<HandWrittenBoard> {List<Stroke> _strokes = [];@overridevoid initState() {super.initState();widget.boardController.bindContext(context);}void _onUpdate(DragUpdateDetails details) {if (isClear) {dx = details.localPosition.dx;dy = details.localPosition.dy;}setState(() {_strokes.last.path.lineTo(details.localPosition.dx, details.localPosition.dy);});widget.boardController.refStrokes(_strokes);}void _start(double startX, double startY) {if (isClear) {dx = startX;dy = startY;}final newStroke = Stroke(color: widget.painColor!,width: widget.paintWidth!,isClear: isClear,);newStroke.path.moveTo(startX, startY);_strokes.add(newStroke);widget.boardController.refStrokes(_strokes);}late double dx = widget.clearDx! + widget.clearWidth! / 2;late double dy = widget.clearDy! - widget.clearWidth! / 2;bool isClear = false;@overrideWidget build(BuildContext context) {return GestureDetector(onPanUpdate: _onUpdate,onPanStart: (details) => _start(details.localPosition.dx,details.localPosition.dy,),onPanDown: (detail) {Rect rect =Rect.fromCenter(center: Offset(dx, dy), width: 50, height: 50);isClear = rect.contains(detail.localPosition);},child: Stack(children: [CustomPaint(painter: BoardPainter(strokes: _strokes,clearWidth: widget.clearWidth,),size: Size.infinite,),Positioned(child: Container(width: widget.clearWidth,height: widget.clearWidth,color: Colors.red,),left: dx - widget.clearWidth! / 2,top: dy - widget.clearWidth! / 2,),],),);}
}class Stroke {final path = Path();final Color color;final double width;final bool isClear;Stroke({this.color = Colors.black,this.width = 4,this.isClear = false,});
}class BoardPainter extends CustomPainter {BoardPainter({this.strokes,this.clearWidth,});final List<Stroke>? strokes;final double? clearWidth;@overridevoid paint(Canvas canvas, Size size) {canvas.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height),Paint()..color = Colors.white,);canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), Paint());for (final stroke in strokes!) {final paint = Paint()..strokeWidth = stroke.isClear ? clearWidth! : stroke.width..color = stroke.isClear ? Colors.transparent : stroke.color..strokeCap = StrokeCap.round..style = PaintingStyle.stroke..blendMode = stroke.isClear ? BlendMode.clear : BlendMode.srcOver;canvas.drawPath(stroke.path, paint);}canvas.restore();}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}

使用示范

import 'package:flitter_okgo/hand_written_board.dart';
import 'package:flutter/material.dart';class HandWrittenBoardPage extends StatefulWidget {@override_TestPageState createState() => _TestPageState();
}class _TestPageState extends State<HandWrittenBoardPage> {HandWrittenBoardController controller = HandWrittenBoardController();@overridevoid initState() {super.initState();}Widget get initFloatingActionButton {return FloatingActionButton(backgroundColor: Colors.grey,elevation: 1,focusElevation: 1,onPressed: () {controller.clearBoard();},child: Icon(Icons.clear),);}@overrideWidget build(BuildContext context) {return Scaffold(floatingActionButton: initFloatingActionButton,floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,appBar: AppBar(title: Text("橡皮擦"),),body: HandWrittenBoard(boardController: controller,clearWidth: 50,paintWidth: 5,painColor: Colors.green,clearDx: 0,clearDy: 200,),);}
}

flutter手写板2.0 橡皮擦相关推荐

【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
文章目录一. 报错信息二. 解决方案三. 备选方案一. 报错信息从网上下载了一个 Flutter 工程代码 , 打开时 , 报如下错误 ; Launching lib\main.dart o ...
Flutter实战 | 从 0 搭建「网易云音乐」APP（五、播放功能逻辑）
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来. 下面是该APP 功能的思维导图: 前期回顾: 1.Flutter实战 | 从 0 搭建「网易云音乐」APP(一.创建 ...
Flutter实战 | 从 0 搭建「网易云音乐」APP（三、每日推荐、推荐歌单）
本系列可能会伴随大家很长时间,这里我会从0开始搭建一个「网易云音乐」的APP出来. 下面是该APP 功能的思维导图: 前期回顾: •Flutter实战 | 从 0 搭建「网易云音乐」APP(一.创建项 ...
Flutter：Navigator2.0介绍及使用
目录 Navigator1.0 Navigator2.0 APP RouteInformationParser RouterDelegate 问题 The Navigator.pages must n ...
Flutter 升级 2.0 填坑指导，带你原地起飞
作者 | 恋猫de小郭责编 | 欧阳姝黎 Flutter 2.0 的发布带来了很多的 break change ,特别是新增加的空声明安全,「相信不少大哥尝鲜之后立马反思自己" ...
Flutter 报错：Could not resolve io.flutter:flutter_embedding_debug:1.0.0-ee76268252c22f5c11e82a7b87423c
报错信息: 解决方法: 打开build.gradle文件buildscript {ext.kotlin_version = '1.3.50'repositories {google()jcenter( ...
Flutter 手写板签名
代码如下: import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'dart ...
Flutter升级3.0
一.升级步骤如下: 以Android Studio为例, 1.在Terminal执行命令 flutter upgrade --force 2.执行 flutter pub upgrade,如果 ...
Flutter Channel stable, 0.0.0-unknown, on Microsoft Windows [Version 10.0.18362.1016]
重装以及到flutter的安装目录执行 git clean -xfd git stash save --keep-index git stash drop git pull flutter doct ...
Flutter 1.0 正式版: Google 的跨平台 UI 工具包
今天我们非常高兴的宣布,Flutter 的 1.0 版本正式发布!Flutter 是 Google 为您打造的 UI 工具包,帮助您通过一套代码同时在 iOS 和 Android 上构建媲美原生体验的 ...

flutter手写板2.0 橡皮擦

flutter手写板2.0 橡皮擦相关推荐

最新文章

热门文章