电子签名工具应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• shared_preferences: https://pub.dev/packages/shared_preferences
• animations: https://pub.dev/packages/animations
• file_selector: https://pub.dev/packages/file_selector
• path_provider: https://pub.dev/packages/path_provider

一、项目概述

运行效果图

1.1 应用简介

电子签名工具是一款专业的手写签名应用，支持手写电子签名、保存签名图片、多签名管理、文档签名叠加等功能。应用以优雅的紫色为主色调，象征专业与信赖。涵盖签名、签名库、文档、设置四大模块，让用户轻松创建和管理电子签名。

应用采用高精度手写识别技术，支持多种笔类型、笔颜色和笔粗细选择，提供流畅自然的书写体验。无论是合同签署、文件审批还是日常办公，都能快速完成电子签名，提升工作效率。

1.2 核心功能

功能模块	功能描述	实现方式
手写签名	流畅的手写签名体验，支持压感	触摸绘制
笔类型选择	圆珠笔、钢笔、马克笔、毛笔	笔触模拟
笔颜色选择	黑色、蓝色、红色、绿色、紫色	颜色选择
笔粗细调节	细、中、粗、特粗四档	宽度调节
签名保存	保存签名到本地签名库	数据存储
签名管理	收藏、编辑、删除签名	列表管理
签名动画	播放签名绘制过程动画	动画回放
导出功能	导出PNG、JPG、PDF格式	文件导出
文档签名	在文档上叠加签名	图层叠加
网格辅助	显示网格辅助对齐	辅助线

1.3 笔类型定义

序号	笔类型	图标	特点	适用场景
1	圆珠笔	✏️	均匀线条，书写流畅	日常签名
2	钢笔	🖌️	有笔锋，线条有变化	正式签名
3	马克笔	🖍️	粗线条，醒目	强调标记
4	毛笔	🖌️	柔和线条，有韵味	艺术签名

1.4 笔颜色定义

序号	颜色名称	色值	适用场景
1	黑色	#000000	正式文档
2	蓝色	#2196F3	日常办公
3	红色	#F44336	强调标记
4	绿色	#4CAF50	审批通过
5	紫色	#9C27B0	个性化签名

1.5 笔粗细定义

序号	粗细名称	宽度	适用场景
1	细	1.0px	精细签名
2	中	2.5px	日常使用
3	粗	5.0px	醒目标记
4	特粗	8.0px	大字签名

1.6 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
数据存储	shared_preferences	>= 2.2.0
动画效果	animations	>= 2.0.0
文件选择	file_selector	>= 1.0.0
文件路径	path_provider	>= 2.1.0
目标平台	鸿蒙OS / Android / iOS	API 21+

1.7 项目结构

lib/
└── main_signature_tool.dart
    ├── SignatureToolApp           # 应用入口
    ├── PenType                    # 笔类型枚举
    ├── PenColor                   # 笔颜色枚举
    ├── PenSize                    # 笔粗细枚举
    ├── SignaturePoint             # 签名点模型
    ├── SignatureStroke            # 签名笔画模型
    ├── Signature                  # 签名模型
    ├── SignatureToolHomePage      # 主页面（底部导航）
    ├── _buildSignaturePage        # 签名页
    ├── _buildGalleryPage          # 签名库页
    ├── _buildDocumentsPage        # 文档页
    ├── _buildSettingsPage         # 设置页
    ├── SignaturePainter           # 签名绘制器
    └── GridPainter                # 网格绘制器

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 签名绘制流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 笔类型枚举 (PenType)

enum PenType {
  ballpoint(label: '圆珠笔', icon: Icons.edit),
  fountain(label: '钢笔', icon: Icons.brush),
  marker(label: '马克笔', icon: Icons.highlight),
  brush(label: '毛笔', icon: Icons.gesture);

  final String label;
  final IconData icon;
  const PenType({required this.label, required this.icon});
}

3.1.2 签名点模型 (SignaturePoint)

class SignaturePoint {
  final Offset point;
  final double pressure;
  final DateTime time;

  const SignaturePoint({
    required this.point,
    this.pressure = 1.0,
    required this.time,
  });
}

3.1.3 签名笔画模型 (SignatureStroke)

class SignatureStroke {
  final List<SignaturePoint> points;
  final Color color;
  final double width;
  final PenType penType;

  const SignatureStroke({
    required this.points,
    required this.color,
    required this.width,
    required this.penType,
  });
}

3.1.4 签名模型 (Signature)

class Signature {
  final String id;
  final String name;
  final List<SignatureStroke> strokes;
  final DateTime createdAt;
  final DateTime? updatedAt;
  final String? documentPath;
  final bool isFavorite;

  const Signature({
    required this.id,
    required this.name,
    required this.strokes,
    required this.createdAt,
    this.updatedAt,
    this.documentPath,
    this.isFavorite = false,
  });

  Signature copyWith({...}) { ... }
}

3.1.5 签名使用分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 签名页结构

3.2.3 签名库页结构

