如何在Flutter中开发支持绘制线条图形的绘图应用用于农场管线标注

核心实现基于你已经掌握的CustomPaint + GestureDetector组合，补充几何图形的状态记录、绘制逻辑即可，无需额外引入第三方依赖。

1. 定义绘制数据结构 #

首先统一存储所有绘制元素的类型、坐标、样式参数：

// 图形类型枚举
enum DrawShapeType { line, rectangle, freeHand }

// 绘制元素数据模型
class DrawElement {
  final DrawShapeType type;
  final Offset startPoint;
  Offset endPoint;
  final Color color;
  final double strokeWidth;
  // 自由手绘场景可补充点列表字段
  final List<Offset>? freePoints;

  DrawElement({
    required this.type,
    required this.startPoint,
    required this.endPoint,
    required this.color,
    required this.strokeWidth,
    this.freePoints,
  });

  // 用于拖动过程中更新图形参数
  DrawElement copyWith({
    DrawShapeType? type,
    Offset? startPoint,
    Offset? endPoint,
    Color? color,
    double? strokeWidth,
    List<Offset>? freePoints,
  }) {
    return DrawElement(
      type: type ?? this.type,
      startPoint: startPoint ?? this.startPoint,
      endPoint: endPoint ?? this.endPoint,
      color: color ?? this.color,
      strokeWidth: strokeWidth ?? this.strokeWidth,
      freePoints: freePoints ?? this.freePoints,
    );
  }
}

2. 实现手势交互逻辑 #

根据用户选择的绘制类型，监听手势按下、拖动、抬起事件，记录图形坐标：

class DrawPage extends StatefulWidget {
  const DrawPage({super.key});

  @override
  State<DrawPage> createState() => _DrawPageState();
}

class _DrawPageState extends State<DrawPage> {
  // 已确认的绘制元素列表
  final List<DrawElement> _drawElements = [];
  // 用户当前选中的绘制类型，可通过UI按钮切换
  DrawShapeType _currentType = DrawShapeType.line;
  // 拖动过程中的临时预览元素
  DrawElement? _tempElement;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        // 手势按下：记录图形起点
        onPanStart: (details) {
          final startPos = details.localPosition;
          _tempElement = DrawElement(
            type: _currentType,
            startPoint: startPos,
            endPoint: startPos,
            color: Colors.black,
            strokeWidth: 2,
          );
        },
        // 手势拖动：更新图形终点，实时刷新预览
        onPanUpdate: (details) {
          if (_tempElement == null) return;
          _tempElement = _tempElement!.copyWith(
            endPoint: details.localPosition,
          );
          setState(() {});
        },
        // 手势抬起：将临时预览元素存入正式绘制列表
        onPanEnd: (details) {
          if (_tempElement == null) return;
          _drawElements.add(_tempElement!);
          _tempElement = null;
          setState(() {});
        },
        child: CustomPaint(
          painter: FarmDrawPainter(
            drawElements: _drawElements,
            tempElement: _tempElement,
          ),
          size: Size.infinite,
        ),
      ),
    );
  }
}

3. 实现CustomPainter绘制逻辑 #

在paint方法中根据图形类型调用Canvas对应的原生绘制API即可：

class FarmDrawPainter extends CustomPainter {
  final List<DrawElement> drawElements;
  final DrawElement? tempElement;

  FarmDrawPainter({required this.drawElements, this.tempElement});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..style = PaintingStyle.stroke;
    // 绘制已确认的所有元素
    for (var element in drawElements) {
      paint.color = element.color;
      paint.strokeWidth = element.strokeWidth;
      switch (element.type) {
        case DrawShapeType.line:
          canvas.drawLine(element.startPoint, element.endPoint, paint);
          break;
        case DrawShapeType.rectangle:
          final rect = Rect.fromPoints(element.startPoint, element.endPoint);
          canvas.drawRect(rect, paint);
          break;
        case DrawShapeType.freeHand:
          if (element.freePoints == null) break;
          for (int i = 0; i < element.freePoints!.length - 1; i++) {
            canvas.drawLine(element.freePoints![i], element.freePoints![i+1], paint);
          }
          break;
      }
    }
    // 绘制当前拖动中的预览图形
    if (tempElement != null) {
      paint.color = tempElement!.color;
      paint.strokeWidth = tempElement!.strokeWidth;
      switch (tempElement!.type) {
        case DrawShapeType.line:
          canvas.drawLine(tempElement!.startPoint, tempElement!.endPoint, paint);
          break;
        case DrawShapeType.rectangle:
          final rect = Rect.fromPoints(tempElement!.startPoint, tempElement!.endPoint);
          canvas.drawRect(rect, paint);
          break;
        default:
          break;
      }
    }
  }

  @override
  bool shouldRepaint(covariant FarmDrawPainter oldDelegate) {
    return oldDelegate.drawElements != drawElements || oldDelegate.tempElement != tempElement;
  }
}

农场设计场景优化建议 #

• 可补充端点吸附逻辑：让线条、矩形的边角自动对齐已有图形的端点，方便管线标注对齐
• 可增加图形选中、位移、删除功能：方便用户调整已绘制的地块、管线
• 可通过Paint的pathEffect属性配置虚线、实线等不同线型，适配不同类型管线的标注需求

内容的提问来源于stack exchange，提问作者Sandesh Pargaonkar