캔버스 SVG모드 샘플 가이드

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

svg_mode속성을 true로 설정하면 도형과 연결선을 그릴 수 있고, 실행중 마우스조작을 통해 크기 및 위치를 변경할 수 있다.

svg_mode속성값에 따라서 사용가능한 API가 다르다.(도움말 참조)

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

템플릿 파일

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

var nSelId = -1;
var line_arr = [factory.rgb(172,25,61), factory.rgb(62,126,251), factory.rgb(154,28,162), factory.rgb(95,63,185)];

function screen_on_load()
{
	// 순서도 그리기
	drawflowchart();

	// 조직도 그리기
	draworgchart();
	// setitemeditable API로 편집 불가로 설정
	canvas03.setitemeditable(-1, false);

	// 다양한 도형 그리기
	drawshape();
}

function canvas01_on_click(objInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint, nItemId, nTextIndex, nImageIndex)
{
	var item_kind = canvas01.getitemkind(nItemId);
	if (item_kind == 0 || item_kind == 5 || item_kind == 15) {
		// 선의 연결정보 취득
		var start_info = canvas01.getlineconnectinfo(nItemId, 0);
		var end_info = canvas01.getlineconnectinfo(nItemId, 1);
		var msg = canvas01.getitemtext(start_info[0]) + " 에서 " + canvas01.getitemtext(end_info[0]) + " (으)로 진행";
		alert(msg);
	}
}

function canvas01_on_rclick(objInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint, nItemId, nTextIndex, nImageIndex)
{
	// 도형을 오른쪽 마우스 클릭시 삭제
	var bContinue = screen.confirm("아이템을 삭제하시겠습니까?");
	if(bContinue) {
		canvas01.removeitem(nItemId);
	}
}

function canvas01_on_dropcomplete(objInst, src_objSrcScreen, objSrcInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint)
{
	if (!objSrcInst || objSrcInst.getcontrolkind() != XFD_CTRLKIND_PUSHBUTTON) { return; }

	var drag_info = factory.getmouseeventpos();
	var pos_x, pos_y;
	pos_x = (objSrcInst.getparent().getleft() + objSrcInst.getleft()) - objInst.getleft() + nPageXPoint - drag_info.pageX;
	pos_y = (objSrcInst.getparent().gettop() + objSrcInst.gettop()) - objInst.gettop() + nPageYPoint - drag_info.pageY;

	if (objSrcInst.getparent() == panel_line) {
		// 연결선 그리기
		canvas01.drawjoinline(pos_x, pos_y);
		return;
	}
	if (objSrcInst.getparent() == panel_shape) {
		var id = -1;
		var fill_color = objSrcInst.getbackcolor();
		if (objSrcInst == btn_start || objSrcInst == btn_end) {
			// 모서리둥근사각형 그리기
			id = canvas01.drawroundrect(pos_x, pos_y, 100, 50, 15, 15, fill_color, false, 0);
			canvas01.setforecolor(0,0,0);
		}
		else if (objSrcInst == btn_brunch1 || objSrcInst == btn_brunch2) {
			// 마름모 그리기
			id = canvas01.drawdiamond(pos_x, pos_y, 120, 60, fill_color, false, 0);
			canvas01.setforecolor(255,255,255);
		}
		else {
			// 사각형 그리기
			id = canvas01.drawrect(pos_x, pos_y, 100, 50, fill_color, false, 0);
			canvas01.setforecolor(255,255,255);
		}
		if (id >= 0) {
			canvas01.additemtext(id, objSrcInst.gettext());
		}

		return;
	}

}

// 화살표 스타일 설정
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 btn_save_on_mouseup(objInst)
{
	// SVG내용을 JSON문자열로 저장
	var strJson = canvas01.savesvg();
	txt_save.settext(strJson);
}

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

// 저장한 JSON문자열을 캔버스에 삽입
function btn_load_on_mouseup(objInst)
{
	var strJson = txt_save.gettext();

	canvas01.loadsvg(strJson);
}

// 순서도 그리기
function drawflowchart()
{
	var pos_x, pos_y;
	var nId, id_arr;

	id_arr = [];
	pos_x = 30;
	pos_y = 10;
	var objSrcInst = btn_start;
	var fill_color = objSrcInst.getbackcolor();
	nId = canvas01.drawroundrect(pos_x, pos_y, 100, 50, 15, 15, fill_color, false, 0);
	canvas01.additemtext(nId, objSrcInst.gettext());
	id_arr.push(nId);

	canvas01.setforecolor(255,255,255);
	pos_y += 70;
	objSrcInst = btn_proc1;
	fill_color = objSrcInst.getbackcolor();
	nId = canvas01.drawrect(pos_x, pos_y, 100, 50, fill_color, false, 0);
	canvas01.additemtext(nId, objSrcInst.gettext());
	id_arr.push(nId);

	pos_x += 50;
	pos_y += 70;
	objSrcInst = btn_brunch1;
	fill_color = objSrcInst.getbackcolor();
	nId = canvas01.drawdiamond(pos_x, pos_y, 120, 60, fill_color, false, 0);
	canvas01.additemtext(nId, objSrcInst.gettext());
	id_arr.push(nId);

	pos_x -= 50;
	pos_y += 100;
	objSrcInst = btn_proc2;
	fill_color = objSrcInst.getbackcolor();
	nId = canvas01.drawrect(pos_x, pos_y, 100, 50, fill_color, false, 0);
	canvas01.additemtext(nId, objSrcInst.gettext());
	id_arr.push(nId);

	pos_x += 120;
	pos_y -= 40;
	objSrcInst = btn_proc3;
	fill_color = objSrcInst.getbackcolor();
	nId = canvas01.drawrect(pos_x, pos_y, 100, 50, fill_color, false, 0);
	canvas01.additemtext(nId, objSrcInst.gettext());
	id_arr.push(nId);

	canvas01.setforecolor(0,0,0);
	pos_x -= 120;
	pos_y += 110;
	objSrcInst = btn_end;
	fill_color = objSrcInst.getbackcolor();
	nId = canvas01.drawroundrect(pos_x, pos_y, 100, 50, 15, 15, fill_color, false, 0);
	canvas01.additemtext(nId, objSrcInst.gettext());
	id_arr.push(nId);

	canvas01.drawjoinline(10, 10, 1, 0, factory.rgb(0,0,0), 1, id_arr[0], 2, id_arr[1], 0);
	canvas01.drawjoinline(10, 10, 1, 0, factory.rgb(0,0,0), 1, id_arr[1], 2, id_arr[2], 0);
	canvas01.drawjoinline(10, 10, 1, 0, factory.rgb(0,0,0), 1, id_arr[2], 2, id_arr[3], 0);
	canvas01.drawjoinline(10, 10, 1, 0, factory.rgb(0,0,0), 1, id_arr[2], 1, id_arr[4], 0);
	canvas01.drawjoinline(10, 10, 1, 0, factory.rgb(0,0,0), 1, id_arr[4], 2, id_arr[3], 1);
	canvas01.drawjoinline(10, 10, 1, 0, factory.rgb(0,0,0), 1, id_arr[3], 2, id_arr[5], 0);
}

// 조직도 그리기
function draworgchart()
{
	var image_dir = "/TEMPLATE/HTML5/COMPONENT/CANVAS";
	var nId, id_arr;
	var pos_arr = [[100,10], [10,90], [190,90], [190,180]];
	var fill_arr = [factory.rgb(51,51,51), factory.rgb(51,51,51), factory.rgb(51,51,51), factory.rgb(51,51,51)];
	var img_arr = ["/go.jpg", "/jang.jpg", "/kim.jpg", "/lee.jpg"];
	var name_arr = ["고현정", "장동건", "김태희", "이승기"];
	var job_arr = ["대표", "이사", "부장", "대리"];

	id_arr = [];
	for (var i=0; i<img_arr.length; i++) {
		nId = canvas03.drawrect(pos_arr[i][0], pos_arr[i][1], 160, 60, fill_arr[i], false, 2, 0, line_arr[i]);
		canvas03.additemimage(nId, image_dir + img_arr[i], 40, 58, 0, 0, [1, 1, 0, 0]);
		canvas03.additemtext(nId, name_arr[i], 0, 0, factory.rgb(255,255,255), null, 10, true, null, null, null, [50,5,0,0]);
		canvas03.additemtext(nId, "직급 : " + job_arr[i], 0, 0, factory.rgb(255,255,255), null, 8, null, null, null, null, [50,20,0,0]);
		canvas03.setitemuserdata(nId, i);
		id_arr.push(nId);
	}

	canvas03.drawjoinline(10, 10, 2, 0, factory.rgb(255,255,255), 0, id_arr[0], 2, id_arr[1], 0);
	canvas03.drawjoinline(10, 10, 2, 0, factory.rgb(255,255,255), 0, id_arr[0], 2, id_arr[2], 0);
	canvas03.drawjoinline(10, 10, 2, 0, factory.rgb(255,255,255), 0, id_arr[2], 2, id_arr[3], 0);
}

function canvas03_on_click(objInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint, nItemId, nTextIndex, nImageIndex)
{
	if (nSelId >= 0) {
		var index = canvas03.getitemuserdata(nSelId);
		canvas03.setitemlinestyle(nSelId, null, null, line_arr[index]);
	}

	if (canvas03.getitemkind(nItemId) != 1) {
		return;
	}
	canvas03.setitemlinestyle(nItemId, null, null, factory.rgb(200,255,200));
	nSelId = nItemId;
}

function canvas03_on_dblclick(objInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint, nItemId, nTextIndex, nImageIndex)
{
	// 도형을 더블클릭시 도형의 문자열을 출력
	if (nItemId >= 0 && canvas03.getitemkind(nItemId) == 1) {
		var name = "이름 : " + canvas03.getitemtext(nItemId, 0);
		var rank = canvas03.getitemtext(nItemId, 1);
		screen.alert(name + "\r\n" + rank);
	}
}

// 다양한 도형 그리기
function drawshape() {
	var id;
	var pos_x = 60;
	var pos_y = 60;
	var width = 100;
	var height = 60;
	var radius_x = width/2;
	var radius_y = height/2;

	id = canvas02.drawcircle(pos_x, pos_y, radius_x);
	canvas02.additemtext(id, "원");

	pos_x += 120;
	id = canvas02.drawellipse(pos_x, pos_y, radius_x, radius_y);
	canvas02.additemtext(id, "타원");

	pos_x += 120;
	id = canvas02.drawpentagon(pos_x, pos_y, radius_x);
	canvas02.additemtext(id, "오각형");

	pos_x += 120;
	id = canvas02.drawhexagon(pos_x, pos_y, radius_x);
	canvas02.additemtext(id, "육각형");

	pos_x += 120;
	id = canvas02.drawheptagon(pos_x, pos_y, radius_x);
	canvas02.additemtext(id, "칠각형");

	pos_x += 120;
	id = canvas02.drawoctagon(pos_x, pos_y, radius_x);
	canvas02.additemtext(id, "팔각형");

	pos_x = 60;
	pos_y += 60;
	id = canvas02.drawtriangle(pos_x, pos_y, width, height);
	canvas02.additemtext(id, "삼각형");

	pos_x += 80;
	id = canvas02.drawrighttriangle(pos_x, pos_y, width+40, height);
	canvas02.additemtext(id, "직각삼각형", 0);

	pos_x += 160;
	id = canvas02.drawroundrect(pos_x, pos_y, width+20, height, 15, 15);
	canvas02.additemtext(id, "모서리둥근사각형");

	pos_x += 160;
	var unit = 20;
	var points = [];
	points.push({x:pos_x, y:pos_y});
	points.push({x:pos_x+width, y:pos_y});
	points.push({x:pos_x+(width-unit), y:pos_y+height});
	points.push({x:pos_x-unit, y:pos_y+height});
	id = canvas02.drawpolygon(points);
	canvas02.additemtext(id, "평행사변형");

	pos_x += 130;
	points = [];
	points.push({x:pos_x, y:pos_y});
	points.push({x:pos_x+width, y:pos_y});
	points.push({x:pos_x+(width+unit), y:pos_y+height});
	points.push({x:pos_x-unit, y:pos_y+height});
	id = canvas02.drawpolygon(points);
	canvas02.additemtext(id, "사다리꼴");
}