캔버스 SVG모드 샘플 가이드

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

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

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

예시

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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
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, "사다리꼴");
}

  • guide/component/canvas/canvas_svg.txt
  • 마지막으로 수정됨: 2023/10/26 10:42
  • 저자 127.0.0.1