Componente SignaturePad — sgcHTML | eSeGeCe

SignaturePad

TsgcHTMLComponent_SignaturePad — renderize um pad de assinatura em canvas baseado em eventos de ponteiro, com ações de Limpar, Desfazer e Salvar, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_SignaturePad

Um pad baseado em canvas que captura uma assinatura PNG no lado do cliente. Configure a caneta e o canvas, conecte ShowClear/ShowUndo/UploadURL, então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_SignaturePad

Renderiza

Pad em <canvas> HTML5 + data URL PNG

Família

Formulários & Entradas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, configure a caneta, renderize

Defina FieldName, Width/Height e as cores da caneta, opcionalmente defina UploadURL para enviar (POST) a assinatura, então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Canvas

Width (padrão 400) e Height (padrão 200) dimensionam o <canvas>; PenColor (#1a1a2e) e PenWidth (2) estilizam o traço; BackgroundColor (#ffffff) preenche o pad.

Enviando o traço

FieldName (padrão 'signature') renderiza um input oculto que o script inline atualiza com uma data URL PNG a cada traço.

Ações

ShowClear e ShowUndo (ambos com padrão True) adicionam os botões Limpar/Desfazer; ClearCaption e UndoCaption sobrescrevem seus textos e usam o idioma ativo como padrão.

Salvando

UploadURL envia (POST) a data URL PNG no lado do cliente quando Salvar é clicado; SaveCaption personaliza o texto desse botão.

Exibição somente leitura

ReadOnly renderiza uma <img> estática (ou uma caixa vazia de espaço reservado) em vez de um pad interativo, exibindo SignatureDataURL quando definido.

Envio via WebSocket

WSSend envolve o pad em um formulário data-sgc-ws-send para que a assinatura seja enviada ao servidor no envio do formulário, o mesmo mecanismo usado pelos componentes Chat e Form.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir