Flutter脚本执行插件scriptouch_easyscript的使用

非官方的Flutter包装器，用于Scriptel ScripTouch Easyscript集成（Scriptel开发者页面）。

SignaturePreview Widget

要集成scriptouch_easyscript的签名捕获功能，你需要在Widget树中添加SignaturePreview小部件。 SignaturePreview小部件是一个可定制的签名板集成库，用于在Flutter应用程序中捕获签名。 它提供了一个画布，用户可以通过Scriptel签名板设备或触摸输入来绘制他们的签名。捕获的签名可以保存为PNG图像以供进一步处理。

安装

在你的pubspec.yaml文件中添加以下内容：

dependencies:
   scriptouch_easyscript: ^1.0.2

使用

导入SignaturePreview小部件

在你的Dart文件中导入SignaturePreview小部件：

import 'package:scriptouch_easyscript/signature_preview.dart';

在Widget树中添加SignaturePreview小部件：

SignaturePreview(
    onSignCapture: (Future<Uint8List> signImageBytes) {
      // 处理捕获的签名图像
      var imageBytes = await signImageBytes;
    },
);

功能

• 允许用户通过触摸或Scriptel签名板设备在画布上绘制签名。
• 提供了自动清除签名屏幕的功能，当签名完成或取消时。
• 支持自定义签名板的外观，包括屏幕颜色、墨水颜色和笔的大小。
• 可以捕获签名并将其保存为具有自定义像素比的PNG图像。
• 支持视觉引导线，帮助用户签名。
• 提供取消或完成签名的操作按钮（仅限触摸模式）。
• 允许程序化地捕获或取消签名。
• 支持键盘输入，逐字符捕捉签名。

关键特性

签名捕获

SignaturePreview小部件允许用户在画布上绘制他们的签名。它支持两种签名捕获模式：

1. Scriptel签名板模式：用户可以连接一个Scriptel签名板设备，并使用手写笔绘制签名。
2. 触摸模式：用户可以直接在设备屏幕上通过触摸输入绘制签名。

自动清除

该小部件提供了自动清除签名屏幕的功能，当签名完成或取消时。默认情况下，签名完成后会清除屏幕，但取消时不清除。这些行为可以通过设置autoClearOnDone和autoClearOnCancel参数进行自定义。

自定义

SignaturePreview小部件允许自定义签名板外观的各种方面：

• 屏幕颜色：签名板画布的背景颜色。
• 墨水颜色：签名墨水的颜色。
• 笔的大小：签名笔画的宽度。
• 像素比：捕获签名图像的像素密度。

触摸签名和操作按钮

该小部件支持触摸输入，用于直接在设备屏幕上捕获签名。要启用触摸输入，将enableTouchSign参数设置为true。在触摸模式下，会显示取消或完成签名的操作按钮。可以通过将enableActionButtons参数设置为false来禁用这些按钮。

视觉引导线

SignaturePreview小部件提供了显示视觉引导线的选项，以帮助用户签名。可以通过将enableSignGuide参数设置为true来启用这些引导线。

直接将图像保存到临时目录

easy_script库提供了一个扩展，可以将捕获的签名图像直接保存到临时目录。这个扩展是在Future<Uint8List>上实现的，可以按如下方式使用：

var imageBytes = await signImageBytes.saveToTempDir();

使用示例

SignaturePreview(
    onSignCapture: (Future<Uint8List> signImageBytes) async {
        // 将图像直接保存到临时目录并获取路径
        var imagePath = await signImageBytes.saveToTempDir();
    },
    autoClearOnDone: false,
    autoClearOnCancel: true,
    screenColor: Colors.white,
    signColor: Colors.black,
    signStrokeWidth: 2,
    signCapturePixelRatio: 1.0,
    enableTouchSign: true,
    enableSignGuide: true,
    enableActionButtons: true,
    aspectRatio: 240/64, // Scriptel签名板的宽高比
);

在上面的例子中，SignaturePreview小部件用于捕获签名。onSignCapture回调被设置为处理捕获的签名图像。还提供了其他自定义选项，如屏幕颜色、墨水颜色和笔的大小。

示例代码

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:scriptouch_easyscript/easyscript.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Scriptel插件演示'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                SignaturePreview(
                  signColor: Colors.indigo.shade700,
                  screenColor: Colors.white,
                  signStrokeWidth: 5,
                  signCapturePixelRatio: 1,
                  onSignCapture: (bytes) async {
                    var path = await bytes.saveToTempDir();
                    log("签名图像保存到: $path");
                  },
                  enableTouchSign: true,
                ),
                const TextField(autofocus: true),
              ],
            ),
          ),
        ),
      ),
    );
  }
}