====== 캔버스 기본 가이드 ======
이 화면은 캔버스 컴포넌트에 대한 샘플 화면이다.
캔버스 컴포넌트는 HTML5의 Canvas 기능을 제공하기 위한 컴포넌트이다.
제공되는 기능외의 조작을 하고자 하는 경우, getdom/getjdom/getcontext를 통해서 취득한 오브젝트를 통해 구현이 가능하다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/CANVAS/canvas_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/CANVAS/canvas_basic.xml|canvas_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/CANVAS/canvas_basic.js|canvas_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/CANVAS/canvas_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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 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);
}
}