Table of Contents

Signature Capture Guide

TTMSFNCSignatureCapture is a freehand drawing surface designed for capturing handwritten signatures with a mouse or touch input. The signature can be cleared, exported to an image, and saved to or loaded from a file or stream.

Configuring the control

Set the hint text, clear icon position, and pen properties before the control is shown.

// Configure the hint text, clear-button position, and pen appearance
TMSFNCSignatureCapture1.Text := 'Sign here';
TMSFNCSignatureCapture1.TextPosition.Position := tpBottomCenter;

// Pen colour and width
TMSFNCSignatureCapture1.Pen.Color := gcBlack;
TMSFNCSignatureCapture1.Pen.Width := 2;

// Position the clear icon in the bottom-left corner
TMSFNCSignatureCapture1.ClearSig.Position := cpBottomLeft;

The Text and TextPosition.Position combination controls a "Sign here" guide line. The ClearSig sub-object positions the built-in clear icon; the user taps or clicks it to reset the surface.

Saving, loading, and clearing

The control exposes file-based and image-export methods for the most common workflows. Check Empty before saving to avoid writing an empty file.

// Save the signature drawing to a binary file for later reload
procedure TForm1.ButtonSaveClick(Sender: TObject);
begin
  if not TMSFNCSignatureCapture1.Empty then
    TMSFNCSignatureCapture1.SaveToFile('signature.sig');
end;

// Export the signature as a PNG image
procedure TForm1.ButtonExportClick(Sender: TObject);
begin
  if not TMSFNCSignatureCapture1.Empty then
    TMSFNCSignatureCapture1.SaveToImageFile('signature.png');
end;

// Reload the signature drawing from the binary file
procedure TForm1.ButtonLoadClick(Sender: TObject);
begin
  TMSFNCSignatureCapture1.LoadFromFile('signature.sig');
end;

// Programmatically clear the capture surface
procedure TForm1.ButtonClearClick(Sender: TObject);
begin
  TMSFNCSignatureCapture1.Empty := True;
end;

SaveToFile/LoadFromFile use an internal binary format that preserves pen colour, width, and every stroke point. SaveToImageFile exports a flattened PNG or JPEG of the current surface, suitable for document embedding.

Setting Empty := True programmatically is equivalent to the user pressing the clear icon.

Stream round-trip

Saving to and loading from a TMemoryStream lets you store signatures in a database blob or transmit them without touching the file system. Reset Position to 0 before loading.

// Save the signature to a memory stream, then immediately verify
// that it round-trips cleanly by reloading into a second control.
procedure TForm1.ButtonRoundTripClick(Sender: TObject);
var
  ms: TMemoryStream;
begin
  ms := TMemoryStream.Create;
  try
    TMSFNCSignatureCapture1.SaveToStream(ms);

    ms.Position := 0;
    TMSFNCSignatureCapture2.LoadFromStream(ms);
  finally
    ms.Free;
  end;
end;

Pen customisation

The Pen property is a TTMSFNCGraphicsStroke. Change Pen.Color, Pen.Width, and Pen.Kind to match the application theme or to let the user pick a pen style before signing.

Combining configuration, saving, and pen customization

Configure the hint text and pen, capture a signature, and save it to a stream for database storage:

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Hint text and position
  TMSFNCSignatureCapture1.Text := 'Sign here';
  TMSFNCSignatureCapture1.TextPosition.Position := tpTopCenter;

  // Clear icon at bottom-right
  TMSFNCSignatureCapture1.ClearSig.Position := cpBottomRight;

  // Custom pen: thick dark-blue strokes
  TMSFNCSignatureCapture1.Pen.Color := gcDarkBlue;
  TMSFNCSignatureCapture1.Pen.Width := 3;
end;

procedure TForm1.ButtonSaveClick(Sender: TObject);
var
  ms: TMemoryStream;
begin
  if TMSFNCSignatureCapture1.Empty then
  begin
    ShowMessage('Please sign before saving.');
    Exit;
  end;

  ms := TMemoryStream.Create;
  try
    TMSFNCSignatureCapture1.SaveToStream(ms);
    ms.Position := 0;
    // Store ms in a database blob or transmit over the network
    SaveStreamToDatabase(ms);
  finally
    ms.Free;
  end;
end;

High-DPI clear icon and export resolution

The control rescales the hint Font when the display scale changes, so the "Sign here" text is authored once at design DPI. Two things are not covered by that pass and are worth setting deliberately. First, the built-in clear icon: ClearSig.Image is a single TTMSFNCBitmap with a fixed pixel count, so an icon authored for a 100% display turns soft at 150% or 200% — read the control's ResourceScaleFactor (the display scale it resolves image resources against) and load the matching variant. Second, Pen.Width, TextPosition.X/.Y, and ClearSig.X/.Y are plain offsets in the control's own coordinate space: keep them at their design values rather than computing them from the scale.

uses
  System.SysUtils, FMX.TMSFNCUtils, FMX.TMSFNCSignatureCapture;

procedure TForm1.ConfigureSignatureForDisplayScale;
var
  Suffix: string;
begin
  { ResourceScaleFactor is the display scale the control resolves image
    resources against: 1.0 at 96 DPI, 1.5 at 144 DPI, 2.0 at 192 DPI. }
  if TMSFNCSignatureCapture1.ResourceScaleFactor >= 2 then
    Suffix := '@2x'
  else if TMSFNCSignatureCapture1.ResourceScaleFactor >= 1.5 then
    Suffix := '@1.5x'
  else
    Suffix := '';

  TMSFNCSignatureCapture1.BeginUpdate;
  try
    { The built-in clear icon is a single TTMSFNCBitmap, so it has to be
      supplied at the pixel density of the display it is drawn on. }
    TMSFNCSignatureCapture1.ClearSig.Position := cpBottomRight;
    TMSFNCSignatureCapture1.ClearSig.Image.LoadFromFile('clear' + Suffix + '.png');

    { Pen width, hint offsets and the hint font stay in design units. }
    TMSFNCSignatureCapture1.Pen.Width := 2;
    TMSFNCSignatureCapture1.Text := 'Sign here';
    TMSFNCSignatureCapture1.TextPosition.Position := tpBottomCenter;
    TMSFNCSignatureCapture1.Font.Size := 11;
  finally
    TMSFNCSignatureCapture1.EndUpdate;
  end;

  if TTMSFNCUtils.IsHighDPIScale(Self) then
    StatusLabel.Text := Format('Clear icon loaded at %.2fx',
      [TTMSFNCUtils.GetDPIScale(Self)]);
end;

SaveToImageFile and SaveToImageStream flatten the current surface, so the exported image inherits the control's size — a signature pad sized for a document scan should be given generous bounds at design time rather than being upscaled after export.