SignaturePad-component — sgcHTML | eSeGeCe

SignaturePad

TsgcHTMLComponent_SignaturePad — render een canvas-handtekeningveld op basis van pointer-events met acties Wissen, Ongedaan maken en Opslaan, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_SignaturePad

Een op canvas gebaseerd veld dat client-side een PNG-handtekening vastlegt. Configureer de pen en het canvas, koppel ShowClear/ShowUndo/UploadURL, en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_SignaturePad

Rendert

HTML5 <canvas>-veld + PNG-data-URL

Familie

Formulieren en invoer

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak het aan, configureer de pen, render het

Stel FieldName, Width/Height en de penkleuren in, stel optioneel UploadURL in om de handtekening te posten, en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Canvas

Width (standaard 400) en Height (standaard 200) bepalen de grootte van het <canvas>; PenColor (#1a1a2e) en PenWidth (2) stylen de streek; BackgroundColor (#ffffff) vult het veld.

Streek posten

FieldName (standaard 'signature') rendert een verborgen invoer die het inline script na elke streek ververst met een PNG-data-URL.

Acties

ShowClear en ShowUndo (beide standaard True) voegen knoppen Wissen/Ongedaan maken toe; ClearCaption en UndoCaption overschrijven de teksten en vallen anders terug op de actieve taal.

Opslaan

UploadURL post de PNG-data-URL client-side wanneer op Opslaan wordt geklikt; SaveCaption past de tekst van die knop aan.

Alleen-lezen weergave

ReadOnly rendert een statische <img> (of een lege placeholder-box) in plaats van een live veld, en toont SignatureDataURL indien ingesteld.

WebSocket-verzending

WSSend verpakt het veld in een data-sgc-ws-send-formulier zodat de handtekening bij het versturen naar de server wordt gepusht, hetzelfde mechanisme dat de componenten Chat en Form gebruiken.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen