Flutter高级画布编辑插件flutter_advanced_canvas_editor的使用

预览

特性

• 在画布上绘制、旋转和删除组件。
• 为组件操作提供撤销和重做功能。
• 将画布导出为PNG图像。
• 支持回调集成以处理画布导出。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_advanced_canvas_editor:

然后运行 flutter pub get 来获取新的依赖项。

使用

首先，创建一个 CanvasController 实例来管理画布的状态。接着，在你的应用中使用 CanvasWidget 和自定义按钮来控制画布上的操作。

初始化和构建

import 'package:flutter/material.dart';
import 'package:flutter_advanced_canvas_editor/src/canvas_controller.dart';
import 'package:flutter_advanced_canvas_editor/src/canvas.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late CanvasController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = CanvasController((pngBytes) {
      print('PNG bytes exporting canvas: $pngBytes');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: Center(
                  child: CanvasWidget(
                    controller: controller,
                    backgroundImage: 'assets/images/background.png',
                    iconsSize: 25.0,
                  ),
                ),
              ),
              CustomDraggableItems(
                controller: controller,
                items: [
                  Image.asset('assets/images/vehicle.png', width: 50, height: 50),
                  Image.asset('assets/images/vehicle.png', width: 50, height: 50),
                  // 添加更多项目
                ],
              ),
              CustomActionButtons(
                controller: controller,
                buttons: [
                  IconButton(
                    icon: Icon(Icons.undo),
                    onPressed: controller.undo,
                  ),
                  IconButton(
                    icon: Icon(Icons.redo),
                    onPressed: controller.redo,
                  ),
                  IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: controller.clearAll,
                  ),
                  IconButton(
                    icon: Icon(Icons.edit),
                    color: !controller.isDrawing ? Colors.black : Colors.red,
                    onPressed: !controller.isDrawing
                        ? controller.enableDrawing
                        : controller.disableDrawingErasing,
                  ),
                  IconButton(
                    icon: Icon(Icons.brush),
                    color: !controller.isErasing ? Colors.black : Colors.red,
                    onPressed: !controller.isErasing
                        ? controller.enableErasing
                        : controller.disableDrawingErasing,
                  ),
                  IconButton(
                    icon: Icon(Icons.save),
                    onPressed: controller.exportCanvas,
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Drawing: ${controller.isDrawing}, Erasing: ${controller.isErasing}'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

保存画布为PNG字节

late CanvasController controller;

[@override](/user/override)
void initState() {
  super.initState();
  controller = CanvasController((pngBytes) {
    print('PNG bytes exporting canvas: $pngBytes');
  });
}

自定义拖拽项目

CustomDraggableItems 类允许用户从一组预定义的图像中拖放项目到画布上。

class CustomDraggableItems extends StatelessWidget {
  final CanvasController controller;
  final List<Widget> items;

  CustomDraggableItems({required this.controller, required this.items});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      // 禁用绘图和擦除当拖动交互开始时
      onPanStart: (details) {
        controller.disableDrawingErasing();
      },
      // 禁用绘图和擦除当拖动交互结束时
      onPanEnd: (details) {
        controller.disableDrawingErasing();
      },
      child: Container(
        height: 100,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: items.map((item) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Draggable<Widget>(
                data: item,
                feedback: item,
                childWhenDragging: Opacity(
                  opacity: 0.5,
                  child: item,
                ),
                child: item,
                // 禁用绘图和擦除当拖动交互开始时
                onDragStarted: () {
                  controller.disableDrawingErasing();
                },
                // 可选地，可以在拖动交互完成或取消时禁用绘图和擦除
                onDragEnd: (details) {
                  controller.disableDrawingErasing();
                },
                onDraggableCanceled: (velocity, offset) {
                  controller.disableDrawingErasing();
                },
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

自定义动作按钮

CustomActionButtons 类用于创建一组按钮来执行不同的操作，如撤销、重做、清除所有、启用绘图、启用擦除和导出画布。

class CustomActionButtons extends StatelessWidget {
  final CanvasController controller;
  final List<Widget> buttons;

  CustomActionButtons({required this.controller, required this.buttons});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: buttons,
    );
  }
}