SignaturePad
TsgcHTMLComponent_SignaturePad — Delphi、C++ Builder、.NET で、Clear、Undo、Save アクションを備えた、ポインターイベント対応の Canvas 署名パッドをレンダリングします。
TsgcHTMLComponent_SignaturePad — Delphi、C++ Builder、.NET で、Clear、Undo、Save アクションを備えた、ポインターイベント対応の Canvas 署名パッドをレンダリングします。
クライアント側で PNG 署名をキャプチャする Canvas ベースのパッドです。ペンと Canvas を設定し、ShowClear/ShowUndo/UploadURL を配線してから、HTML プロパティを読み取ります。
TsgcHTMLComponent_SignaturePad
HTML5 <canvas> パッド + PNG データ URL
Delphi, C++ Builder, .NET
FieldName、Width/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）と PenWidth（2）はストロークのスタイルを設定します。BackgroundColor（#ffffff）はパッドを塗りつぶします。
FieldName（デフォルト 'signature'）は非表示の入力をレンダリングし、インラインスクリプトがストロークのたびに PNG データ URL で更新します。
ShowClear と ShowUndo（どちらもデフォルト True）は Clear/Undo ボタンを追加します。ClearCaption と UndoCaption はそのキャプションを上書きし、指定しない場合は使用中のロケールにフォールバックします。
UploadURL は、Save がクリックされたときにクライアント側で PNG データ URL を POST します。SaveCaption はそのボタンのテキストをカスタマイズします。
ReadOnly は、ライブパッドの代わりに静的な <img>（または空のプレースホルダーボックス）をレンダリングし、設定されている場合は SignatureDataURL を表示します。
WSSend は、パッドを data-sgc-ws-send フォームでラップし、送信時に署名がサーバーへプッシュされるようにします。これは Chat コンポーネントや Form コンポーネントと同じ仕組みです。