SignaturePad
TsgcHTMLComponent_SignaturePad — Delphi, C++ Builder 및 .NET에서 Clear, Undo 및 Save 작업을 갖춘 포인터 이벤트 기반 캔버스 서명 패드를 렌더링합니다.
TsgcHTMLComponent_SignaturePad — Delphi, C++ Builder 및 .NET에서 Clear, Undo 및 Save 작업을 갖춘 포인터 이벤트 기반 캔버스 서명 패드를 렌더링합니다.
클라이언트 측에서 PNG 서명을 캡처하는 캔버스 기반 패드입니다. 펜과 캔버스를 구성하고, ShowClear/ShowUndo/UploadURL을 연결한 다음, HTML 속성을 읽습니다.
TsgcHTMLComponent_SignaturePad
HTML5 <canvas> 패드 + PNG 데이터 URL
Delphi, C++ Builder, .NET
FieldName, Width/Height 및 펜 색상을 설정하고, 선택적으로 서명을 POST하려면 UploadURL을 설정한 다음, 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 컴포넌트에서 사용되는 것과 동일한 메커니즘입니다.