Flutter图像绘制插件image_painter_hap的使用

image_painter_hap 是一个用于在 Flutter 应用中绘制和编辑图像的插件。它允许用户在图像上进行自由绘制、添加文本、形状等操作，并且可以导出编辑后的图像。以下是如何使用 image_painter_hap 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 image_painter_hap 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  image_painter_hap: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 image_painter_hap 插件。

import 'package:image_painter_hap/image_painter_hap.dart';

3. 使用 ImagePainter 组件

ImagePainter 是 image_painter_hap 插件的核心组件。你可以将它添加到你的 UI 中，并传递一个图像源（如 AssetImage 或 NetworkImage）来进行绘制。

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Painter Example'),
      ),
      body: Center(
        child: ImagePainter(
          image: AssetImage('assets/sample_image.jpg'), // 使用本地图片
          // image: NetworkImage('https://example.com/sample_image.jpg'), // 使用网络图片
          onSave: (Uint8List? imageBytes) {
            // 处理保存的图像数据
            if (imageBytes != null) {
              // 保存或显示图像
            }
          },
        ),
      ),
    );
  }
}

4. 处理保存的图像

ImagePainter 提供了一个 onSave 回调函数，当用户保存编辑后的图像时，会返回一个 Uint8List 类型的数据。你可以使用这个数据来保存图像或显示在应用中。

onSave: (Uint8List? imageBytes) {
  if (imageBytes != null) {
    // 保存图像到文件
    final file = File('path_to_save_image.png');
    file.writeAsBytesSync(imageBytes);

    // 或者在应用中显示图像
    setState(() {
      _savedImage = Image.memory(imageBytes);
    });
  }
},

5. 自定义绘制工具

ImagePainter 提供了一些默认的绘制工具，如画笔、橡皮擦、文本、形状等。你可以通过 toolbarOptions 参数来自定义工具栏的选项。

ImagePainter(
  image: AssetImage('assets/sample_image.jpg'),
  onSave: (Uint8List? imageBytes) {
    // 处理保存的图像数据
  },
  toolbarOptions: ToolbarOptions(
    showColorPicker: true,
    showText: true,
    showShapes: true,
    showEraser: true,
  ),
),

6. 导出图像

你可以通过调用 ImagePainter 的 save 方法来手动导出编辑后的图像。

final GlobalKey<ImagePainterState> _imagePainterKey = GlobalKey();

// 在需要保存图像时调用
_imagePainterKey.currentState?.save();

7. 其他功能

image_painter_hap 还提供了其他一些功能，如撤销/重做、清除画布、设置画笔粗细和颜色等。你可以根据需求进一步探索和使用这些功能。

8. 示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:image_painter_hap/image_painter_hap.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Painter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final GlobalKey<ImagePainterState> _imagePainterKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Painter Example'),
        actions: [
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () {
              _imagePainterKey.currentState?.save();
            },
          ),
        ],
      ),
      body: Center(
        child: ImagePainter(
          key: _imagePainterKey,
          image: AssetImage('assets/sample_image.jpg'),
          onSave: (Uint8List? imageBytes) {
            if (imageBytes != null) {
              // 保存或显示图像
              final file = File('path_to_save_image.png');
              file.writeAsBytesSync(imageBytes);
            }
          },
          toolbarOptions: ToolbarOptions(
            showColorPicker: true,
            showText: true,
            showShapes: true,
            showEraser: true,
          ),
        ),
      ),
    );
  }
}