Flutter手势签名识别插件signwriting_flutter的使用

简介

signwriting_flutter 是一个用于在 Flutter 应用程序中处理手语书写格式的插件。它包括字体文件、分词器、可视化工具和实用工具。大部分实现可以在 signwriting 包中找到。

如何使用

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 signwriting_flutter 依赖：

dependencies:
  signwriting_flutter: ^latest_version

2. 配置字体

下载字体文件并将其放置在项目的 assets/fonts 目录下。在 pubspec.yaml 文件中配置这些字体：

flutter:
  fonts:
    - family: SuttonSignWritingFill
      fonts:
        - asset: assets/fonts/SuttonSignWritingFill.ttf

    - family: SuttonSignWritingLine
      fonts:
        - asset: assets/fonts/SuttonSignWritingLine.ttf

确保运行 flutter pub get 来获取新的依赖项。

示例代码

以下是一个简单的示例，展示了如何使用 signwriting_flutter 插件将手语书写字符串转换为图像。

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:signwriting_flutter/signwriting_flutter.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '手语签名测试',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('手语签名测试'),
        ),
        backgroundColor: Colors.black,
        body: Center(
          child: FutureBuilder<Uint8List>(
            future: signwritingToImage(
              'AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S20544510x500S10019476x475',
              trustBox: false,
              lineColor: Colors.deepOrange,
              fillColor: Colors.white,
            ),
            builder: (BuildContext context, AsyncSnapshot<Uint8List> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Image.memory(snapshot.data!);
                } else {
                  return const Text('无法渲染手语签名图像');
                }
              } else {
                return const CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   import 'dart:typed_data';
   import 'package:flutter/material.dart';
   import 'package:signwriting_flutter/signwriting_flutter.dart';
   

2. 定义主应用类：

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
     
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: '手语签名测试',
         home: Scaffold(
           appBar: AppBar(
             title: const Text('手语签名测试'),
           ),
           backgroundColor: Colors.black,
           body: Center(
             // 使用FutureBuilder异步加载图像
             child: FutureBuilder<Uint8List>(
               future: signwritingToImage(
                 'AS10011S10019S2e704S2e748M525x535S2e748483x510S10011501x466S20544510x500S10019476x475',
                 trustBox: false,
                 lineColor: Colors.deepOrange,
                 fillColor: Colors.white,
               ),
               builder: (BuildContext context, AsyncSnapshot<Uint8List> snapshot) {
                 if (snapshot.connectionState == ConnectionState.done) {
                   if (snapshot.hasData) {
                     return Image.memory(snapshot.data!);
                   } else {
                     return const Text('无法渲染手语签名图像');
                   }
                 } else {
                   return const CircularProgressIndicator();
                 }
               },
             ),
           ),
         ),
       );
     }
   }