Komponent SignaturePad — sgcHTML | eSeGeCe

SignaturePad

TsgcHTMLComponent_SignaturePad — renderuje pole podpisu na canvasie oparte na zdarzeniach wskaźnika, z akcjami Wyczyść, Cofnij i Zapisz, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_SignaturePad

Pole oparte na canvasie, które przechwytuje podpis w formacie PNG po stronie klienta. Skonfiguruj pióro i canvas, podłącz ShowClear/ShowUndo/UploadURL, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_SignaturePad

Renderuje

Pole HTML5 <canvas> + adres URL danych PNG

Rodzina

Formularze i pola

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz, skonfiguruj pióro, wyrenderuj

Ustaw FieldName, Width/Height i kolory pióra, opcjonalnie ustaw UploadURL, aby wysłać podpis metodą POST, a następnie odczytaj 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Canvas

Width (domyślnie 400) i Height (domyślnie 200) określają rozmiar <canvas>; PenColor (#1a1a2e) i PenWidth (2) stylizują linię; BackgroundColor (#ffffff) wypełnia tło pola.

Wysyłanie podpisu

FieldName (domyślnie 'signature') renderuje ukryte pole, które wbudowany skrypt odświeża adresem URL danych PNG po każdym pociągnięciu piórem.

Akcje

ShowClear i ShowUndo (oba domyślnie True) dodają przyciski Wyczyść/Cofnij; ClearCaption i UndoCaption nadpisują ich podpisy i domyślnie korzystają z aktywnej lokalizacji.

Zapisywanie

UploadURL wysyła metodą POST adres URL danych PNG po stronie klienta po kliknięciu Zapisz; SaveCaption pozwala dostosować tekst tego przycisku.

Wyświetlanie tylko do odczytu

ReadOnly renderuje statyczny element <img> (lub pusty placeholder) zamiast aktywnego pola, wyświetlając SignatureDataURL, gdy jest ustawiona.

Wysyłanie przez WebSocket

WSSend otacza pole formularzem data-sgc-ws-send, dzięki czemu podpis jest wysyłany na serwer przy zatwierdzeniu, tym samym mechanizmem, który wykorzystują komponenty Chat i Form.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz