# hand_signature

**Repository Path**: qbcbyb/hand_signature

## Basic Information

- **Project Name**: hand_signature
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-15
- **Last Updated**: 2021-04-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

A Flutter plugin providing signature pad for drawing smooth signatures. Library is written in pure Dart/Flutter environment to provide support for all platforms..\
Easy to use library with variety of draw and export settings.

![Structure](https://raw.githubusercontent.com/RomanBase/hand_signature/master/doc/signature.png)

Signature pad drawing is based on Cubic Bézier curves.

---

**Usage**
```dart
    import 'package:hand_signature/signature.dart';
```

With **HandSignatureControl** and **HandSignaturePainterView** is possible to tweak some drawing aspects like stroke width, smoothing ratio or velocity weight.
```dart
    final control = HandSignatureControl(
      threshold: 3.0,
      smoothRatio: 0.65,
      velocityRange: 2.0,
    );

    final widget = HandSignaturePainterView(
      control: control,
      color: Colors.blueGrey,
      width: 1.0,
      maxWidth: 10.0,
      type: SignatureDrawType.shape,
    );
```

**HandSignatureControl** sets up 'math' to control input touches and handles control points of signature curve.
- threshold: (LP) controls minimal distance between two points - higher distance creates smoother curve, but less precise. Higher distance also creates bigger input draw lag.
- smoothRatio: (0 - 1) controls how smooth curve will be - higher ratio creates smoother curve, but less precise. In most of cases are best results with values between 0.5 - 0.75.
- velocityRange: (LP per millisecond) controls curve size based on distance and duration between two points. Thin line - fast move, thick line - slow move. With higher velocityRange user must swing faster to draw thinner line.
- reverseVelocity: swaps stroke width. Thin line - slow move, thick line - fast move. Simply swaps min/max size based on velocity. 

**HandSignaturePainterView** sets up visual style of signature curve.
- control: processes input, handles math and stores raw data.
- color: just color of line.
- width: minimal width of line. Width at maximum swing speed (clamped by velocityRange).
- maxWidth: maximum width of line. Width at slowest swing speed.
- type: draw type of curve. Default and main draw type is **shape** - not so nice as **arc**, but has better performance. And **line** is simple path with uniform stroke width. 

---

**Export**\
Properties, like canvas size, stroke min/max width and color can be modified during export.\
There are more ways and more formats how to export signature, most used ones are **svg** and **png** formats.
```dart
    final control = HandSignatureControl();

    final svg = control.toSvg();
    final png = control.toImage();
```
Of course draw type is also supported during export. SignatureDrawType **shape** generates reasonably small file and is read well by all programs. On the other side **arc** generates really big file and some programs can have hard times handling so much objects.\
Export to image supports **ImageByteFormat** and provides png or raw rgba data.\

**Parsing**\
Exported **svg** is possible to display in classic [flutter_svg](https://pub.dev/packages/flutter_svg) widget.\
Or use build in **HandSignatureView** for greater control.
```dart
    final widget = HandSignatureView.svg(
      data: svgString,
      strokeWidth: (width) => width * 0.35,
      padding: EdgeInsets.all(16.0),
      placeholder: Container(
        color: Colors.red,
        child: Center(
          child: Text('not signed yet'),
        ),
      ),
    );
```
Signature is automatically centered and fills given area.\
Currently stroke width can be controlled only for **line** and **arc** exports.\
**HandSignatureView** handles most of svg files, but is optimized for drawing signatures created with this library and don't provide all features like [flutter_svg](https://pub.dev/packages/flutter_svg). 

---

**Contribution**\
Any contribution is highly welcomed.\
Library is in good condition, but still in early development.\
Mainly to improve smoothing and line weight to better match real signature.\
Remove dependency to [flutter_svg](https://pub.dev/packages/flutter_svg) and make library dependent only on [path_drawing](https://pub.dev/packages/path_drawing) or [path_parsing](https://pub.dev/packages/path_parsing).\
Performance can be always better..\
Also currently there are no tests or documentation.