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;

TTMSFNCSignatureCapture