====== 캔버스 SVG모드 샘플 가이드 ====== 이 화면은 캔버스 컴포넌트의 SVG모드에 대한 샘플 화면이다. svg_mode속성을 true로 설정하면 도형과 연결선을 그릴 수 있고, 실행중 마우스조작을 통해 크기 및 위치를 변경할 수 있다. svg_mode속성값에 따라서 사용가능한 API가 다르다.(도움말 참조) ===== 예시 ===== 템플릿 위치: /HTML5/COMPONENT/CANVAS/canvas_svg 템플릿 파일 * [[xf5projecthome>template/screen/HTML5/COMPONENT/CANVAS/canvas_svg.xml|canvas_svg.xml]] * [[xf5projecthome>template/screen/HTML5/COMPONENT/CANVAS/canvas_svg.js|canvas_svg.js]] * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/CANVAS/canvas_svg|새창으로 실행]] echo ''; echo ''; echo ''; ==== 화면 스크립트 ==== 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= 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, "사다리꼴"); }