SignaturePad 组件 — sgcHTML | eSeGeCe

SignaturePad

TsgcHTMLComponent_SignaturePad — 渲染基于指针事件的画布签名板,带有清除、撤销和保存操作,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_SignaturePad

一个基于画布的签名板,在客户端捕获 PNG 格式的签名。配置画笔和画布,接入 ShowClear/ShowUndo/UploadURL,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_SignaturePad

渲染为

HTML5 <canvas> 签名板 + PNG data URL

语言

Delphi, C++ Builder, .NET

创建它、配置画笔、渲染它

设置 FieldNameWidth/Height 和画笔颜色,可选地设置 UploadURL 以 POST 提交签名,然后读取 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

关键属性与方法

您最常使用的成员。

画布

Width(默认 400)和 Height(默认 200)设置 <canvas> 的尺寸;PenColor#1a1a2e)和 PenWidth2)设置笔画样式;BackgroundColor#ffffff)填充签名板。

提交笔迹

FieldName(默认 'signature')渲染一个隐藏输入框,内联脚本会在每次落笔后用 PNG data URL 刷新它。

操作

ShowClearShowUndo(均默认 True)添加清除/撤销按钮;ClearCaptionUndoCaption 可覆盖其文案,默认回退到当前语言环境。

保存

点击保存时,UploadURL 在客户端 POST 提交 PNG data URL;SaveCaption 自定义该按钮的文本。

只读展示

ReadOnly 渲染一个静态 <img>(或一个空占位框)而非实时签名板,在设置了 SignatureDataURL 时显示它。

WebSocket 发送

WSSend 将签名板包裹在一个 data-sgc-ws-send 表单中,使签名在提交时推送到服务器,这与 Chat 和 Form 组件使用的机制相同。

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。