手绘板的制作 |
您所在的位置：网站首页 › 橡皮擦的制作 › 手绘板的制作 |
手绘板的制作
|
前言
在上一篇文章「手绘板的制作——手绘(1) 」中，我们完成了手绘的功能，这一篇我们在其基础上来讲讲重置与橡皮擦的功能实现。 在讲具体的功能实现前，我们需要先弄几个文本，用于笔刷、重置、橡皮擦的功能切换，同时把手绘板的功能抽取出来，放到 HandPaintedBoard 类中，大致代码如下，由于大多都是 UI 代码，可以直接初略看看即可，若需要自己实践再进行 copy。 void main() { runApp(const MyHomePage()); } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { final PaintedBoardProvider _paintedBoardProvider = PaintedBoardProvider(); // widget._paintedBoardProvider; @override Widget build(BuildContext context) { return GestureDetector( onPanStart: (details) { _paintedBoardProvider.onStart(details); }, onPanUpdate: (details) { _paintedBoardProvider.onUpdate(details); }, onPanEnd: (details) { print("onPanDown：移动结束"); }, child: CustomPaint( painter: MyPainter(_paintedBoardProvider), size: Size.infinite, ), ); } }至于 stroke.dart、painted_board_provider.dart、my_painter.dart 在 「手绘板的制作——手绘(1) 」中都有，这里就不贴出了。 UI 效果：
然后我们点击三个按钮试试： I/flutter: 点击了笔刷 I/flutter: 点击了重置 I/flutter: 点击了橡皮擦准备工作完成，正文开始！ 重置重置功能其实就是将当前绘画的内容全部清空，而我们用于存储绘画数据的为 PaintedBoardProvider 中的 List _strokes，所以，我们只要将其清空，然后刷下页面即可。 在 PaintedBoardProvider 中添加以下方法： void clearBoard() { _strokes.clear(); notifyListeners(); }然后在点击的地方调用： Expanded( child: GestureDetector( onTap: () { print("点击了重置"); _paintedBoardProvider.clearBoard(); }, child: const Center( child: Text("重置"), ), ),ok，功能完成，就是这么简单，下一个。 橡皮擦关于橡皮擦功能的实现，目前有两种方式： 假清除效果，也就是把画笔颜色改为白色，或者说改为跟画布同一个颜色，然后这样绘画的时候，就会将原有的画笔绘画效果覆盖住，造成一种清除效果的假象。所以这里不建议这样使用，有兴趣的可以自己实现下。真清除效果，也就是把画笔颜色改为透明，然后用画笔进行绘画的时候，当画笔绘画的内容产生交接时，将其 blendMode 改为 clear，就可以把交接处直接清除。下面我们来讲讲真清除效果。 // 获取绘画数据进行绘画 for (final stroke in paintedBoardProvider.strokes) { final paint = Paint() ..strokeWidth = stroke.width ..color = stroke.color ..strokeCap = StrokeCap.round ..style = PaintingStyle.stroke ..blendMode = stroke.isClear ? BlendMode.clear : BlendMode.src; // |
【本文地址】