Flutter图像标注插件image_annotation的使用

该库为Flutter应用程序提供了添加图像标注功能的简单解决方案。通过此库，用户可以在定义的图片区域中绘制形状、添加文本、高亮特定区域并调整注释大小。

演示

功能

• 在图像上绘制线条、矩形和椭圆。
• 在图像上添加自定义文本注释。
• 高亮图像的特定区域。
• 调整图像区域内的注释大小。
• 清除所有或最后一个注释。

安装

要在您的Flutter项目中添加此库，请在pubspec.yaml文件中包含它：

dependencies:
  image_annotation: ^latest_version

然后在终端中运行以下命令：

flutter pub get

使用

导入包：

import 'package:image_annotation/image_annotation.dart';

然后，您可以在应用中使用ImageAnnotation小部件。您可以指定注释类型（‘line’、‘rectangle’、‘oval’、‘text’）和图像路径。

ImageAnnotation(
  imagePath: "assets/images/example.png",
  annotationType: "rectangle",
)

快速示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ImageAnnotation(
          imagePath: 'images/my_image.png',
          annotationType: 'line',
        ),
      ),
    );
  }
}

更详细的示例

以下是更详细的示例，展示了如何在应用中实现不同的注释选项。

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

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

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

enum AnnotationOption { line, rectangle, oval, text }

class _MyAppState extends State<MyApp> {
  // 定义一个scaffold key以防止意外更改。
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  AnnotationOption selectedOption = AnnotationOption.line; // 默认选项。

  // 根据选择的选项返回注释类型字符串的帮助函数。
  String chooseAnnotationType(AnnotationOption option) {
    switch (option) {
      case AnnotationOption.line:
        return 'line';
      case AnnotationOption.rectangle:
        return 'rectangle';
      case AnnotationOption.oval:
        return 'oval';
      case AnnotationOption.text:
        return 'text';
    }
  }

  // 处理抽屉选项点击事件并更新所选选项的函数。
  void _handleDrawerOptionTap(AnnotationOption option) {
    setState(() {
      selectedOption = option;
    });
    _scaffoldKey.currentState?.openEndDrawer();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Annotation Demo',
      home: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Text('Image Annotation Demo'),
          centerTitle: true,
        ),
        endDrawer: Drawer(
          child: ListView(
            children: <Widget>[
              const DrawerHeader(
                margin: EdgeInsets.zero,
                padding: EdgeInsets.zero,
                child: UserAccountsDrawerHeader(
                  decoration: BoxDecoration(color: Colors.green),
                  accountName: Text('Image Annotation Types'),
                  accountEmail: Text('choose one option'),
                ),
              ),
              ListTile(
                title: Text('Line'),
                onTap: () => _handleDrawerOptionTap(AnnotationOption.line),
                selected: selectedOption == AnnotationOption.line,
              ),
              ListTile(
                title: Text('Rectangular'),
                onTap: () => _handleDrawerOptionTap(AnnotationOption.rectangle),
                selected: selectedOption == AnnotationOption.rectangle,
              ),
              ListTile(
                title: Text('Oval'),
                onTap: () => _handleDrawerOptionTap(AnnotationOption.oval),
                selected: selectedOption == AnnotationOption.oval,
              ),
              ListTile(
                title: Text('Text'),
                onTap: () => _handleDrawerOptionTap(AnnotationOption.text),
                selected: selectedOption == AnnotationOption.text,
              ),
            ],
          ),
        ),
        body: Center(
          child: ImageAnnotation(
            imagePath: 'assets/images/your_image.jpg',
            annotationType: chooseAnnotationType(selectedOption),
          ),
        ),
      ),
    );
  }
}