3.2.4 文档页结构

3.3 签名绘制逻辑

3.4 签名动画逻辑

---

四、UI设计规范

4.1 配色方案

应用以优雅的紫色为主色调，象征专业与信赖：

颜色类型	色值	用途
主色	#673AB7 (Deep Purple)	导航、主题元素、按钮
主色容器	#EDE7F6	卡片背景、工具面板
辅助色	#512DA8	强调元素
第三色	#9575CD	次要元素
背景色	#FAFAFA	页面背景
卡片背景	#FFFFFF	信息卡片
画布背景	#FFFFFF	签名画布
网格线色	#E0E0E0	辅助网格

4.2 笔颜色配色

笔颜色	色值	视觉效果
黑色	#000000	正式庄重
蓝色	#2196F3	清新专业
红色	#F44336	醒目强调
绿色	#4CAF50	自然通过
紫色	#9C27B0	个性优雅

4.3 字体规范

元素	字号	字重	颜色
页面标题	20px	Bold	主色
工具标签	14px	Bold	#000000
按钮文字	12px	Regular	主色
签名名称	16px	Medium	#000000
日期标签	12px	Regular	#666666
笔划计数	12px	Regular	#FFFFFF

4.4 组件规范

4.4.1 签名画布布局

┌─────────────────────────────────────┐
│  [网格] [播放动画]                    │
├─────────────────────────────────────┤
│                                     │
│     ┌─────────────────────────┐    │
│     │                         │    │
│     │                         │    │
│     │      签名绘制区域        │    │
│     │                         │    │
│     │                         │    │
│     │                    笔划:3│    │
│     └─────────────────────────┘    │
│                                     │
└─────────────────────────────────────┘

4.4.2 工具面板

┌─────────────────────────────────────┐
│  笔类型                              │
│  [✏️ 圆珠笔] [🖌️ 钢笔] [🖍️ 马克笔] [🖌️ 毛笔] │
│  ─────────────────────────────────  │
│  笔颜色                              │
│     ⚫    🔵    🔴    🟢    🟣      │
│  ─────────────────────────────────  │
│  笔粗细                              │
│    [细]  [中]  [粗]  [特粗]        │
│  ─────────────────────────────────  │
│  [撤销] [清空] [保存] [导出]        │
└─────────────────────────────────────┘

4.4.3 签名卡片

┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │      签名预览图像           │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│  工作签名                    ⭐    │
│  2024-01-15                        │
└─────────────────────────────────────┘

4.4.4 签名详情弹窗

┌─────────────────────────────────────┐
│  工作签名                        ✕  │
│  ─────────────────────────────────  │
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │      签名预览图像           │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  [✏️ 编辑]        [📥 导出]        │
│  [📤 分享]        [🗑️ 删除]        │
└─────────────────────────────────────┘

4.4.5 导出选项

┌─────────────────────────────────────┐
│  📥 导出签名                         │
│                                     │
│  🖼️ PNG图片                         │
│     透明背景                         │
│  ─────────────────────────────────  │
│  📷 JPG图片                         │
│     白色背景                         │
│  ─────────────────────────────────  │
│  📄 PDF文档                         │
│     矢量格式                         │
└─────────────────────────────────────┘

---

五、核心功能实现

5.1 触摸绘制实现

void _onPanStart(DragStartDetails details) {
  setState(() {
    _isDrawing = true;
    _currentPoints = [
      SignaturePoint(
        point: details.localPosition,
        pressure: 1.0,
        time: DateTime.now(),
      ),
    ];
  });
}

void _onPanUpdate(DragUpdateDetails details) {
  if (!_isDrawing) return;
  
  setState(() {
    _currentPoints.add(SignaturePoint(
      point: details.localPosition,
      pressure: details.pressure,
      time: DateTime.now(),
    ));
  });
}

void _onPanEnd(DragEndDetails details) {
  if (!_isDrawing) return;
  
  setState(() {
    _isDrawing = false;
    if (_currentPoints.isNotEmpty) {
      _currentStrokes.add(SignatureStroke(
        points: List.from(_currentPoints),
        color: _selectedPenColor.color,
        width: _selectedPenSize.width,
        penType: _selectedPenType,
      ));
      _currentPoints = [];
    }
  });
}

5.2 签名绘制器实现

class SignaturePainter extends CustomPainter {
  final List<SignatureStroke> strokes;
  final List<SignaturePoint> currentPoints;
  final Color currentColor;
  final double currentWidth;
  final double animationProgress;

  @override
  void paint(Canvas canvas, Size size) {
    for (int i = 0; i < strokes.length; i++) {
      _drawStroke(canvas, strokes[i]);
    }
    
    if (currentPoints.isNotEmpty) {
      _drawCurrentPoints(canvas);
    }
  }

