Flutter-自定义画板

效果

969_1713928981_raw.gif

功能

• 支持绘制线、圆、矩形，支持拓展
• 支持撤回上一步
• 支持清空画板
• 支持自定义画笔颜色，宽度

实现

定义绘制类型

/// 类型
enum ShapeType {
  //线
  line,
  //圆
  circle,
  //矩形
  rectangle,
  //拓展
}

定义绘制抽象类

import 'dart:ui';

/// 绘制抽象类
abstract class Shape {
  void draw(
    Canvas canvas,
    List<Offset> points,
    Paint paint,
  );
}

实现线、圆、矩形绘制

/// 绘制圆
class CircleShape implements Shape {
  @override
  void draw(Canvas canvas, List<Offset> points, Paint paint) {
    if (points.length >= 2) {
      double radius = (points[points.length - 1] - points[1]).distance / 2;
      paint.style = PaintingStyle.stroke;
      canvas.drawCircle(points[0], radius, paint);
    }
  }
}

/// 绘制线
class LineShape implements Shape {
  @override
  void draw(Canvas canvas, List<Offset> points, Paint paint) {
    for (int i = 0; i < points.length - 1; i++) {
      canvas.drawLine(points[i], points[i + 1], paint);
    }
  }
}

/// 绘制方
class RectangleShape implements Shape {
  @override
  void draw(Canvas canvas, List<Offset> points, Paint paint) {
    if (points.length >= 2) {
      final rect = Rect.fromPoints(points[0], points[points.length - 1]);
      paint.style = PaintingStyle.stroke;
      canvas.drawRect(rect, paint);
    }
  }
}

定义工厂类 factory

/// 根据绘制类型返回具体绘制对象
Shape getShape(ShapeType type) {
  switch (type) {
    case ShapeType.line:
      return LineShape();
    case ShapeType.circle:
      return CircleShape();
    case ShapeType.rectangle:
      return RectangleShape();
  }
}

定义笔画参数对象

/// 笔画参数对象
class DrawingStroke {
  Color color;
  double width;
  List<Offset> points;
  ShapeType type;

  DrawingStroke({
    this.color = Colors.black,
    this.width = 2.0,
    this.points = const [],
    this.type = ShapeType.line,
  });
}

定义绘制控制器

/// 绘制控制器
class DrawingController {
  final _strokes = <DrawingStroke>[];
  final _listeners = <VoidCallback>[];

  // 所有绘制笔画数据
  List<DrawingStroke> get strokes => List.unmodifiable(_strokes);
  // 画笔颜色
  Color selectedColor = Colors.black;
  // 画笔宽度
  double strokeWidth = 2.0;
  // 绘制类型
  ShapeType selectedType = ShapeType.line;

  // 开始绘制
  void startDrawing(Offset point) {
    _strokes.add(DrawingStroke(
      color: selectedColor,
      width: strokeWidth,
      points: [point],
      type: selectedType,
    ));
    _notifyListeners();
  }

  // 正在绘制
  void updateDrawing(Offset point) {
    if (_strokes.isNotEmpty) {
      _strokes.last.points.add(point);
      _notifyListeners();
    }
  }

  // 结束当前笔画绘制
  void endDrawing() {
    _notifyListeners();
  }

  // 撤回一笔
  void undo() {
    if (_strokes.isNotEmpty) {
      _strokes.removeLast();
      _notifyListeners();
    }
  }

  // 清空数据
  void clear() {
    _strokes.clear();
    _notifyListeners();
  }

  // 设置画笔颜色
  void setColor(Color color) {
    selectedColor = color;
    _notifyListeners();
  }

  // 设置画笔宽度
  void setStrokeWidth(double width) {
    strokeWidth = width;
    _notifyListeners();
  }

  // 设置绘制类型
  void setDrawingType(ShapeType type) {
    selectedType = type;
    _notifyListeners();
  }

  void _notifyListeners() {
    for (var listener in _listeners) {
      listener();
    }
  }

  void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }

  void removeListener(VoidCallback listener) {
    _listeners.remove(listener);
  }
}

定义画板类DrawingBoard

class DrawingBoard extends StatefulWidget {
  final DrawingController controller;

  const DrawingBoard({Key? key, required this.controller}) : super(key: key);

  @override
  State<StatefulWidget> createState() => DrawingBoardState();
}

class DrawingBoardState extends State<DrawingBoard> {
  @override
  void initState() {
    super.initState();
    widget.controller.addListener(_updateState);
  }

  void _updateState() {
    setState(() {});
  }

  @override
  void dispose() {
    super.dispose();
    widget.controller.removeListener(_updateState);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, size) {
      return SizedBox(
        width: size.maxWidth,
        height: size.maxHeight,
        child: GestureDetector(
          onPanStart: (details) {
            widget.controller.startDrawing(details.localPosition);
          },
          onPanUpdate: (details) {
            widget.controller.updateDrawing(details.localPosition);
          },
          onPanEnd: (_) {
            widget.controller.endDrawing();
          },
          child: CustomPaint(
            painter: DrawingPainter(strokes: widget.controller.strokes),
            size: Size.infinite,
          ),
        ),
      );
    });
  }
}

class DrawingPainter extends CustomPainter {
  final Paint drawPaint = Paint();

  DrawingPainter({required this.strokes});

  List<DrawingStroke> strokes;

  @override
  void paint(Canvas canvas, Size size) {
    for (var stroke in strokes) {
      drawPaint
        ..color = stroke.color
        ..strokeCap = StrokeCap.round
        ..strokeWidth = stroke.width;

      Shape shape = getShape(stroke.type);
      shape.draw(canvas, stroke.points, drawPaint);
    }
  }

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

使用画板

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_xy/xydemo/drawingboard/drawing/type.dart';
import 'package:flutter_xy/xydemo/drawingboard/drawing/view.dart';

import 'drawing/controller.dart';

class DrawingPage extends StatefulWidget {
  const DrawingPage({Key? key}) : super(key: key);

  @override
  DrawingPageState createState() => DrawingPageState();
}

class DrawingPageState extends State<DrawingPage> {
  final _controller = DrawingController();

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  @override
  void dispose() {
    super.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          children: [
            SizedBox(
              width: 120,
              child: ListView(
                scrollDirection: Axis.vertical,
                padding: const EdgeInsets.symmetric(horizontal: 20),
                children: [
                  const SizedBox(width: 10),
                  _buildText("操作"),
                  const SizedBox(width: 10),
                  _buildButton('Undo', () => _controller.undo()),
                  const SizedBox(width: 10),
                  _buildButton('Clear', () => _controller.clear()),
                  const SizedBox(width: 10),
                  _buildText("画笔颜色"),
                  const SizedBox(width: 10),
                  _buildColorButton(Colors.red),
                  const SizedBox(width: 10),
                  _buildColorButton(Colors.blue),
                  const SizedBox(width: 10),
                  _buildText("画笔宽度"),
                  const SizedBox(width: 10),
                  _buildStrokeWidthButton(2.0),
                  const SizedBox(width: 10),
                  _buildStrokeWidthButton(5.0),
                  const SizedBox(width: 10),
                  _buildText("画笔类型"),
                  const SizedBox(width: 10),
                  _buildTypeButton(ShapeType.line, '线'),
                  const SizedBox(width: 10),
                  _buildTypeButton(ShapeType.circle, '圆'),
                  const SizedBox(width: 10),
                  _buildTypeButton(ShapeType.rectangle, '方'),
                ],
              ),
            ),
            Expanded(
              child: Column(
                children: [
                  Expanded(
                    child: DrawingBoard(
                      controller: _controller,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildText(String text) {
    return Text(
      text,
      style: const TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w600,
      ),
    );
  }

  Widget _buildButton(String text, VoidCallback onPressed) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }

  Widget _buildColorButton(Color color) {
    return ElevatedButton(
      onPressed: () => _controller.setColor(color),
      style: ElevatedButton.styleFrom(primary: color),
      child: const SizedBox(width: 30, height: 30),
    );
  }

  Widget _buildStrokeWidthButton(double width) {
    return ElevatedButton(
      onPressed: () => _controller.setStrokeWidth(width),
      child: Text(width.toString()),
    );
  }

  Widget _buildTypeButton(ShapeType type, String label) {
    return ElevatedButton(
      onPressed: () => _controller.setDrawingType(type),
      child: Text(label),
    );
  }
}

运行效果如下图：

969_1713928981_raw.gif