signature pad 기본 가이드

이 화면은 https://github.com/szimek/signature_pad 사이트에서 제공하는 라이브러리 샘플 화면이다.

signature_pad 라이브러리는 HTML canvas 오브젝트 기반으로 서명을 처리하기 위한 기능을 제공한다.

템플릿 위치: /HTML5/OSS/signaturepad_basic

템플릿 파일

• signaturepad_basic.xml
• signaturepad_basic.js
• 새창으로 실행

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