====== signature pad 기본 가이드 ======
이 화면은 https://github.com/szimek/signature_pad 사이트에서 제공하는 라이브러리 샘플 화면이다.
signature_pad 라이브러리는 HTML canvas 오브젝트 기반으로 서명을 처리하기 위한 기능을 제공한다.
===== 예시 =====
템플릿 위치: /HTML5/OSS/signaturepad_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/signaturepad_basic.xml|signaturepad_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/signaturepad_basic.js|signaturepad_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/signaturepad_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// SignaturePad 오브젝트
this.signaturePad = null;
// "1. loadjs" 버튼 이벤트
function btn_loadjs_on_click(objInst)
{
// 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
screen.loadjs("./ext/lib/signature_pad.umd.min.js");
}
// "2. create" 버튼 이벤트
function btn_create_on_click(objInst)
{
var canvas;
canvas = this.cvs_sign.getdom();
this.signaturePad = new SignaturePad(canvas);
}
// "3. dataurl" 버튼 이벤트
function btn_data_url_on_click(objInst)
{
var image_data = this.signaturePad.toDataURL();
this.img.setimagedata(image_data);
}
// "clear" 버튼 이벤트
function btn_clear_on_click(objInst)
{
this.signaturePad.clear();
}
// "undo" 버튼 이벤트
function btn_undo_on_click(objInst)
{
var data = this.signaturePad.toData();
if (data) {
data.pop(); // remove the last dot or line
this.signaturePad.fromData(data);
}
}