이 화면은 캔버스 컴포넌트의 SVG모드에 대한 샘플 화면이다.
svg_mode속성을 true로 설정하면 도형과 연결선을 그릴 수 있고, 실행중 마우스조작을 통해 크기 및 위치를 변경할 수 있다.
svg_mode속성값에 따라서 사용가능한 API가 다르다.(도움말 참조)
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, "사다리꼴");
}