Composant SignaturePad — sgcHTML | eSeGeCe

SignaturePad

TsgcHTMLComponent_SignaturePad — affichez un pavé de signature sur canevas basé sur les événements pointeur, avec les actions Effacer, Annuler et Enregistrer, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_SignaturePad

Un pavé basé sur un canevas qui capture une signature PNG côté client. Configurez le stylet et le canevas, connectez ShowClear/ShowUndo/UploadURL, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_SignaturePad

Produit

Pavé <canvas> HTML5 + URL de données PNG

Famille

Formulaires & Saisies

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-le, configurez le stylet, affichez-le

Définissez FieldName, Width/Height et les couleurs du stylet, définissez éventuellement UploadURL pour envoyer la signature en POST, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Canevas

Width (par défaut 400) et Height (par défaut 200) dimensionnent le <canvas> ; PenColor (#1a1a2e) et PenWidth (2) stylent le trait ; BackgroundColor (#ffffff) remplit le pavé.

Envoi du tracé

FieldName (par défaut 'signature') affiche une saisie cachée que le script en ligne actualise avec une URL de données PNG après chaque trait.

Actions

ShowClear et ShowUndo (par défaut True tous les deux) ajoutent des boutons Effacer/Annuler ; ClearCaption et UndoCaption remplacent leurs libellés et reviennent à la locale active.

Enregistrement

UploadURL envoie l'URL de données PNG en POST côté client lorsqu'on clique sur Enregistrer ; SaveCaption personnalise le texte de ce bouton.

Affichage en lecture seule

ReadOnly affiche une <img> statique (ou une boîte de remplacement vide) au lieu d'un pavé actif, en montrant SignatureDataURL quand elle est définie.

Envoi WebSocket

WSSend enveloppe le pavé dans un formulaire data-sgc-ws-send pour que la signature soit poussée vers le serveur à la soumission, le même mécanisme que celui utilisé par les composants Chat et Form.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir