• Flutter笔记：手写一个简单的画板工具

    Flutter笔记
    手写一个简单的画板工具

    作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
    邮箱 ：291148484@163.com
    本文地址：https://blog.csdn.net/qq_28550263/article/details/133418742

    flutter-ljc

    目 录

    1. 任务介绍

    在本文中，我们将一起开发一个基本的Flutter画板应用，用户可以在画板上自由绘制，选择不同的颜色来绘制线条。这个画板应用将允许用户通过点击颜色选择按钮来选择画笔的颜色，并提供鼠标光标支持以增强用户体验。

    任务要求

    1. 创建一个Flutter应用，包含一个画板界面，初始时，画板上没有任何绘制内容。
    2. 实现颜色选择功能，用户可以点击应用栏中的颜色选择按钮，弹出颜色选择对话框，选择绘制颜色。
    3. 支持自由绘制功能，用户可以使用鼠标或触摸屏在画板上自由绘制线条。绘制时，使用所选的颜色。
    4. 当用户在画板上绘制时，应实时显示他们的绘制内容。
    5. 用户可以使用鼠标光标，绘制不同颜色的线条。

    效果预览

    在这里插入图片描述

    预期收获

    任务完成后，你将具备以下技能：

    • Flutter应用开发基础知识。
    • 实现用户界面中的颜色选择和绘制功能。
    • 处理用户输入和手势操作。
    • 自定义绘制，使用自定义绘制器和Canvas API。

    这个任务将有助于您深入了解Flutter应用的开发，以及如何实现一个具有基本绘图功能的用户界面。

    2. 知识点准备

    本文将使用以下知识点，最终实现

    1. MouseRegion: MouseRegion 用于捕获鼠标事件，允许您指定鼠标在其内部时的行为，包括设置鼠标光标的外观（在这里使用了 SystemMouseCursors.click）。

    2. SystemMouseCursors: SystemMouseCursors 是一个用于指定不同系统鼠标光标样式的类。在这里，我们使用了 SystemMouseCursors.click，将鼠标光标设置为点击样式，以提供用户视觉反馈。

    3. GestureDetector: GestureDetector 用于捕获用户手势事件，如拖动手势（onPanUpdate 和 onPanEnd）。它允许您检测用户的绘制动作并触发相应的回调。

    4. CustomPaint: CustomPaint 是一个用于自定义绘制的容器，它接受一个自定义的 CustomPainter 对象。在这里，它用于呈现用户的绘制。

    5. CustomPainter: CustomPainter 是一个抽象类，它包含了用于自定义绘制的方法。在这里，我们创建了 MyPainter 类来实现绘制用户绘制的笔画。

    6. RenderBox: RenderBox 是一个用于获取渲染对象的边界框和坐标的类。在这里，我们使用它来获取鼠标事件的本地坐标，并将其转换为相对于 CustomPaint 的坐标。

    7. Canvas: Canvas 是一个用于绘制 2D 图形的画布。我们使用它在 MyPainter 中绘制用户的笔画。

    8. PointMode：PointMode 类用于指定如何绘制点的枚举类。在画板应用中，它有两种可能的值：

      • PointMode.points: 这个模式用于绘制单个点。当用户在画板上点击并松开鼠标时，将使用此模式来绘制点，以实现单击绘制的效果。
      • PointMode.polygon: 这个模式用于绘制连接的线条。当用户在画板上拖动鼠标时，将使用此模式来绘制连接的线条，以实现绘制笔画的效果。

      PointMode 通过 canvas.drawPoints 方法在 CustomPainter 中使用，用于指定如何绘制用户的绘制。对于单击，我们使用 PointMode.points 来绘制点，而对于笔画，我们使用 PointMode.polygon 来绘制连接的线条。
      该类包含在dart:ui库中。

    9. flutter_colorpicker 模块：这是一个选择颜色的第三方模块，你可以参考其官方文档

    3. 代码实现与效果

    import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DrawingBoard(),
    );
  }
}

/// 画板应用的主页 [StatefulWidget]。
class DrawingBoard extends StatefulWidget {
  const DrawingBoard({super.key});

  @override
  State<DrawingBoard> createState() => _DrawingBoardState();
}

/// [DrawingBoard] 的状态类，负责管理用户绘制的功能和界面。
class _DrawingBoardState extends State<DrawingBoard> {
  List<DrawObject> drawObjects = [];
  Color selectedColor = Colors.black;
  bool isFirstDraw = true;

  /// 显示颜色选择对话框的方法。
  void selectColor() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        Color newColor = selectedColor;
        return AlertDialog(
          title: const Text('选择颜色'),
          content: SingleChildScrollView(
            child: ColorPicker(
              pickerColor: selectedColor,
              onColorChanged: (color) {
                newColor = color;
              },
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                setState(() {
                  selectedColor = newColor;
                });
                Navigator.of(context).pop();
              },
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // 创建一个鼠标光标，使用Icons.draw_outlined图标
    const mouseCursor = SystemMouseCursors.click;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Jack Lee 的画板'),
        actions: [
          IconButton(
            icon: const Icon(Icons.color_lens),
            onPressed: () {
              selectColor();
            },
          ),
        ],
      ),
      body: MouseRegion(
        cursor: mouseCursor, // 使用自定义光标
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              RenderBox renderBox = context.findRenderObject() as RenderBox;
              final offset = renderBox.globalToLocal(details.localPosition);
              if (isFirstDraw) {
                drawObjects.add(DrawObject([], selectedColor));
                isFirstDraw = false;
              }
              if (drawObjects.isNotEmpty) {
                drawObjects.last.points.add(offset);
              }
            });
          },
          onPanEnd: (details) {
            setState(() {
              drawObjects.add(DrawObject([], selectedColor));
              isFirstDraw = true;
            });
          },
          child: CustomPaint(
            painter: MyPainter(drawObjects),
            size: Size.infinite,
          ),
        ),
      ),
    );
  }
}

/// 自定义画板的绘制器 [CustomPainter]。
class MyPainter extends CustomPainter {
  final List<DrawObject> drawObjects;

  MyPainter(this.drawObjects);

  @override
  void paint(Canvas canvas, Size size) {
    for (final drawObject in drawObjects) {
      final paint = Paint()
        ..color = drawObject.color
        ..strokeCap = StrokeCap.round
        ..strokeWidth = 5.0;

      if (drawObject.points.length > 1) {
        for (int i = 0; i < drawObject.points.length - 1; i++) {
          if (drawObject.points[i] != null &&
              drawObject.points[i + 1] != null) {
            canvas.drawLine(
                drawObject.points[i]!, drawObject.points[i + 1]!, paint);
          }
        }
      } else if (drawObject.points.isNotEmpty) {
        canvas.drawPoints(
            PointMode.points, drawObject.points.cast<Offset>(), paint);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

/// 用户绘制的对象类，包括点和颜色。
class DrawObject {
  final List<Offset?> points;
  final Color color;

  DrawObject(this.points, this.color);
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155

    效果如图所示：

    在这里插入图片描述

  • 相关阅读:
    LVS集群-DR模式【部署高可用LVS-DR集群】
    开发知识点-Vue-Electron
    哈希函数与哈希一致性
    太刺激了，这份阿里P8大牛出品的架构宝典，助你打开架构师大门
    什么是响应式网页设计，解释响应式网页设计的原理和优势
    Github Actions 自动同步到 Gitee
    Chapter 4 k-近邻算法与朴素贝叶斯
    【web自动化】（八）cookie复用
    C语言——一些字符串函数的模拟实现
    Leetcode 503.下一个更大元素Ⅱ
  • 原文地址：https://blog.csdn.net/qq_28550263/article/details/133418742