Flutter擦除恢复功能插件erase_restore的使用

erase_restore 是一个 Flutter 包，它提供了简单且可定制的方式来实现图像的擦除和撤销/重做功能。通过这个包，您可以轻松地为您的 Flutter 应用添加图像擦除工具，允许用户使用手指或触控笔擦除图像的一部分。此外，该包还提供了撤销和重做功能，允许用户根据需要撤销或重做他们的擦除笔画。

如何使用

开始使用

在您的 Flutter 项目的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
  ...
  erase_restore: <latest_version>

在您的库中添加以下导入语句：

import 'package:erase_restore/erase_restore.dart';

初始化 EraseRestoreView

import 'package:erase_restore/erase_restore.dart';

final EraseRestoreController controller = EraseRestoreController();

Future<EraseRestoreModel?> _getModel() async {
  final bgBuffer = await rootBundle.load('assets/bg.png');
  final bgImage = await decodeImageFromList(bgBuffer.buffer.asUint8List());

  final originalBuffer = await rootBundle.load('assets/original.png');
  final originalImage = await decodeImageFromList(originalBuffer.buffer.asUint8List());

  final clipBuffer = await rootBundle.load('assets/clip.png');
  final clipImage = await decodeImageFromList(clipBuffer.buffer.asUint8List());

  final maskImageData = await EraseRestoreModel.getMaskImageData(
      clipBuffer.buffer.asUint8List());
  if (maskImageData == null) return null;
  return EraseRestoreModel(
    clipImage: clipImage,
    originalImage: originalImage,
    bgImage: bgImage,
    maskImage: maskImageData.image,
  );
}

// 使用 FutureBuilder 加载模型并构建 EraseRestoreView
return FutureBuilder<EraseRestoreModel?>(
  future: _getModel(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return const SizedBox.shrink();
    final data = snapshot.data;
    if (data == null) return const SizedBox.shrink();
    return EraseRestoreView(
      model: data,
      controller: controller,
      maskColor: const Color.fromARGB(74, 248, 13, 35),
      previousStepEnable: (enable) {
        setState(() {
          _previousStepEnable = enable;
        });
      },
      nextStepEnable: (enable) {
        setState(() {
          _nextStepEnable = enable;
        });
      },
    );
  },
);

所有操作

// 切换编辑类型（擦除或恢复）
void switchEditType(EditType editType)

// 撤销上一步
void previousStep()

// 重做下一步
void nextStep()

// 更新笔画宽度
void updateStokeWidth(double width)

// 截取屏幕快照
Future<ui.Image?> takeScreenShot()

完整示例 Demo

import 'package:erase_restore/erase_restore.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: EraseRestoreScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<StatefulWidget> createState() => _EraseRestoreScreenState();
}

class _EraseRestoreScreenState extends State<EraseRestoreScreen> {
  final EraseRestoreController controller = EraseRestoreController();
  double strokeWidth = 20;

  bool _previousStepEnable = false;
  bool _nextStepEnable = false;

  Future<EraseRestoreModel?> _getModel() async {
    final bgBuffer = await rootBundle.load('assets/bg.png');
    final bgImage = await decodeImageFromList(bgBuffer.buffer.asUint8List());

    final originalBuffer = await rootBundle.load('assets/original.png');
    final originalImage = await decodeImageFromList(originalBuffer.buffer.asUint8List());

    final clipBuffer = await rootBundle.load('assets/clip.png');
    final clipImage = await decodeImageFromList(clipBuffer.buffer.asUint8List());

    final maskImageData = await EraseRestoreModel.getMaskImageData(
        clipBuffer.buffer.asUint8List());
    if (maskImageData == null) return null;
    return EraseRestoreModel(
      clipImage: clipImage,
      originalImage: originalImage,
      bgImage: bgImage,
      maskImage: maskImageData.image,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(height: 100),
          Container(
            height: 400,
            color: Colors.red,
            child: FutureBuilder<EraseRestoreModel?>(
              future: _getModel(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) return const SizedBox.shrink();
                final data = snapshot.data;
                if (data == null) return const SizedBox.shrink();
                return EraseRestoreView(
                  model: data,
                  controller: controller,
                  maskColor: const Color.fromARGB(74, 248, 13, 35),
                  previousStepEnable: (enable) {
                    setState(() {
                      _previousStepEnable = enable;
                    });
                  },
                  nextStepEnable: (enable) {
                    setState(() {
                      _nextStepEnable = enable;
                    });
                  },
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: () {
              controller.switchEditType(EditType.erase);
            },
            child: const Text('Erase'),
          ),
          ElevatedButton(
            onPressed: () {
              controller.switchEditType(EditType.restore);
            },
            child: const Text('Restore'),
          ),
          ElevatedButton(
            onPressed: _previousStepEnable
                ? () {
                    controller.previousStep();
                  }
                : null,
            child: const Text('Previous Step'),
          ),
          ElevatedButton(
            onPressed: _nextStepEnable
                ? () {
                    controller.nextStep();
                  }
                : null,
            child: const Text('Next Step'),
          ),
          ElevatedButton(
            onPressed: () {
              strokeWidth += 1;
              controller.updateStokeWidth(strokeWidth);
            },
            child: const Text('Stroke width +1'),
          ),
          ElevatedButton(
            onPressed: () {
              if (strokeWidth <= 0) return;
              strokeWidth -= 1;
              controller.updateStokeWidth(strokeWidth);
            },
            child: const Text('Stroke width -1'),
          ),
          ElevatedButton(
            onPressed: () async {
              final navigatorState = Navigator.of(context);
              final result = await controller.takeScreenShot();
              if (result == null) return;
              navigatorState.push(
                MaterialPageRoute<void>(
                  builder: (BuildContext ctx) => Container(
                    color: Colors.white,
                    child: Center(
                      child: RawImage(
                        image: result,
                      ),
                    ),
                  ),
                ),
              );
            },
            child: const Text('Take Screenshot'),
          ),
        ],
      ),
    );
  }
}