캔버스 기본 가이드

이 화면은 캔버스 컴포넌트에 대한 샘플 화면이다.

캔버스 컴포넌트는 HTML5의 Canvas 기능을 제공하기 위한 컴포넌트이다.

제공되는 기능외의 조작을 하고자 하는 경우, getdom/getjdom/getcontext를 통해서 취득한 오브젝트를 통해 구현이 가능하다.

템플릿 위치: /HTML5/COMPONENT/CANVAS/canvas_basic

템플릿 파일

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

var arrImageAlign = [];
var strCanvasImage = "";

function screen_on_load()
{
	arrImageAlign = [tg_left_top,	tg_center_top,	tg_right_top,
					 tg_left_center, tg_center_center, tg_right_center,
					 tg_left_bottom, tg_center_bottom, tg_right_bottom];
	arrImageAlign[0].setstate(true);

	draw_smile();	// 컨텍스트로 직접 제어
}

// 그리기 모드 설정
function rd_drawmode_on_click(objInst, bPrevCheckState, bCurCheckState)
{
	canvas01.setdrawmode(objInst.getselectvalue());	// 그리기 모드 - 0: none, 1: pen, 2: straight, 3: eraser

	switch (parseInt(objInst.getselectvalue(), 10))
	{
		case 1:	// pen
			cb_linestyle.setenable(false);
			cb_arrowstyle.setenable(false);
			cp_linecolor.setenable(true);
			sp_linewidth.settext(canvas01.getlinewidth());
			break;
		case 2:	// straight
			cb_linestyle.setenable(true);
			cb_arrowstyle.setenable(true);
			cp_linecolor.setenable(true);
			sp_linewidth.settext(canvas01.getlinewidth());
			break;
		case 3:	// eraser
			cb_linestyle.setenable(false);
			cb_arrowstyle.setenable(false);
			cp_linecolor.setenable(false);
			sp_linewidth.settext(canvas01.geteraserwidth());
			break;
		default:
			break;
	}
}

// 화살표 스타일 설정
function cb_arrowstyle_on_itemchange(objInst, nprev_item, ncur_item)
{
	canvas01.setarrowstyle(ncur_item);	// 0: none, 1: right_arrow, 2: left_arrow, 3: both_arrow
}

// 선 스타일 설정
function cb_linestyle_on_itemchange(objInst, nprev_item, ncur_item)
{
	canvas01.setlinestyle(ncur_item);	// 0: solid, 1: dash, 2: dot, 3: dashdot, 4: dashdotdot
}

// 선 색상 설정
function cp_linecolor_on_change(objInst, nprev_item, ncur_item)
{
	canvas01.setlinecolor(cp_linecolor.gettext());
}

// 지우개 두께 설정
// 선 두께 설정
function sp_linewidth_on_changed(objInst, prev_text, curr_text)
{
	if (canvas01.getdrawmode() == 3) {
		canvas01.seteraserwidth(curr_text);	// 지우개 두께
	} else {
		canvas01.setlinewidth(curr_text);	// 선 두께
	}
}

// undo
function btn_undo_on_mouseup(objInst)
{
	canvas01.undocanvas();	// undo
}

// redo
function btn_redo_on_mouseup(objInst)
{
	canvas01.redocanvas();	// redo
}

// 캔버스 영역 전체 지우기
function btn_clear_on_mouseup(objInst)
{
	canvas01.clearcanvas();	// 캔버스 영역 전체 지우기
}

// 이미지 삽입
function btn_insertimage_on_mouseup(objInst)
{
	var nSize, nHAlign, nVAlign;

	if (rd_image_fix.getcheck() == true) nSize = 0;
	else nSize = 1;


	for(var i=0; i<arrImageAlign.length; i++)
	{
		if (arrImageAlign[i].getstate() == true)
		{
			nHAlign = parseInt(arrImageAlign[i].gettext().substr(0,1), 10);
			nVAlign = parseInt(arrImageAlign[i].gettext().substr(1,1), 10);
			break;
		}
	}
	// 이미지 삽입
	// 1번째 파라미터 : 이미지데이터(null 인 경우, 파일 선택대화상자 표시)
	// 2번째 파라미터 : 이미지 크기(0:원래 크기, 1:영역 맞춤)
	// 3번째 파라미터 : 수평정렬방식(0:left, 1:center, 2:right)
	// 4번째 파라미터 : 수직정렬방식(0:top, 1:center, 2:bottom)
	canvas01.insertimage(null, nSize, nHAlign, nVAlign);
}

function tg_image_align_on_click(objInst, bState)
{
	for(var i=0; i<arrImageAlign.length; i++)
	{
		if (arrImageAlign[i] == objInst) arrImageAlign[i].setstate(true);
		else arrImageAlign[i].setstate(false);
	}
}

// 이미지 저장
function btn_save_on_mouseup(objInst)
{
	// 이미지 저장
	// 1번째 파라미터 : 바탕색, 바탕이미지 포함 여부
	// 캔버스의 on_saveimage이벤트로 결과 리턴
	canvas01.saveimage(chk_withbg.getcheck());
}

function canvas01_on_saveimage(objInst, strImage)
{
	strCanvasImage = strImage;
	img_save.setimagedata(strImage);	// 이미지 데이터를 이미지박스에 표시
}

// 저장한 이미지를 캔버스에 삽입
function btn_restore_on_mouseup(objInst)
{
	if (strCanvasImage.length > 0) {
		canvas01.insertimage(strCanvasImage, 1);
	}
}

// 컨텍스트로 직접 제어
function draw_smile()
{
	var context = canvas02.getcontext();

	context.beginPath();
	context.arc(75,75,50,0,Math.PI*2,true); // 바깥쪽 원
	context.moveTo(110,75);
	context.arc(75,75,35,0,Math.PI,false);  // 입 (시계 방향)
	context.moveTo(65,65);
	context.arc(60,65,5,0,Math.PI*2,true);  // 왼쪽 눈
	context.moveTo(95,65);
	context.arc(90,65,5,0,Math.PI*2,true);  // 오른쪽 눈
	context.stroke();
}

function btn_drawtext_on_mouseup(objInst)
{
	canvas01.drawtext("Hello", 300, 200, factory.rgb(0,0,255), "궁서", 40, true, true, true, true);
}

function canvas01_on_click(objInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint)
{
	if (canvas01.getdrawmode() == 4) {
		canvas01.drawtext(field01.gettext(), nXPoint, nYPoint);
	}
}