SignaturePad Component — sgcHTML | eSeGeCe

SignaturePad

TsgcHTMLComponent_SignaturePad — erzeugen Sie ein Pointer-Events-Canvas-Unterschriftenfeld mit den Aktionen Löschen, Rückgängig und Speichern, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_SignaturePad

Ein canvas-basiertes Feld, das clientseitig eine PNG-Unterschrift erfasst. Konfigurieren Sie Stift und Leinwand, verdrahten Sie ShowClear/ShowUndo/UploadURL und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_SignaturePad

Rendert

HTML5-<canvas>-Feld + PNG-Daten-URL

Familie

Formulare & Eingaben

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Stift konfigurieren, rendern

Setzen Sie FieldName, Width/Height und die Stiftfarben, optional UploadURL, um die Unterschrift per POST zu senden, dann lesen Sie HTML.

uses
  sgcHTML_Component_SignaturePad;

var
  oPad: TsgcHTMLComponent_SignaturePad;
begin
  oPad := TsgcHTMLComponent_SignaturePad.Create(nil);
  try
    oPad.FieldName := 'signature';
    oPad.Width := 500;
    oPad.Height := 220;
    oPad.PenColor := '#1a1a2e';
    oPad.PenWidth := 3;
    oPad.UploadURL := '/api/signatures/upload';

    WebModule.Response := oPad.HTML;   // <canvas> + Clear/Undo/Save buttons
  finally
    oPad.Free;
  end;
end;

// includes: sgcHTML_Component_SignaturePad.hpp

TsgcHTMLComponent_SignaturePad *oPad = new TsgcHTMLComponent_SignaturePad(NULL);
try
{
  oPad->FieldName = "signature";
  oPad->Width = 500;
  oPad->Height = 220;
  oPad->PenColor = "#1a1a2e";
  oPad->PenWidth = 3;
  oPad->UploadURL = "/api/signatures/upload";

  String html = oPad->HTML;   // <canvas> + Clear/Undo/Save buttons
}
__finally
{
  delete oPad;
}

using esegece.sgcWebSockets;

var pad = new TsgcHTMLComponent_SignaturePad();
pad.FieldName = "signature";
pad.Width = 500;
pad.Height = 220;
pad.PenColor = "#1a1a2e";
pad.PenWidth = 3;
pad.UploadURL = "/api/signatures/upload";

string html = pad.HTML;   // <canvas> + Clear/Undo/Save buttons

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Leinwand

Width (Standard 400) und Height (Standard 200) dimensionieren das <canvas>; PenColor (#1a1a2e) und PenWidth (2) gestalten den Strich; BackgroundColor (#ffffff) füllt das Feld.

Strich übertragen

FieldName (Standard 'signature') rendert ein verstecktes Eingabefeld, das das Inline-Skript nach jedem Strich mit einer PNG-Daten-URL aktualisiert.

Aktionen

ShowClear und ShowUndo (beide standardmäßig True) fügen die Schaltflächen Löschen/Rückgängig hinzu; ClearCaption und UndoCaption überschreiben deren Beschriftungen und greifen sonst auf die aktive Locale zurück.

Speichern

UploadURL sendet die PNG-Daten-URL clientseitig per POST, wenn Speichern angeklickt wird; SaveCaption passt den Text dieser Schaltfläche an.

Nur-Lese-Anzeige

ReadOnly rendert ein statisches <img> (oder eine leere Platzhalterbox) anstelle eines aktiven Feldes und zeigt SignatureDataURL, wenn gesetzt.

WebSocket-Versand

WSSend umschließt das Feld mit einem data-sgc-ws-send-Formular, sodass die Unterschrift beim Absenden an den Server gepusht wird — derselbe Mechanismus wie bei den Komponenten Chat und Form.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen