guide:oss:signaturepad_basic [xFrame5 TechNet]

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 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|새창으로 실행]]

<php>
echo '<html>';
echo '<iframe src="';
echo $conf['plugin']['xf5']['xf5projecthome'], 'template/template.html?';
echo 'xframe_screen_url=/HTML5/OSS/signaturepad_basic"';
echo ' class="_xf5_iframe"';
echo ' style="';
echo $conf['plugin']['xf5']['xf5iframestyle'];
echo '">';
echo '</iframe>';
echo '</html>';
</php>

==== 화면 스크립트 ====

<sxh javascript>
// 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);
	}
}
</sxh>