  void _drawStroke(Canvas canvas, SignatureStroke stroke) {
    final paint = Paint()
      ..color = stroke.color
      ..strokeWidth = stroke.width
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round
      ..style = PaintingStyle.stroke;

    final path = Path();
    path.moveTo(stroke.points[0].point.dx, stroke.points[0].point.dy);
    
    for (int i = 1; i < stroke.points.length; i++) {
      path.lineTo(stroke.points[i].point.dx, stroke.points[i].point.dy);
    }

    canvas.drawPath(path, paint);
  }
}

5.3 签名保存实现

void _saveSignature() {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('保存签名'),
      content: TextField(
        controller: _nameController,
        decoration: const InputDecoration(
          labelText: '签名名称',
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('取消'),
        ),
        FilledButton(
          onPressed: () {
            final signature = Signature(
              id: 'sig_${DateTime.now().millisecondsSinceEpoch}',
              name: _nameController.text.isEmpty ? '未命名签名' : _nameController.text,
              strokes: List.from(_currentStrokes),
              createdAt: DateTime.now(),
            );
            setState(() {
              _signatures.insert(0, signature);
              _currentStrokes = [];
            });
            Navigator.pop(context);
          },
          child: const Text('保存'),
        ),
      ],
    ),
  );
}

5.4 签名动画实现

void _playSignatureAnimation() {
  if (_currentStrokes.isEmpty) return;
  
  setState(() {
    _showAnimation = true;
  });
  _drawAnimationController.forward(from: 0).then((_) {
    setState(() {
      _showAnimation = false;
    });
  });
}

5.5 导出功能实现

void _exportSignature() {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('导出签名'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            leading: const Icon(Icons.image),
            title: const Text('PNG图片'),
            subtitle: const Text('透明背景'),
            onTap: () => _exportAsPng(),
          ),
          ListTile(
            leading: const Icon(Icons.photo),
            title: const Text('JPG图片'),
            subtitle: const Text('白色背景'),
            onTap: () => _exportAsJpg(),
          ),
          ListTile(
            leading: const Icon(Icons.picture_as_pdf),
            title: const Text('PDF文档'),
            subtitle: const Text('矢量格式'),
            onTap: () => _exportAsPdf(),
          ),
        ],
      ),
    ),
  );
}

---

六、交互设计

6.1 签名绘制流程

6.2 签名管理流程

6.3 文档签名流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 高级签名功能

签名功能：

• 手写签名模板
• 印章签名支持
• 时间戳签名
• 多人联合签名

7.2.2 文档处理功能

文档功能：

• PDF表单填写
• 批量文档签名
• 签名位置记忆
• 文档加密保护

7.2.3 安全认证功能

安全功能：

• 签名身份验证
• 数字证书签名
• 签名防伪验证
• 签名法律效力

---

八、注意事项

8.1 开发注意事项

1. 触摸精度：确保触摸响应灵敏，笔画流畅

2. 性能优化：大量笔画时需优化绘制性能

3. 数据安全：签名数据需加密存储

4. 导出质量：确保导出图片清晰度

5. 法律效力：电子签名需符合相关法规

8.2 常见问题

问题	原因	解决方案
笔画不连续	触摸事件丢失	优化事件处理
导出模糊	分辨率不足	提高导出分辨率
签名丢失	数据未保存	自动保存机制
动画卡顿	性能问题	优化动画实现
文件过大	未压缩	图片压缩处理

8.3 使用技巧

✍️ 电子签名工具使用技巧 ✍️

签名技巧

• 选择合适的笔类型和粗细
• 保持签名风格一致
• 使用网格辅助对齐

管理技巧

• 收藏常用签名
• 定期整理签名库
• 为签名添加描述

导出技巧

• PNG格式适合透明背景
• PDF格式保持矢量质量
• 选择合适的分辨率

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+
Android	API 21+
iOS	12.0+
存储权限	必需

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_signature_tool.dart --web-port 8149

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_signature_tool.dart

# 运行到Android设备
flutter run -d android lib/main_signature_tool.dart

# 代码分析
flutter analyze lib/main_signature_tool.dart

9.3 依赖配置

在 pubspec.yaml 中添加以下依赖（完整版需要）：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2
  animations: ^2.0.8
  file_selector: ^1.0.3
  path_provider: ^2.1.4
  permission_handler: ^11.3.1
  share_plus: ^7.2.1

---

十、总结

电子签名工具应用通过流畅的手写体验、丰富的笔类型选择、便捷的签名管理，让用户轻松创建和管理电子签名。应用支持4种笔类型、5种笔颜色、4种笔粗细，满足不同场景的签名需求。

核心功能涵盖手写签名、笔类型选择、笔颜色选择、笔粗细调节、签名保存、签名管理、签名动画、导出功能、文档签名、网格辅助十大模块。用户可以创建个性化的电子签名，保存到签名库中随时调用，支持PNG、JPG、PDF多种格式导出。

应用采用 Material Design 3 设计规范，以优雅的紫色为主色调，象征专业与信赖。通过本应用，希望能够为用户提供便捷高效的电子签名服务，让文档签署更加简单。

电子签名工具——一笔一划，专业可靠

---