Componente SignaturePad — sgcHTML

De un vistazo

TsgcHTMLComponent_SignaturePad

Un panel basado en canvas que captura una firma PNG del lado del cliente. Configura el lápiz y el canvas, conecta ShowClear/ShowUndo/UploadURL, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_SignaturePad

Genera

Panel <canvas> HTML5 + URL de datos PNG

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, configura el lápiz, renderízalo

Define FieldName, Width/Height y los colores del lápiz, opcionalmente define UploadURL para enviar la firma por POST, y luego lee 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Canvas

Width (por defecto 400) y Height (por defecto 200) dimensionan el <canvas>; PenColor (#1a1a2e) y PenWidth (2) definen el estilo del trazo; BackgroundColor (#ffffff) rellena el panel.

Envío del trazo

FieldName (por defecto 'signature') renderiza un input oculto que el script en línea actualiza con una URL de datos PNG después de cada trazo.

Acciones

ShowClear y ShowUndo (ambos por defecto True) añaden los botones Borrar/Deshacer; ClearCaption y UndoCaption sobrescriben sus textos y recurren al idioma activo si no se definen.

Guardado

UploadURL envía la URL de datos PNG por POST del lado del cliente al hacer clic en Guardar; SaveCaption personaliza el texto de ese botón.

Visualización de solo lectura

ReadOnly renderiza una <img> estática (o un recuadro vacío de marcador de posición) en lugar de un panel activo, mostrando SignatureDataURL cuando está definido.

Envío por WebSocket

WSSend envuelve el panel en un formulario data-sgc-ws-send para que la firma se envíe al servidor al enviar el formulario, el mismo mecanismo que usan los componentes Chat y Form.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

SignaturePad